VueJS + .NET Core Web API + Azure ADB2C

As the title mentioned, this article below will describe the steps on the integration with Azure ADB2C. Many of us might not be very familiar on what is the value that Azure ADB2C can bring in.

Let me go through my experience on my recent project developing for my interest. Below diagram describe the entire application stack for my project and it was a simple VueJS frontend with .NET core Web API. The reason that i chose different technology stack instead of using express compare to .NET core Web API is because i would like to explore on different programming languages deploying into Kubernetes.

So with the above diagram and the next step will be how to leverage Azure ADB2C for SSO and the backend web api authorization.

Step 1 : Create Azure ADB2C

Go to Azure portal and create new B2C Tenant.

After the B2C Tenant created, link the tenant to the subscription.

Select the B2C Tenant on the Switch Directory window.

Step 2 : Configure Google as the Social IDP

Go to Google Developer Console with your credential and create the project.

Create App under OAuth consent screen and fill in the Authorized domains

Go to credentials and add new OAuth 2.0 Client IDs. Make sure to copy the secret. Fill in below for the authorized redirect URIs.

• https://login.microsoftonline.com
• https://login.microsoftonline.com/te/<your tenant id in AAD>/oauth2/authresp

Back to Azure Portal AADB2C screen and add Google as the IDP. Click on Identity Providers under AADB2C and select Google.

Step 3 : Add User Flows

Fill in the require information on the User Flow creation.

Step 4 : Create App Registration to allow frontend to access the User Flow created.

In put the following for the Redirect URI for localhost testing.

Enable the Access Token and ID Token.

Step 5 : Changes to VueJS Frontend

Add in MSAL js https://www.npmjs.com/package/msal

npm install msal

In the login page or the sign in page with SignIn button add the following :

Step 6 : Authorize backend Web API

Add App Registration for Web API and Expose API Permission

Same with above but change the Redirect URI to the following for localhost testing of .NET Core Web API. You can change to your URI.

Click on Expose an API and add a scope for user.read

Back to the Web Frontend App Registration and add the user.read scope. Click on Add a permission then My API and select Web API App.

Select Grant admin consent.

Step 7 : Changes in Web API to enable Authorization with token pass from Frontend. Add in Microsoft.Identity.Web for the .NET core webapi project.

Change the Frontend VueJS to acquire the additional scope.

Finally when you test your Frontend and click on SignIn you will see the Login page from the AADB2C

PS : This is purely my experimental project and you should not use it for production purposes.