How to integrate Azure Active Directory B2C into Azure API Management Developer Portal
Published Jun 07 2021 10:09 PM 9,627 Views
Microsoft

Overview

Azure Active Directory B2C is a cloud identity management solution for consumer-facing web and mobile applications. You can use it to manage access to your APIM developer portal. This article lists detailed steps from the scratch of creating one AzureAD B2C tenant till the end of integration. It is one supplement to the official documentation here: https://docs.microsoft.com/en-us/azure/api-management/api-management-howto-aad-b2c.

 

Below contents contain three main parts: Create AADB2C tenant and signin/signup policy, Create AADB2C application for APIM developer portal, and finally integrate the application into APIM service.

 

Availability

Important

This feature is available in the PremiumStandard and Developer tiers of API Management.

 

Part1 Create Azure Active Directory B2C tenant and signup/signin policies

  • Step1. Create Azure Active Directory B2C tenant.

         Xinmeng_Wang_1-1623124324324.png

 

  • Step2. Have signup and signin policies ready
  • Follow this documentation to create one user flow contains both signup and signin policies: https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-create-user-flows?pivots=b2c-us....
  • Select Azure AD B2C tenant, under Policies, select User flows, and then select New user flow.
  • On the Create a user flow page, select the Sign up and sign in user flow.
  • Choose the claims and attributes needed for APIM developer portal. Remember to include the Given NameSurname for attributes and claims, and also include Email Addresses, User’s ObjectID for claims.

      Xinmeng_Wang_2-1623124407646.png

  • After creation, please navigate Properties page, ensure that Subject claim is also supported by the Signup/Signin policy.

Xinmeng_Wang_0-1639021893704.png

 

Part2 Register Azure Active Directory B2C application

  • Step1.  Get the application Redirect URL
  • Sign in to the Azure portal and locate your API Management instance.
  • Under Identities. Click +Add at the top. The Add identity provider pane appears on the right. Choose Azure Active Directory B2C.
  • Copy the Redirect URL. The first one is used for the new developer portal, second one used for legacy portal.

        Xinmeng_Wang_3-1623124443686.png

 

  • Step2. Register Azure Active Directory B2C application
  • Follow instruction in this documentation: https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-register-applications?tabs=app-....
  • In AADB2C tenant, select App registrations, and then select New registration.
  • Enter a Name for the application. For example, APIMDeveloperPortalB2C.
  • Under Supported account types, select Accounts in any identity provider or organizational directory (for authenticating users with user flows).
  • Paste the Redirect URL we got from Step1 into Web Redirect URI part.

Xinmeng_Wang_4-1623124503412.png

  • Step3. Enable implicit flow for APIM developer portal
  • Remember to enable implicit flows for your application after creation.
  • Click into the application, in Authentication part, allow Access tokens under “Implicit grant and hybrid flows” part and then click save.    

Xinmeng_Wang_5-1623124546680.png

Part3 Integrate Azure Active Directory B2C with APIM developer portal

  • Step1. Create an application client secret
  • This client secret is also known as an application password. The secret will be used by developer portal to exchange an authorization code for an access token.
  • In the Azure AD B2C - App registrations page, select the application you created, for example APIMDeveloperPortalB2C.
  • In the left menu, under Manage, select Certificates & secrets.
  • Select New client secret.
  • Under Expires, select a duration for which the secret is valid, and then select Add.
  • Record the secret's Value for use in your client application code. This secret value is never displayed again after you leave this page.

Xinmeng_Wang_6-1623124594011.png

  • Step2. Integrate Azure Active Directory B2C with APIM developer portal
  • Get the AADB2C application ID from application Overview.

Xinmeng_Wang_7-1623124636927.png

  • Switch back to the API Management Add identity provider pane and paste the application ID into the Client Id text box, the secret from Step1 into the Client Secret text box.
  • Specify the domain name of the Azure Active Directory B2C tenant in Signin tenant.
  • The Authority field let you control the Azure AD B2C login URL to use. Set the value to <your_b2c_tenant_name>.b2clogin.com.
  • Specify the Signup Policy and Signin Policy from the B2C Tenant policies. Here uses the user flow name created in Part1. Optionally, you can also provide the Profile Editing Policy and Password Reset Policy.
  • After you've specified the desired configuration, click Save.

        Xinmeng_Wang_8-1623124671150.png

  • After the changes are saved, developers will be able to create new accounts and sign into the developer portal by using Azure Active Directory B2C. You need to republish the portal for the AAD changes to take effect.

Xinmeng_Wang_9-1623124706888.png

  • Developer Portal will use AADB2C credential to create accounts in APIM service for you.

Xinmeng_Wang_10-1623124736140.png

 

Additional

  • Please make sure to include Given NameSurname, Email Addresses and User’s ObjectID for the signin/signup policy claims. Only if those claims are selected, APIM developer portal then can parse those payloads from the AAD token it got.

Xinmeng_Wang_0-1639041509915.png

  • User’s ObjectID(oid) and Subject(sub) claims in AADB2C token are necessary for APIM to identify the caller of APIM user creation call from developer portal. Lacking either of these two claims will cause AccessDenied issue.
  • Given NameSurname, Email Addresses are necessary for APIM to automatically create the user. Otherwise, the developer portal will request user to manually fill in the firstname, lastname or email address when signup.
  • The reason why we use the redirect URL format "https://<APIM name>.developer.azure-api.net/signin" in AAD B2C is that, by default the AAD B2C signin/signup button will be placed in developer portal "signin" page. 

Xinmeng_Wang_0-1624371160290.png

 

If you are going to customize/move the AAD button(Sign-in button: OAuth widget) to any other page, please modify the redirect URL in AADB2C accordingly. Let's say if you moved the button to developer portal home page and trying to signin/signup from Home page, please make sure to add "https://<APIM name>.developer.azure-api.net"(developer portal home page url) into redirect URL for AAD B2C application. 

 

 

Co-Authors
Version history
Last update:
‎Dec 09 2021 01:19 AM
Updated by: