How to configure Azure AD B2C using OpenId Connect #11665

edsellu created 9 months ago

Are there any instructions/documentation on how to configure the Angular flavor of ASP.NET Zero against Azure AD B2C?

I had to "hack up" some of the code to get it working. I'm probably doing something wrong.

The authority is not the issuer & the Angular app throws an exception
1. Hack: hard code the issuer in the Angular code
loadDiscoveryDocumentAndTryLogin uses the issuer for the .well-known configuration & that's not how B2C issues tokens
1. Hack: call the loadDiscoveryDocument() method & pass a hard coded value

appsettings.json:

"Authentication": {
  "OpenId": {
    "IsEnabled": "true",
    "ClientId": "e54897a8-f204-47d0-94fd-fca2701866b5",
    "Authority": "https://spottedmahnb2c.b2clogin.com/spottedmahnb2c.onmicrosoft.com/B2C_1_AspNetZeroResearch/v2.0/",
    "LoginUrl": "https://spottedmahnb2c.b2clogin.com/spottedmahnb2c.onmicrosoft.com/B2C_1_AspNetZeroResearch/oauth2/v2.0/authorize",
    "ValidateIssuer": "true",
    "ResponseType": "id_token",
    "ClaimsMapping": [
      {
        "claim": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier",
        "key": "name"
      },
      {
        "claim": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
        "key": "emails"
      }
    ]
},

sidenote: the claims mapping was a lucky educated guess (the email one it told me but not the name one)

change 1 to issuer in Angular code:

private getOpenIdConnectConfig(loginProvider: ExternalLoginProvider): AuthConfig {
    let authConfig = new AuthConfig();
    authConfig.loginUrl = loginProvider.additionalParams['LoginUrl'];
    //authConfig.issuer = loginProvider.additionalParams['Authority'];
    authConfig.issuer = "https://spottedmahnb2c.b2clogin.com/80033dfd-6eab-42c4-bdf2-4e223d4b396f/v2.0/";
    //...
    return authConfig;
}

change 2 to .well-known config

public openIdConnectLoginCallback(resp) {
    this.initExternalLoginProviders(() => {
        let openIdProvider = _filter(this.externalLoginProviders, {
            name: 'OpenIdConnect',
        })[0];
        let authConfig = this.getOpenIdConnectConfig(openIdProvider);

        this.oauthService.configure(authConfig);
        this.spinnerService.show();

        // out of the box code
        // loadDiscoveryDocumentAndTryLogin(options = null) {
        //     return this.loadDiscoveryDocument().then((doc) => {
        //         return this.tryLogin(options);
        //     });
        // }
        let configEndpoint = "https://spottedmahnb2c.b2clogin.com/spottedmahnb2c.onmicrosoft.com/B2C_1_AspNetZeroResearch/v2.0/.well-known/openid-configuration";
        this.oauthService.loadDiscoveryDocument(configEndpoint)
            .then((doc) => {
                this.oauthService.tryLogin().then(() => {
            
	            //...
        });
    });
}

Issuer vs authority/.well-known config "iss": "https://spottedmahnb2c.b2clogin.com/80033dfd-6eab-42c4-bdf2-4e223d4b396f/v2.0/" vs https://spottedmahnb2c.b2clogin.com/spottedmahnb2c.onmicrosoft.com/B2C_1_AspNetZeroResearch/v2.0/.well-known/openid-configuration

Documentation

ClientId maps to this:

Authority maps to this:

LoginUrl maps to this:

Additional links

How to configure Azure AD B2C using OpenId Connect #11665

3 Answer(s)