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"
};

Answer 1

Hi @Luis Diego Cáceres García ,

As mentioned earlier, for B2C the authority URL would be "https://<tenantName>.b2clogin.com/<tenantName>.onmicrosoft.com/B2C_1_signupsignin.

When you added B2C's authority URL, then error states that authority need to add in knownAuthorities config parameter to trust the B2C authority.

You need to add below configration in knownAuthorities:

export const msalConfig: Configuration = {  
    auth: {  
        clientId: 'xxx-xx-xx-xxx-xxxx',   
        authority: b2cPolicies.authorities.signUpSignIn.authority,   
        knownAuthorities: [b2cPolicies.authorityDomain] //Mark your B2C tenant's domain as trusted.  
        }  

where b2cPolicies configured policies in B2C tenant and authority domain.

export const b2cPolicies = {  
    names: {  
        signUpSignIn: "B2C_1_signupsignin",  
        editProfile: "B2C_1_profileEditing"  
    },  

authorities: {  
    signUpSignIn: {  
        authority: "https://shwb2c.b2clogin.com/shwb2c.onmicrosoft.com/B2C_1_signupsignin",  
    },  
    editProfile: {  
        authority: "https://shwb2c.b2clogin.com/shwb2c.onmicrosoft.com/B2C_1_profileEditing"  
    }  
},  
authorityDomain: "shwb2c.b2clogin.com"  

};

I tested the scenario in my lab and able to authenticate successfully in B2C tenant.

As you updated authority URL to https://login.microsoftonline.com which redirect application page to Azure AD sign in audience rather than B2C sign in page.

Hope this will help.

Thanks,
Shweta

--------------------------------------

Please remember to "Accept Answer" if answer helped you.

Answer 2

Hi @Luis Diego Cáceres García ,

Thanks for reaching out.

I understand you are looking for authority value in Azure AD to allow users in sign in from your organization only.

The Authority value indicates a directory that MSAL can request tokens from, and its URL differ in Azure AD and Azure AD B2C.

In Azure AD,

https://login.microsoftonline.com/common/ allows to access applications for users with work and school accounts and personal Microsoft accounts or in case of multi-tenant applications where users from different organization can sign into the application request token with this URL.

To restrict sign in users from your organization (directory), you need to restrict authority URL for your tenant only https://login.microsoftonline.com/<tenantID>/
Also, make sure while registering the application in portal, under supported account types which allows to sign in audience according to its value, choose Accounts in this organizational directory only (<TenantName> only - Single tenant) which will allow to sign in users from your directory only.

In Azure AD B2C,

In case of B2C tenant which allow sign in users with social identities and build around the policy (User flows or custom policy). B2C's authority URL in MSAL also have policy name parameter which specifies the policy Azure AD B2C should use.

https://<tenant-name>.b2clogin.com/<tenant-name>.onmicrosoft.com/<policy-name>

Here policyName is the name of the user flow or custom policy to apply. For example, a sign-up/sign-in policy like b2c_1_signIn
and <tenant-name> is the name of B2C tenant.

References : https://learn.microsoft.com/en-us/azure/active-directory/develop/msal-client-application-configuration#authority
https://learn.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app#register-an-application

Hope this will help.

Thanks,
Shweta

----------------------------

Please remember to "Accept Answer" if answer helped you.

Answer 3

Thank you very much for the reply @Shweta Mathur .

I didn't know about the difference of the authority in AD and AD B2C.

I made the process to register the web app in B2C in this way:

For various types of accounts. (I need this characteristic in this project) like this:

Then I copy the client id to paste in the Angular application:

This this permissions that have for default:

And I have activated the creations of the tokens but I think when use PKCE don´t need this activations of the tokens.

And finally I create a user flow to sign in and sign out:

Now I have a error when I use this syntax:

auth: {
authority: 'https://<tenant-name>.b2clogin.com/<tenant-name>.onmicrosoft.com/<policy-name>',
...
}

Now when I put it the code looks like this:

And I have tried with this too:

https://login.microsoftonline.com/tfp/<tenant-name>.onmicrosoft.com/B2C_1_signupsignin1/v2.0/<tenant-name>.b2clogin.com

https://login.microsoftonline.com/tfp/<tenant-name>.onmicrosoft.com/B2C_1_signupsignin1/v2.0/

And result in this error:

And also try placing it in the known authorities:

And it takes me to this login:

Not this:

I don't know what I'm doing wrong so that I don't get redirected to my login that I created in the B2C active directory.

Luis Cáceres.

Answer 4

Thank you very much for the reply @Shweta Mathur that solved my problem.