Azure Functions and B2C Authentication

I was working on Single page application built on Angular with Azure B2C for User Management , B2C is pretty simple to getting it up and running. My back end Apis are built using azure functions and wanted to authenticate function calls using same user JWT token.

Azure functions support different identity servers like Azure Active directory, Facebook twitter and google, this post is focused on Azure B2C but I think it would be same for all identity servers. Azure functions Authentication is handled by “Easy Auth” an App Service that sits on top on function apps, any request coming in should be authenticated.

Authentication can be turned On-Off easily, if the Authentication is turned every incoming request must be authorized.

Getting Started

Step 1

Create Azure B2C tenant, this can be done through the portal make sure to associate it with a subscription.

Instructions for creating in Azure B2C

Step 2:

B2C provides Multiple User flows also called user Journeys we will create Sign up/Sign in User Flow for login in SPA

Create Signup/Sign in policy:

Azure B2C “Signup and Sign in” is to login in user or self-register users.

Step 3 – Create an AD B2C Application

Application that is being protected needs to be created in Azure AD, Give it a name select web app and reply Url to https://jwt.ms for testing.usually the reply URL is the web application Url that is being authenticated

Step 4 – Enable authentication

Authentication (Easy Auth) can be enable but going into Azure function  settings  Authentication/authorization  Turn on
Next, we need to set up the Azure Active Directory authentication provider, for which we need to select “advanced” mode. There are two pieces of information that we need to provide. First is the client ID, which is the application ID of our application we created earlier in AD B2C. The second (issuer URL) is the URL of our sign up or sign in policy from AD B2C. This can be found by looking at the properties of the sign up or sign in policy in AD B2C.

Step 5:
Steps SPA Application to Use Azure B2C for User Management, capture the JWT token from login and pass in authorization header for authentication for function apps. MSAL makes it much easier for Azure B2C authentication.

Excellent Article on setting up Angular with B2C By Sam Bowen-Hughes

View at Medium.com

Conclusion

In this post we learned how to Authenticate Function App using B2C User token,Hope you enjoyed it , Stay safe.

Useful links :

https://github.com/Azure-Samples/active-directory-b2c-javascript-angular-spa

Thank you
Srinivasa Avanigadda
Twitter : @azsrini