AAD B2C- (3) Experience AAD B2C Protect WEB API

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

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

2. Use Azure Active Directory B2C to grant access to ASP.NET Web API

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

The case of the last lecture:

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.

 

The first case in this lecture:

It mainly introduces a new WEB API website, which is also developed using ASP.NET. The API of this website is protected by AAD B2C, and the WEB API and the WEB APP in the first case use the same AAD B2C tenant, that is to say After logging in, users in the first case (WEB APP) can directly use the Token after logging in to call the API of the second case (WEB API) to obtain data.

The second case in this lecture:

After experiencing the second case, we use Postman simulation with TOKEN to initiate a request to the WEB API to obtain data.

Video explanation:

You can watch this video at Station B: https://www.bilibili.com/video/BV17t4y1U7Um/

 

 

Graphic explanation:

 

The content of this section uses the code downloaded in the previous section, and continue to configure:

Create an application for the WEB API:

Note that the reply URL remains the same as the picture below;

The application ID URI can fill in a value by itself. Generally, this value identifies a set of API permissions.

img-4319640d-6647-4f1b-a14b-c015fb07c8ef.png

 

In the WEB API to add the following two items published scope:

Under normal circumstances, we can use the increased scope to precisely control the access permissions of an API;

If there are multiple API permissions, multiple scopes can be configured here;

In this example, in order to cooperate with the sample code, we will set the read and write permissions. In the code, read means that the data can be obtained from the API, and the write flag can write data to the storage through the API.

img-3e3c2120-e45b-4d7a-afcd-48f260650b0e.png

Next, in the WEB APP application, authorize the scope of the WEB API, that is, the WEB APP can access the WEB API authority authorization:

img-1743a90f-ed99-458d-9251-7b2bd8bb23a6.png

 

Select backendapi and select all 3 scopes in the drop-down list:

img-e8968c27-b5f4-478d-a523-910c4e5ccbe9.png

 

Modify the WEB API configuration file:

In the video of this article, it introduces in detail where the configuration values ​​in the configuration file can be found at 06:56 seconds.

img-8314c265-a38b-4b9f-a2a9-d5f56e7c136a.png

 

Modify the configuration file of WEB APP:

This video details how to configure these values ​​at 08:47 seconds;

img-71e1cc11-09ca-49f8-b5ad-fd7417c0ee6f.png

 

Start the WEB API (Task Service) project:

img-b02a10c7-ce3b-4dbe-ba00-b85d3d3e71fa.png

 

After successful login, you can call the API in WEB API (TASK SERVICE) in TODO LIST and get the data:

img-785315e6-aba9-49d6-be4f-b54fa9ff80c5.png

 

You can see the content of TODO LIST as shown below:

img-2ab78fa1-1fc9-4ba9-b3c2-e9b0b2262150.png

 

We can observe the URL of the requested WEB API in the code:

img-7639fc87-d786-4ec3-a7eb-57227a5a0735.png

 

Requesting the API in the previous step in Postman will result in authentication failure. We need to bring the token after the user logs in from the WEB APP to the request to access successfully:

 

img-9d63e8a5-b04e-41b8-a637-50c2125fb97b.png

 

Debug the code, copy and paste the Token value into Postman:

img-551a5653-17d0-4ecf-9bc7-a61bd7d0251c.png

As you can see, the data was successfully fetched:

img-277a62dd-62ea-4021-9926-a5eb76199c9a.png

 

As of now, in the first three sections of AAD B2C, the user token is implemented through the UI. In subsequent chapters, we will share how to directly obtain the user Access Token through other methods and then call the WEB API.

 

This section is over!

 


Guess you like

Origin blog.51cto.com/10117438/2486635