Azure Active Directory B2C- (1) Basic concepts and creation and experience

Understand the concept of Azure Active Directory B2C;

Create Azure Active Directory B2C in Azure portal;

   Add applications and create keys in AAD B2C tenants;

   Add user flow in AAD B2C: registration and login;

   Experience registration and login user flow;

Video explanation:

You can watch the video explanation of this section at Station B: https://www.bilibili.com/video/BV1SC4y1s7iM/

Graphic explanation:

1. Related concepts:

Active Directory:

Active Directory (Active Directory): server and client computer management; user services: management of user domain accounts, user information, corporate address book (integrated with e-mail system), user group management, user identity authentication; network equipment such as printers and other networks Resource management; integration of application systems such as financial software, etc .;

 

 

Azure Active Directory:

Azure AD is a cloud identity and resource access service provided by Microsoft, helping employees / users / administrators to access some external resources and internal resources:

  • External resources, such as Microsoft Office 365, Azure portal, and thousands of other SaaS applications.

  • Internal resources, such as applications on company networks and intranets, as well as any cloud applications developed by your own organization.

In addition, Azure AD also allows you to map users and group information in the local Active Directory (AD) to Azure AD through the directory synchronization mechanism, allowing your customers to log in to your cloud service with their original Active Directory users .

 

 

Azure Active Directory B2C:

Also known as Azure AD B2C, it provides business-to-customer identity management services in the form of services to control how customers register when using iOS, Android, .NET, single page (SPA), and other applications in a custom way , Log in and manage their personal data . Customers use their preferred social, corporate, or local account ID for single sign-on access to applications and APIs.

 

AAD B2C function:

Single sign-on access using user-supplied ID

Azure AD B2C acts as a central authentication mechanism for web applications, mobile applications, and APIs, enabling you to build a single sign-on (SSO) solution for all these applications. Supports OpenID Connect, OAuth 2.0 and SAML.

img-cd485991-8167-4f7d-8827-d450d7da3c2a.png

 

Integration with external systems

Azure AD B2C provides a directory where 100 custom attributes for each user can be saved.  In addition, it can also be integrated with external systems. 

 

Support custom UI

For common functions such as user registration, login and modification of user information, AAD B2C provides the function of user flow. To put it bluntly, it provides the UI of these modules and can customize the style. 

 

2. Actually create AAD B2C tenants and experience:

Create an AAD B2C tenant:

img-17ecbd5b-2ac2-4642-aedc-13f25c239c55.png

Option to create new AAD B2C tenant

img-64e89c7c-5524-4eb7-8533-824f5ac27551.png

 

AAD B2C is a global service and there is no regional choice for North / East China.

img-4a8dca38-68b5-4834-a059-1fe83bea41c7.png

 

Link the created tenant to the subscription (for billing)

img-0399dd3f-25e2-4858-a923-d441f655f922.png

 

At this point, the AAD B2C tenant is created.

img-17322c3e-3062-4f2a-b1c2-e6903a463820.png

Add application and create key in AAD B2C tenant

img-ac33d3e0-6f4f-401b-bd04-f69cbd0a98ee.png

 

img-de7b8b28-74d8-4a74-8891-c7ddffb4def5.png

In this example, we assume WEB APP / WEB API program;

The reply URL is the user information completed through AAD B2C authentication and will be sent to this link address. Usually this address needs to be constructed by us, so that we can accept the user information returned to us by AAD B2C.

In this example, we used https://jwt.ms, which is a help page available at the development stage and provided by Microsoft. This page only displays the authentication results of AAD B2C users in the browser:

img-c467831e-df06-442b-aa27-e74bf6c5f558.png

 

Next, create a key for the application. Each application can currently create two keys. The key is displayed only once. After the page is refreshed, the * will be displayed, so please save the key information.

This key will be used in subsequent steps, such as when applying for access to the token.

img-7c63f211-4e42-4b60-8a15-71ff4ca67208.png

Add user flow in AAD B2C: registration and login

To put it simply, the user flow provides a web page for basic processes such as user registration / login / reset password / modify user information. This page has a variety of ready-made styles to choose from, and you can also customize the style. It also supports 38 languages After these configurations, you can make these pages look consistent with the web / app we designed.

In this example, we select the "register and log in" user flow.

img-1ba954be-3561-4adc-b910-0829fffbb03e.png

By default, email is selected as the logo provider. We will introduce how to log in via Weibo / WeChat / LinkedIn or other services.

Select the required fields:

img-07414fc9-61b4-4742-9508-ca9eb8e0a449.png

 

After clicking Confirm, you can create a user stream.

Experience registration and login user flow:

Click the created user stream to enter the user stream detail page, you can set the UI layout and multi-language settings, in this example we keep the default:

Click to run user flow, you can test the user flow, the test and the end user see the same effect.

img-0c1309f5-6a0d-4563-a44a-f52f459c6aea.png

 

img-cc5caffa-f242-4d6d-aff2-0c729d095115.png

 

The test user flow will open a new page for us, which requires us to log in with an email address and password, because we have not registered a user, the login fails:

img-40b3d544-06b6-42bd-870f-13d81e76e24b.png

 

Click Sign Up Now to jump to the registration page. Note that this page is also a pre-made page of AAD B2C. We can customize the UI to modify its layout:

img-6074bc31-e5e9-4b4f-97aa-62e9aca869b6.png

 

First, the ownership of the mailbox will be verified by the verification code, then fill in the page according to the fields we set, and click the create button:

img-91565504-9bb7-4a09-90a1-f4fa738e0696.png

 

After the creation is successful, it will automatically jump to the reply URL we set:

img-94d9f362-55ea-4c48-a5bf-5dc0c5d600e3.png

 

A new user will be added to the user page of AAD B2C after the execution of this user flow is completed:

img-fce8dc55-6d22-484e-941f-ecfa1ed24358.png

 

After the registered user stream is created, please try to reset the user stream by yourself.

 

This article is over!


Guess you like

Origin blog.51cto.com/10117438/2486632