Skip to main content

Set up Azure AD B2C

In this tutorial, you learn how to extend your Azure AD B2C (AD B2C) signup and login process with Authentication Cloud, so that your Customers can use passwordless authentication.

Authentication Cloud offers passwordless signup and login for websites and web applications with your Access App. The Access App is branded to match your corporate identity, is built using a hardened SDK, and is FIDO UAF-certified. The solution complies with the Payment Services Directive 2 (PSD2) requirements and provides Strong Customer Authentication (SCA).

Time to complete the tutorial: If you are also setting up your AD B2C properties, it takes about 2 hours to complete this tutorial.

Introduction‚Äč

Get a glimpse with the following screencast of how cool the passwordless experience for the customers of Muvonda is, once it is integrated to Authentication Cloud.

Step 0: Get a trial account for Authentication Cloud‚Äč

Sign up for a Nevis Authentication Cloud instance through the Azure Marketplace.

Nevis Authentication Cloud on Azure Marketplace
  1. On the Azure Marketplace, click Get It Now. 
  2. Select your Country / region.
  3. Accept the Terms and Conditions, and click Continue.
  4. Click Set up + subscribe to start your free trial.
  5. Now complete the Authentication Cloud signup process at Nevis. We assign you a trial instance.
  6. You can access your Authentication Cloud instance using the Nevis Portal.

Step 1: Download the templates for the branded user interface and custom policies‚Äč

To enable the custom passwordless user interface, you need to modify several HTML and XML files corresponding to your AD B2C tenant and your Authentication Cloud instance. For your convenience, we provide the templates for download. You need an editor or an Integrated Development Environment (IDE) to modify the files to match your settings.

  • Clone the partner integrations repository from Github.
  • Alternatively you can also download it as ZIP file, if you do not have a git client.

You can find the custom policies under partner-integrations/samples/Nevis/policy.

You can find the instructions on how the files need to be modified in Step 12: Customize and upload your custom policies.

Step 2: Create your Access Key‚Äč

  1. Open https://portal.nevis.net/ in a browser, and log in.
  2. In the Nevis Orbit portal, click on the newly created instance tile to open the Management Console.
  3. In the sidebar, click on Custom Integrations.
  4. Click on Add custom integration.
  5. For Integration Name, enter a distinct name to identify your AD B2C tenant, for example, Muvonda AD B2C.
  6. For URL / Domain, enter the URL of the domain or resource name that you defined in your AD B2C tenant. For example, https://[something].onmicrosoft.com. Make sure to add the https:// prefix.
  7. Click on Next.
  8. Note down the Access Key for later use.
  9. Click on Next.
  10. Note down the REST API Endpoint for later use.

Step 3: Install the Access App on your mobile‚Äč

  1. From the Access App trial email, open Test Flight on iOS, or the Firebase app invitation for Android.
  2. Follow the instructions to install the branded Muvonda Access App.

Step 4: Create your Azure AD B2C tenant‚Äč

If you do not have an Azure account, create your free account.

  1. Sign in to the Azure portal.
  2. From the Azure portal menu, select Create a resource.
  3. Search for Azure Active Directory B2C, and then select Create.
  4. Select Create a new Azure AD B2C Tenant.
  5. On the Create a directory page, enter the following:
    • Organization name
    • Initial domain name
    • Country or region
    • Subscription
    • Resource group
  6. Select Review + create.
  7. Review your directory settings.

For more information, see Tutorial: Create an Azure Active Directory B2C tenant in the Microsoft Azure documentation.

Step 5: Register a web application‚Äč

  1. Make sure you are using the directory that contains your Azure AD B2C tenant.
  2. In the Azure portal, search for and select Azure AD B2C.
  3. Select App registrations, and then select New registration.
  4. Enter a Name for the application. For example, webapp1.
  5. Under Supported account types, select Accounts in any identity provider or organizational directory (for authenticating users with user flows).
  6. Under Redirect URI, select Web, and then enter https://jwt.ms in the URL textbox.
  7. Under Permissions, select the Grant admin consent to openid and offline_access permissions checkbox.
  8. Select Register.

For a web application, you need to create an application secret. The client secret is also known as an application password. The secret is used by your application to exchange an authorization code for an access token.

  1. On the Azure AD B2C - App registrations page, select the application you created, in our example, webapp1.
  2. In the left menu, under Manage, select Certificates & secrets.
  3. Select New client secret.
  4. Enter a description for the client secret in the Description box. For example, clientsecret1.
  5. Under Expires, select a duration for which the secret is valid, and then select Add.
  6. Record the secret Value for use in your client application code. This secret value is never displayed again after you leave this page. You use this value as the application secret in your application code.

Connect the webapp1 app with the https://jwt.ms/ app for testing a user flow or custom policy by enabling the implicit grant flow in the app registration:

  1. In the left menu, under Manage, select Authentication.
  2. Under Implicit grant and hybrid flows, select both the Access tokens (used for implicit flows) and D tokens (used for implicit and hybrid flows) checkboxes.
  3. Select Save.

For more information, see Tutorial: Register a web application in Azure Active Directory B2C in the Microsoft Azure documentation.

Step 6: Manage your Azure subscription‚Äč

  1. Go to Directories.
  2. Switch to the Default Directory.
  3. On the homepage, select Subscriptions.
  4. Select Azure subscription 1.
  5. Select Change directory.
  6. Select your newly created tenant from the drop-down menu.
  7. Select the checkbox below the drop-down menu.
  8. Select Change.
  9. Switch back to your new tenant.

Step 7: Create user flows and custom policies‚Äč

  1. In the Azure portal, search for and select Azure AD B2C.
  2. Under Policies, select User flows, and then select New user flow.
  3. On the Create a user flow page, select the Sign up and sign in user flow.
  4. Under Select a version, select Recommended, and then select Create.
  5. Enter a Name for the user flow. For example, signupsignin1.
  6. For Identity providers, select Email signup.
  7. For User attributes and claims, select the claims and attributes that you want to collect and send from the user during signup. For example, select Show more, and then choose attributes and claims for Country/Region, Display Name, and Postal Code. Click OK.
  8. Click Create to add the user flow. A prefix of B2C_1 is automatically added before the name.

For more information, see Tutorial: Create user flows and custom policies in Azure Active Directory B2C in the Microsoft Azure documentation.

Step 8: Add signing and encryption keys‚Äč

Create the signing key:

  1. On the Azure AD B2C page, under Policies, select Identity Experience Framework.
  2. Select Policy Keys and then select Add.
  3. For Options, choose Generate.
  4. In Name, enter TokenSigningKeyContainer. The prefix B2C_1A_ may be added automatically.
  5. For Key type, select RSA.
  6. For Key usage, select Signature.
  7. Select Create.

Create the encryption key

  1. On the Azure AD B2C page, under Policies, select Identity Experience Framework.
  2. Select Policy Keys and then select Add.
  3. For Options, choose Generate.
  4. In Name, enter TokenEncryptionKeyContainer. The prefix B2C_1A_ may be added automatically.
  5. For Key type, select RSA.
  6. For Key usage, select Encryption.
  7. Select Create.

For more information, see Tutorial: Create user flows and custom policies in Azure Active Directory B2C in the Microsoft Azure documentation.

Step 9: Register the Identity Experience Framework‚Äč

Register the IdentityExperienceFramework application as follows:

  1. Select App registrations, and then select New registration.
  2. For Name, enter IdentityExperienceFramework.
  3. Under Supported account types, select Accounts in this organizational directory only.
  4. Under Redirect URI, select Web, and then enter <https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com>, where your-tenant-name is your Azure AD B2C tenant domain name.
  5. Under Permissions, select the Grant admin consent to openid and offline_access permissions checkbox.
  6. Select Register.
  7. Record the Application (client) ID for use in a later step.

Next, expose the API by adding a scope:

  1. In the left menu, under Manage, select Expose an API.
  2. Select Add a scope, then select Save and continue to accept the default application ID URI.
  3. Enter the following values to create a scope that allows custom policy execution in your Azure AD B2C tenant:
    • Scope name: user_impersonation
    • Admin consent display name: Access IdentityExperienceFramework
    • Admin consent description: Allow the application to access IdentityExperienceFramework on behalf of the signed-in user
  4. Select Add scope

For more information, see Tutorial: Create user flows and custom policies in Azure Active Directory B2C in the Microsoft Azure documentation.

Step 10: Connect Azure to Authentication Cloud‚Äč

  1. Open the Azure portal.
  2. Switch to your Azure AD B2C tenant. Make sure you select the right tenant, as the Azure AD B2C tenant usually resides in a separate tenant.
  3. In the menu, select Identity Experience Framework.
  4. Click on Policy keys.
  5. Click on Add to create a new key.
  6. In Options, select Manual.
  7. Set Name to AuthCloudAccessToken.
  8. Paste the previously stored Nevis Access Key in the Secret field.
  9. For the Key Usage select Encryption.
  10. Click on Create.
Verification

As a result, you see the B2C_1A_AuthCloudAccessToken in the list of Policy keys.

Step 11: Configure and upload to Azure blob storage‚Äč

Enable the branded and Authentication Cloud-specific user interface with the following steps. Make sure you have the templates downloaded in Step 1: Download the templates for the branded user interface and custom policies.

  1. Open the project in your editor.
  2. Navigate to the policy folder.
  3. Open the nevis.html file.
  4. Search for¬†@[email protected],¬†and replace it with the URL of your Nevis Admin console: https://<instance_id>.mauth.nevis.cloud.
  5. Save the changes to the file.
  6. Follow the instructions in Quickstart: Upload, download, and list blobs with the Azure portal to upload the nevis.html file in place of customize-ui.html to your Azure blob storage. The Azure Blob storage account is created outside of the B2C Tenant because it is separate from the Azure Cloud.
  7. Follow the instructions in Enabling CORS for Azure Storage to enable Cross-Origin Resource Sharing for this file.
  8. Once the upload is complete and CORS is enabled, click on the nevis.html file in the list.
  9. In the Overview tab, next to the URL, click the copy link icon.
  10. Open the link in a new browser tab to make sure it displays a grey box.
  11. Note down the blob link for later use.
Verification

The setup of the blob and CORS may be a little tricky. The following screenshots help you with the verification.

Cors Setup
Test the CORS configuration according to the instructions from Microsoft. The settings should look similar to the following screenshot.

Cors Setup
Blob URL
You can find the copy URL link on the following screen.

Blob URL
Test Blob URL
Accessing the Blob URL directly, in our example, `https://nevisui.blob.core.windows.net/nevisqrui/nevis.html`, loads a page with a grey box like in the following screenshot.

Test Blob URL

Step 12: Customize and upload your custom policies‚Äč

TrustFrameworkBase.xml

  1. In your editor, navigate to the policy folder.
  2. Open the TrustFrameworkBase.xml file.
  3. Replace yourtenant with your Azure tenant account name in the TenantId.
  4. Replace yourtenant with your Azure tenant account name in PublicPolicyUri.
  5. Replace all @[email protected] instances with the URL of your Nevis Admin console (https://<instance_id>.mauth.nevis.cloud/).
  6. Save the changes to your file.
note

Syntax

Watch out for the correct syntax and delimiting when you copy the paste URL from Authentication Cloud: One slash between the hostname and the URI section in the URL No trailing slash before the colon of the port number 443

For example:

<InputClaim ClaimTypeReferenceId="url" DefaultValue="https://sandbox-qw234.mauth.nevis.cloud:443/" />
<Item Key="ServiceUrl">https://sandbox-qw234.mauth.nevis.cloud/api/v1/status</Item>

TrustFrameworkExtensions.xml

  1. In your editor, navigate to the policy folder.
  2. Open the TrustFrameworkExtensions.xml file.
  3. Replace yourtenant with your Azure tenant account name in the TenantId.
  4. Replace yourtenant with your Azure tenant account name in PublicPolicyUri.
  5. Under BasePolicy, in the TenantId, also replace yourtenant with your Azure tenant account name.
  6. Under BuildingBlocks, replace @[email protected] with the blob link URL of your nevis.html in your blob storage account.
  7. Save the file.

SignUpOrSignin.xml

  1. In your editor, navigate to the policy folder.
  2. Open the SignUpOrSignin.xml file.
  3. Replace yourtenant with your Azure tenant account name in the TenantId.
  4. Replace yourtenant with your Azure tenant account name in PublicPolicyUri.
  5. Under BasePolicy, in the TenantId, also replace yourtenant with your Azure tenant account name.
  6. Save the file.

Upload your custom policies to Azure:

  1. Open your Azure AD B2C tenant home.
  2. Click Identity Experience Framework.
  3. Click Upload custom policy.
  4. Select the TrustFrameworkBase.xml file you just modified.
  5. Select the Overwrite the custom policy if it already exists checkbox.
  6. Click Upload.
  7. Do the same for TrustFrameworkExtensions.xml.
  8. Do the same for SignUpOrSignin.xml.
Verification

To verify the that the policies are correctly in place in the AD B2C tenant, check the following settings:

Uploaded policy files
After uploading the three custom policy files, they are listed as follows:

Uploaded policy files
`B2C_1A_signup_signin` custom policy details
You can find the copy URL link on the following screen:

B2C_1A_signup_signin custom policy details

Step 13: Test the solution‚Äč

We recommend you test end-to-end that everything works together.

Test account creation and Access App setup‚Äč

  1. Open your Azure AD B2C tenant home.
  2. Click Identity Experience Framework.
  3. Scroll down to Custom policies and click B2C_1A_signup_signin.
  4. Click Run now.
  5. In the popup window, click Sign up now.
  6. Enter your email address.
  7. Click Send verification code.
  8. Use the verification code from the email.
  9. Click Verify.
  10. Fill in the form with your new password, and click on Display name.
  11. Click Create. You are taken to the QR code scan page.
  12. On your mobile phone, open the Access App.
  13. Select the biometric technology that your phone provides.
  14. When the screen says Authenticator registration was successful, click Continue.
  15. On your phone, authenticate with your biometrics again. You are now taken to the jwt.ms landing page that displays your decoded token details.

Test passwordless login‚Äč

  1. Under Identity Experience Framework, click the B2C_1A_signup_signin.
  2. Click Run now.
  3. On the popup window, click Passwordless Authentication.
  4. Enter your email address.
  5. Click Continue.
  6. On your phone, in notifications, click the Access App notification.
  7. Authenticate with your biometrics. You are automatically taken to the jwt.ms landing page that displays your tokens.

Remove your account from the Access App‚Äč

When you complete your testing session, reset your Access App, and remove the user from Authentication Cloud and AD B2C. Thus, you can reuse your account to test again.

Remove your account from the Access App as follows:

  1. Open the Access App.
  2. Tap the settings icon in the top right corner of the screen.
  3. Tap the version number five times. The hidden advanced settings menu is opened.
  4. Scroll to the bottom, and tap RESET ALL DATA AND SETTINGS to remove your user and reset the app to its initial state.

Remove the user from AD B2C‚Äč

To remove the user from the AD B2C, follow the instructions in Delete a consumer user.