AAD B2C-(3) 体验AAD B2C 保护WEB API

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

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

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

2.使用 Azure Active Directory B2C 授予对 ASP.NET Web API 的访问权限

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

上一讲的案例:

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

 

本讲第一个案例:

主要介绍了新增了一个WEB API网站,同样使用ASP.NET开发,该网站的API受AAD B2C保护,且WEB API和 第一个案例中的WEB APP 使用了同一个AAD B2C租户,也就是说第一个案例(WEB APP)用户登录后,可以直接使用登录后的Token调用第二个案例(WEB API)的API获取数据。

本讲第二个案例:

在体验完第二个案例后,我们使用Postman 模拟携带TOKEN向WEB API发起请求以获取数据。

视频讲解:

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

 

 

图文讲解:

 

本节内容使用上一节下载好的代码,并继续配置:

为WEB API创建应用程序:

注意回复URL保持与下图一致;

应用ID URI 可自行填写一个值,通常情况下,该值标识一组API权限。

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

 

WEB API的已发布的作用域中增加如下两项:

通常情况下,我们可以将增加的作用域,用来精准控制某个API的访问权限;

如果有多个API的权限要求,则这里可以配置多个作用域;

本例中,为了配合示例代码,我们将设置read和write两个权限,后续在代码中,read 表示可以从API获取数据,write 标识可以通过API写入数据到存储中。

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

接下来在WEB APP的应用中,对WEB API的作用域进行授权,即WEB APP 可以访问WEB API的权限授权:

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

 

选中backendapi,在下拉列表中选择 全部3个作用域:

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

 

修改WEB API的配置文件:

其中本文视频中,在06:56秒处详细介绍了配置文件中的配置值在何处可以找到。

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

 

修改WEB APP的配置文件:

本文视频在08:47秒处详细介绍了这些值该如何配置;

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

 

启动WEB API( Task Service )项目:

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

 

登录成功后,可以在TODO LIST中 调用WEB API( TASK SERVICE) 中的API并取得数据:

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

 

如下图可以看到 TODO LIST的内容:

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

 

我们可以在代码中观察到 请求的WEB API的 URL:

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

 

在Postman中请求上一步中的API,会出现认证失败的情况,我们需要将用户从WEB APP登录后的Token带到请求中才能访问成功:

 

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

 

调试代码,将Token值复制出来并粘贴到Postman中:

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

可以看到,成功取出了数据:

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

 

截至目前,AAD B2C前三节内容的分享,用户TOKEN 都是通过UI实现的,后续的章节中,我们会分享如何通过其他方式直接获取用户Access Token然后调用WEB API。

 

本节内容结束!

 


猜你喜欢

转载自blog.51cto.com/10117438/2486635
aad