MSAL 2 and Azure AD B2C

Overview

  • Use Azure AD B2C as IDP.
  • Develop SPA code with MSAL 2 and allow external user to sing in using authorization code flow with PKCE. That means we wouldn’t need to keep or manage app registration secret and wouldn’t need to enable implicit grant flow.
  • Protect MyStorageApi through Azure AD B2C.
  • Deploy API code to Azure app service using managed identity for Azure resource authentication and authorization.

Configure Azure AD B2C App Registration

You need Azure AD B2C tenant to complete this step, refer to https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-tenant for creating AAD B2C tenant.

Azure AD B2C Configuration

Follow MS document to configure Azure AD B2C, we need two flows, one for sign-in/sign-up, one for editing profile. Self service password reset is included in sign -in/sign-up flow.

Web API Code

MyStorageAPI code is already developed from prior blogs, it can be reused. We just need to configure it to work with Azure AD B2C.

{
"AzureAdB2C": {
"Instance": "https://<b2c domain>.b2clogin.com",
"ClientId": "....ea-2e67fc1ce250",
"Domain": "<b2c domain>.onmicrosoft.com",
"SignUpSignInPolicyId": "B2C_1_signupsignin1",
"EditProfilePolicyId": "B2C_1_editprofile1",
"Scopes": "read write",
"CallbackPath": "/signin-oidc"
},
"https_port": 44351,
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"AllowedHosts": "*",
"AzureStorage": {
"AcctName": "<storage acct name>",
"ContainerName": "<container name>"
}
}

SPA Code

We add auth-config.ts to hold B2C related configurations.

Deploy to Azure

Web API

From visual studio, you may create Azure app service plan and app service, and publish web app.

App Service Managed Identity

Make sure the app service has managed identity and has Azure resource RBAC role to work with storage account.

Front End Code

UI code can be hosted in Azure storage as static site. Enable static site for your storage account, build from VSCode terminal and upload files from dist folder to Azure blob $web container.

ng build --configuration=productionPS D:\identity-for-all\msal-angular-my-storage-api-b2c\dist\msal-angular> dir

Validation

Click “Login” or “List Azure Blob” to get started on Azure AD B2C user flow. It supports sign in, self service password reset and sign up.

Conclusion

In this series of blogs, we focused on Microsoft identity platform and Azure cloud, started with a very simple .NET console app to authenticate to Azure storage, explored sing in user from SPA and protection of web api through both Azure AD and Azure AD B2C.

References

https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-tenant
https://docs.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-sample-angular-spa-app
“https://datatracker.ietf.org/doc/html/rfc7636
https://developers.onelogin.com/openid-connect/guides/auth-flow-pkce
https://www.rahulpnath.com/blog/defaultazurecredential-from-azure-sdk/
https://docs.microsoft.com/en-us/azure/active-directory/develop/howto-add-app-roles-in-azure-ad-apps#usage-scenario-of-app-roles
https://github.com/Azure-Samples/active-directory-b2c-node-sign-up-user-flow-captcha
https://docs.microsoft.com/en-us/azure/active-directory-b2c/add-api-connector-token-enrichment?pivots=b2c-user-flow
https://docs.microsoft.com/en-us/answers/questions/676467/how-to-get-groups-claim-in-azure-ad-b2c-access-tok.html

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cloud Journey

Cloud Journey

All blogs are strictly personal and do not reflect the views of my employer, focus on cloud networking, cloud security and API security.