AAD B2C- (2) Experience oAuth to protect WEB APP

This article refers to the following Microsoft official documents, and all use ASP.NET as sample code, mainly to demonstrate the protection process of AAD B2C on WEB APP, to give you an intuitive feeling, in the subsequent content chapters, we will introduce how other languages ​​are adopted AAD B2C for protection.

1. Use Azure Active Directory B2C to enable authentication in the web application

https://docs.azure.cn/zh-cn/active-directory-b2c/tutorial-web-app-dotnet?tabs=applications

 

The first case:

It mainly introduces a WEB APP website, developed using ASP.NET. The website uses AAD B2C for authentication and authorization. Users can directly call the AAD B2C user stream (that is, use the UI provided by AAD B2C) in the browser to complete user registration / login. / The basic function of changing the password, and at the same time, after the user logs in, the TOKEN information is returned to the WEB APP page.

Video introduction:

You can watch the video at Station B: https://www.bilibili.com/video/BV1Cc411h7fM/

 

Graphic introduction:

The detailed steps are as follows:

1. Download the sample code;

2. Create an AAD B2C tenant;

3. Create applications and keys;

4. Set user flow;

5. Modify the configuration file of the web app;

6. Run the web app to experience user flow;

 

Sample code: https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi

In this example, just use TaskWebAPP:

img-9cae3390-246d-4ce8-997f-6c5e51f7e1c9.png

 

Create the following three user flows in the user flow:

Note that the name of the user flow can be inconsistent with this article, but it needs to be matched in subsequent configuration files.

The detailed creation process of user stream can be found in the video of this article.

img-a6f97ccc-d363-4bb5-8b39-246eae4ae11f.png

Create a new application in the application:

The reply URL must be: https: // localhost: 44316.  Note that this value must be used in this example , because this is the path after the WEB website is up and running.

img-ee1db3e7-30a3-46f9-a7d5-3e9847d36eb4.png

Modify the parameters in the configuration file:

The video of this article describes in detail where each field can be found on Azure Portal. For details, see the detailed introduction in the video at around 08:35 seconds.

img-fa4f699a-9538-4def-9443-90a5e99d7456.png

 

To start the application, you can click Sign in / Sign up to call the user flow UI of AAD B2C to complete user registration and log in:

img-59357781-47a3-4480-8a64-55248fdf188c.png

The following picture is the page to modify the user's basic information. This page can be customized in style and provided by AAD B2C:

img-c597fa80-5dea-4aa5-9ffa-01e55e4e4779.png

After successful login, you can see the statement information on the Claims page:

img-2cfdd912-4598-4d10-a3e2-602424bd666c.png

 

 

At this point, the content of this section is over!


Guess you like

Origin blog.51cto.com/10117438/2486633