Delegate authentication to the B2C Active Directory and not to all users in Angular 14 with MSAL

Question

I have created an Active Directory in Azure and user management must be managed with a web application in Angular 14 with rxjs7 and with MSAL-Angular v2 and some APIs in Nodejs.

Now in this section of code, in the authority part: microsoft-authentication-library-for-js/samples/msal-angular-v2-samples/angular14-rxjs7-sample-app/src/app/app.module.ts

GitHubRepo: https://github.com/AzureAD/microsoft-authentication-library-for-js.git

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: '<ClientId>',

// Here:

      authority: 'https://login.windows-ppe.net/common',
// authority: 'https://login.microsoftonline.com/common', // Prod environment

// End 

      redirectUri: '/',
      postLogoutRedirectUri: '/'
    },
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE,
    },
    system: {
      loggerOptions: {
        loggerCallback,
        logLevel: LogLevel.Info,
        piiLoggingEnabled: false
      }
    }
  });
}

So much this: 'https://login.microsoftonline.com/common' or this 'https://login.windows-ppe.net/common' They are for common accounts in general and any account that exists in Microsoft can be logged in and not just the users that I have registered in my directory.

How can this search or login be restricted so that only users who are in the directory can be accepted?

Since I don't register them, I just log in and when I get their profile, they don't get the data that doesn't exist in the directory.

In the code obtained from GitHub, I only made the changes of the client id and I was trying several links in the authority thinking that in this part it should go to obtain specifically the directory of my tenant created in Azure.

And also how you can add the user flows that are created in B2C so that you can get not the Microsoft login but the one you customize with HTML and CSS. Since in previous versions there was the option to add the policies.

As in this another example offered by Azure with Angular 11:

Path: ms-identity-javascript-angular-tutorial/1-Authentication/2-sign-in-b2c/SPA/src/app/auth-config.ts

GitHubRepo: https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial.git

export const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi_reset_v2",
        editProfile: "b2c_1_edit_profile_v2"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_susi_reset_v2",
        },
        editProfile: {
            authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_edit_profile_v2"
        }
    },
    authorityDomain: "fabrikamb2c.b2clogin.com"
};

This example might help: https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa/blob/0af58afa62e8d045fe1fd6d9f2d1e49bfe5b7b41/App/authConfig.js — juunas, Jun 19 '22 at 14:52

score 0 · Answer 1 · answered Jul 04 '22 at 14:32

Please check below way by giving the user flow and selecting specific authority.

save user flow for the custom page you created and define policies:

and call the flow and its authority which is for particular tenant .

const msalConfig = {
    auth: {
      clientId: "xxxxxxxxe", // T
      authority: b2cPolicies.authorities.signUpSignIn.authority, // Choose sign-up/sign-in user-flow as your default.
    ....
  }

reference as said by @juunas > ms identity b2c javascript spa

You can raise a support request for the same.

Delegate authentication to the B2C Active Directory and not to all users in Angular 14 with MSAL

1 Answers1