This is a sample to show how you can create a B2C Custom Policy to signin with Authenticator Apps to B2C. It is related to the custom-mfa-totp sample, which shows how to use the Authenticator app as MFA. It uses the same technique for enrolling a B2C account with Authenticator and shares the backend REST API. The difference is that it allows you to sign in to B2C using the Authenticator.
This repository contains
- policy - the B2C Custom Policy files
- policy/html - html UX customization files
This sample makes use of a backend REST API that is located in the custom-mfa-totp sample.
There are three overall steps to deploy this sample
- Build and deploy the source code to an Azure AppService
- Edit and upload the B2C Custom Policy files to your B2C tenant
- Edit the html files and upload them to a storage account with public access and CORS configured
There is a Deploy-To-Azure button on the related sample custom-mfa-totp that will help you deploy it. If you rather download the code, you can compile it with Visual Studio 2019 and publish it to Azure App Services.
You need to edit the following
- yourtenant.onmicrosoft -> yourtenantname.onmicrosoft.com (all xml files)
- yourstorageaccount -> The name of your storage account in TrustFrameworkExtensions.xml
- Edit in TrustFrameworkExtensions.xml and add your AppId's for IdentityExperienceFramework/ProxyIdentityExperienceFramework
- Edit in TrustFrameworkExtensions.xml to add your AppId and ObjectId for b2c-extensions app
- Search-n-replace the two instances of https://yourwebsite.azurewebsites.net to reference your deployment in Azure App Services
- search-n-replace yourtenant with your-tenant-name
- search-n-replace yourstorageaccount with your-storage-account-name (only in selfasserted.authenticator.registration.html)
Your storage account must be configured for CORS to allow B2C to access the pages.
First, if you haven't got an account in the B2C tenant, use the Sign up now link to create an account using email/password.
Then, next time you want to sign in, use click on the Enroll link under the Signin with Authenticator button to enroll your B2C account for using Authenticator.
You will then be asked to sign in.
If you're B2C account isn't setup for using the Authenticator, you will be presented with this page to that instructs you to first install the app on your smartphone, then scan the QR code with your Authenticator app and finally read the code in the Authenticator app and enter it in the page.
Next time you want to signin and click on the Signin with Authenticator button, you will have to pick your account via entering your email.
To complete the signin, open your Authenticator app on your smartphone, read the OTP code and enter it in the page.
If you want to test enrolling a B2C account with the Authenticator multiple times, the ProfileEdit user journey has been designed with a checkbox that if you check it, it will remove the attributes that associate the B2C account with the Authenticator. Please remember to remove the account from your Authenticator app too.
See a live version here.
The live version of ProfileEdit is here.
If you have tested the live version and want to delete your account in the live test tenant, click here.
Use Stack Overflow to get support from the community. Ask your questions on Stack Overflow first and browse existing issues to see if someone has asked your question before. Make sure that your questions or comments are tagged with [azure-ad-b2c]. If you find a bug in the sample, please raise the issue on GitHub Issues. To provide product feedback, visit the Azure Active Directory B2C Feedback page.