Get best of the week

The Tale of How I Configured Azure AD B2C on React and React Native Part 1 (Tutorial)

image

Foreword


We are developing cross-platform software, and we faced the task of “Making a common authorization system”.

It was necessary to make a common user database for the three applications, but at the same time, each application had its own distinctive feature. We also have common microservices and we would like the token to be generated and verified from one source. Because We use Azure services. The choice fell on Azure AD B2C. As you set up all this stuff, a bunch of pitfalls were revealed. I will divide the whole story into several parts:


Build and configure applications on Azure AD B2C


To create Azure B2C:

1. on the Azure portal, enter “Azure B2C” in the search bar

image

2. take all the steps from this tutorial

Next, the user has two options:

  1. Use basic user threads
  2. Create custom user stream.

Even if you want to use a custom user stream, you still need to create an application on the base user stream


From my experience - in the basic streams you can make most of the necessary functionality, namely:

  1. Custom page for authorization.
  2. Choose what data to collect about the user
  3. What data to send in the token.

BUT

  1. You can not send a custom letter to confirm mail
  2. You cannot create a field with your own values

Basic user threads


To create a basic user stream:

1. go to the application registration section (preview)

2. Click New Registration
There we will see the following picture:

image

3. Select a checkmark
Accounts in any organization directory or identity provider. Select this option for authentication in Azure AD B2C.

Steps to customize the base stream (only necessary if you do not want to do custom)
« » « ». :

image

, Azure \ .. :

image

:


Custom user streams


To create custom user flows, you need to go to the created directory and create two applications:

  1. IdentityExperienceFramework
  2. ProxyIdentityExperienceFramework

image

About how to create them here .

I did everything as indicated in the instructions "Registration of applications (preliminary version)."

And here the first pitfall already arises, which drove me into a stupor.

One of the steps in the instructions says:
In the “Advanced Settings” section, enable “treat the application as a public client (select Yes)”.

And the following button should appear in the ProxyIdentityExperienceFramework application :

image

But it will not appear (without it, by the way, nothing will work). In order for it to appear, you need to perform two steps from the instructions for IdentityExperienceFramework in ProxyIdentityExperienceFramework , namely
1. In the Management section, select API Provisioning.

2. Select Add scope , and then select save and continue to accept the default application identifier URI.

Next, you need to download the repository .

Open the Identity Experience Framework tab and download files from one of the folders in the root (except scenarios) in the following order:
a.TrustFrameworkBase.xml
b.TrustFrameworkExtensions.xml
c.SignUpOrSignin. XML
d.ProfileEdit. XML
e.PasswordReset. XML

Conclusion


As a result of the work done, you will receive a prepared service for convenient work with your users.

Thank you for the attention!

More articles:


All Articles