Proper way to set up Azure B2C?

Question

So I've been trying to wrap my head around a lot of different things trying to set up Azure's B2C with my project. My question is: What exactly do I need in order to set up B2C?

My project is using Angular 5 and .Net Core.

I've been reading about ADAL, MSAL, Microsoft Graph API, Azure AD Graph API, custom B2C policies...

Am I correct in understanding that MSAL is what I am to use to authorize use of Graph API? And then I'm using Microsoft Graph API to login, create accounts, etc? From my research it seems ADAL is being phased out.. Azure AD is actually a different service than Azure B2C..

I don't know guys, help me out.

Answer 1

This sample in GitHub seems to have the necessary steps documented in the readme: https://github.com/Azure-Samples/active-directory-b2c-javascript-angular2.4-spa .

The Angular version is different but for the Azure part it is valid. It also has links to relevant documentation regarding Azure setup. I have not played with this particular sample but I hope it helps you forward.

Answer 2

I have two Angular 6 applications running in production that uses Azure AD B2C .

When I started with the first project, it was Angular 2 (I also do the operation for these project thus they are up to date) it felt like MSAL wasn't far enough and I wasn't able to find an NPM package for it. So I decided to use the open source angular-oauth2-oidc component from Manfred Steyer and I don't regret it. The component is OpenID Connect certified and easy to use (except for Azure AD B2C 😉).

In order to use the component with Azure AD B2C you have to provide a config with some values that you can take from the discovery document (eg https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=b2c_1_sign_in ). This is how my config looks like:

export const aadB2cNoDiscoveryConfig: AuthConfig = {
  'clientId': '<GUID>',
  'redirectUri': window.location.origin,
  'loginUrl': 'https://login.microsoftonline.com/<TENANT>.onmicrosoft.com/oauth2/v2.0/authorize?p=b2c_1_signin',
  'logoutUrl': 'https://login.microsoftonline.com/<TENANT>.onmicrosoft.com/oauth2/v2.0/logout?p=b2c_1_signin',
  'scope': 'openid https://<TENANT>.onmicrosoft.com/<TENANT>.api/user_impersonation',
  'oidc': true,
  'issuer': 'https://login.microsoftonline.com/<GUID>/v2.0/',
  'tokenEndpoint': 'https://login.microsoftonline.com/<TENANT>.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1_signin',
  'responseType': 'id_token token',
  'clearHashAfterLogin': true,
  'disableAtHashCheck': true,
  'showDebugInformation': true,
  'strictDiscoveryDocumentValidation': false,
  'jwks': {
    'keys': [
      {
        kid: "X5eX....",
        nbf: 14....,
        use: "sig",
        kty: "RSA",
        e: "AQAB",
        n: "tV......"
      }]
  }
}

To login I invoke something like this inside the constructor of my app.component :

this.oauthService.configure(aadB2cNoDiscoveryConfig);
this.oauthService.tokenValidationHandler = new JwksValidationHandler();
this.oauthService.tryLogin()

---

If I have to implement another web application with Azure AD B2C I would consider trying MSAL again but wouldn't hesitate to fall back to angular-oauth2-oidc.

---

Note: If you use a .NET Core middleware to serve the Angular SPA you could simply add an OpenID Connect middleware. This is a good starting point for that.