Image may be NSFW.
Clik here to view.
Azure AD B2C stands for Active Directory Business to Consumers. It offers a cloud identity service allowing you to connect to any customer in a standarized manner, while maintaining your corporate style or custom brand.
Governments and enterprises worldwide are using Azure Active Directory B2C to serve their applications to their citizens and customers with fully customizable experiences, while protecting their identities at the same time. Built on Azure Active Directory, the highly-secure cloud identity platform handles billions of authentications per day.
Still Azure B2C comes in at a very reasonable price point: the free tier covers the first 50.000 users and 50.000 transactions per month!
Before diving in to the real details of configuring this application, let’s take a look at the high level steps needed to set up and connect the service.
- Create a new Azure Active Directory B2C resource
- Add our application to this new directory
- Optionally add an identity provider (we skip this and rely on local users)
- Configure a User Flow (or policy in the old UI)
- Add a local user to test the application
- Configure our Angular app
Create a new AAD B2C
The steps needed to create and link a new Active Directory B2C resource are outlined in great detail in the official docs. Please follow the tutorial here: https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-tenant
You should end up with a new instance and everything we need to continue with our next step!
Add an application
We need to add an application first before we can configure a login policy. This part requires setting a few properties:
Image may be NSFW.
Clik here to view.
- Name: pick any allowed name;
- Include web app?: Yes, this option enables Implicit Flow and allows to set a reply url;
- Allow implicit flow?: Yes, this is the simplest OpenID Connect Flow and also suited for non-trusted/ Javascript clients;
- Reply url: we can put our localhost url for testing purposes here. For production scenarios we need to add a real FQDN.
When the application is created, we should take note of the Application ID. This will become our OpenID Connect ClientID for our Angular app.
Configure a user flow
To allow users to actually use our identity service, we setup a policy. Please note that the screenshots here are made with the new UI (which is in preview, but better Image may be NSFW.
Clik here to view.
)
First we add a new user flow and pick “Sign In”:
Image may be NSFW.
Clik here to view.
Identity providers: in this case we rely on local users, but you can configure additional providers.
Application claims: we can define the values we return in the token. Pick any combination, but for the demo we choose “Display Name”
Add a test user
To be able to test the application later on we need to add a test user. Just click “Users” and add a new user. Since we need a display name, make sure you provide a First and Lastname in the profile section.
Configure the Angular app
Support for OpenID Connect is easily added to an existing app using the excellent “angular-oauth2-oidc” npm library.
npm install angular-oauth2-oidc --save
Next: import the module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { OAuthModule } from 'angular-oauth2-oidc';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule, OAuthModule.forRoot()],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
And configure the oAuth service:
private configureAuth(): void {
this.oauthService.configure({
issuer:
'https://',
loginUrl:
'https://',
logoutUrl:
'https://',
redirectUri: window.location.origin + '/index.html',
clientId: '',
scope: 'openid',
requestAccessToken: false
});
this.oauthService.setStorage(sessionStorage);
this.oauthService.tryLogin();
}
The easiest way to retrieve the values we need, is by going back to the Azure Portal and running our policy. This opens a blade that displays a link to a configuration document with everything we need!
Image may be NSFW.
Clik here to view.
From this document we map most of the required values:
- issuer : issuer
- loginUrl : authorization_endpoint
- logoutUrl : end_session_endpoint
- clientId : this is the Application Id from the earlier step “Add an application”
The OpenID Connect library also supports a newer API, where you don’t need to provide all these values (just the link to the configuration document). Unfortunately, this option is not compatible with Azure B2C, because of the required querystring parameter “p=policyname”.
If everything is setup correctly, we can now start our local Angular app and login using the test user we created!
Image may be NSFW.
Clik here to view.
The code for this demo is available on github: https://github.com/yuriburger/ng-azureb2c-demo
/Y.