AAD B2C-(2) 体验oAuth 保护WEB APP

本文参照微软如下官方文档,且均使用ASP.NET作为示例代码,主要是演示AAD B2C对WEB APP的保护流程,给大家一个直观的感受,在后续的内容章节中,我们会介绍其他语言如何通过AAD B2C 进行保护。

1.使用 Azure Active Directory B2C 在 Web 应用程序中启用身份验证

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

 

第一个案例:

主要介绍了一个WEB APP网站,使用ASP.NET开发,该网站使用AAD B2C进行认证授权,用户在浏览器可以直接调用AAD B2C的用户流(也就是使用AAD B2C提供的UI)完成用户注册/登录/修改密码的基本功能,同时,用户登录后,将TOKEN信息返回到这个WEB APP的页面中。

视频介绍:

您可以在B站观看视频:https://www.bilibili.com/video/BV1Cc411h7fM/

 

图文介绍:

详细步骤如下:

1. 下载示例代码;

2. 创建AAD B2C 租户;

3. 创建应用程序和密钥;

4.设置用户流;

5.修改web app 的配置文件;

6. 运行web app ,体验用户流;

 

示例代码:https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi

在本例中,只使用 TaskWebAPP即可:

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

 

在用户流中创建如下三个用户流:

注意,用户流的名称可以与本文不一致,但要求后续的配置文件中,需要匹配。

用户流的详细创建过程可参见本文视频。

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

在应用程序中创建一个新的应用程序:

其中 回复URL必须为:https://localhost:44316, 注意,本例中必须为这个值,因为WEB网站运行起来后,就是这个路径。

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

修改 配置文件中的参数:

本文视频中详细介绍了每个字段可以从Azure Portal上的哪些位置找到, 具体可见视频08:35秒左右的详细介绍。

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

 

启动应用程序,可以点击Sign in/Sign up 调用AAD B2C的用户流UI 完成用户注册,登录:

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

如下图是修改用户的基本资料的页面,该页面可定制样式,且由AAD B2C提供:

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

登录成功后,可以在Claims页面看到声明信息:

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

 

 

至此,本节内容结束!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章