教程:使用 Azure Active Directory B2C 授予对 ASP.NET Web API 的访问权限Tutorial: Grant access to an ASP.NET web API using Azure Active Directory B2C

本教程介绍如何从 ASP.NET Web 应用程序调用 Azure Active Directory B2C (Azure AD B2C) 中受保护的 Web API 资源。This tutorial shows you how to call a protected web API resource in Azure Active Directory B2C (Azure AD B2C) from an ASP.NET web application.

本教程介绍如何执行下列操作:In this tutorial, you learn how to:

  • 添加 Web API 应用程序Add a web API application
  • 配置 Web API 的范围Configure scopes for a web API
  • 授予 Web API 权限Grant permissions to the web API
  • 将示例配置为使用此应用程序Configure the sample to use the application

如果没有 Azure 订阅,可在开始前创建一个试用帐户If you don't have an Azure subscription, create a trial account before you begin.

先决条件Prerequisites

完成教程:使用 Azure Active Directory B2C 在 Web 应用程序中启用身份验证中的步骤和先决条件。Complete the steps and prerequisites in Tutorial: Enable authenticate in a web application using Azure Active Directory B2C.

添加 Web API 应用程序Add a web API application

Web API 资源需要先在租户中注册,然后才能接受并响应通过提供访问令牌的客户端应用程序所提出的受保护资源请求。Web API resources need to be registered in your tenant before they can accept and respond to protected resource requests by client applications that present an access token.

要在 Azure AD B2C 租户中注册应用程序,可以使用新的统一“应用注册”体验或旧版“应用程序(旧版)”体验 。To register an application in your Azure AD B2C tenant, you can use our new unified App registrations experience or our legacy Applications (Legacy) experience. 详细了解此新体验Learn more about the new experience.

  1. 登录到 Azure 门户Sign in to the Azure portal.
  2. 在顶部菜单中选择“目录 + 订阅”筛选器,然后选择包含Azure AD B2C 租户的目录。Select the Directory + subscription filter in the top menu, and then select the directory that contains your Azure AD B2C tenant.
  3. 在左侧菜单中,选择“Azure AD B2C”。In the left menu, select Azure AD B2C. 或者,选择“所有服务”并搜索并选择“Azure AD B2C”。Or, select All services and search for and select Azure AD B2C.
  4. 选择“应用注册”,然后选择“新建注册” 。Select App registrations, and then select New registration.
  5. 输入应用程序的“名称”。Enter a Name for the application. 例如,“webapi1”。For example, webapi1.
  6. 在“重定向 URI”下选择“Web”,然后输入 Azure AD B2C 会将应用程序请求的任何令牌返回到其中的终结点。Under Redirect URI, select Web, and then enter an endpoint where Azure AD B2C should return any tokens that your application requests. 本教程中的示例在本地运行并在 https://localhost:44332 上进行侦听。In this tutorial, the sample runs locally and listens at https://localhost:44332.
  7. 选择“注册”。Select Register.
  8. 记录“应用程序(客户端) ID”,以便在后续步骤中使用。Record the Application (client) ID for use in a later step.

配置范围Configure scopes

可通过范围控制对受保护资源的访问。Scopes provide a way to govern access to protected resources. Web API 使用作用域实施基于作用域的访问控制。Scopes are used by the web API to implement scope-based access control. 例如,可以让 Web API 用户拥有读取和写入访问权限,或者只拥有读取访问权限。For example, users of the web API could have both read and write access, or users of the web API might have only read access. 在本教程中,请使用作用域为 Web API 定义读取和写入权限。In this tutorial, you use scopes to define read and write permissions for the web API.

  1. 选择 “应用注册”Select App registrations.
  2. 选择“webapi1”应用程序以打开其“概览”页。Select the webapi1 application to open its Overview page.
  3. 在“管理”下,选择“公开 API” 。Under Manage, select Expose an API.
  4. 选择“应用程序 ID URI”旁边的“设置”链接。 Next to Application ID URI, select the Set link.
  5. 将默认值(一个 GUID)替换为 api,然后选择“保存”。Replace the default value (a GUID) with api, and then select Save. 完整的 URI 已显示,应采用 https://your-tenant-name.partner.onmschina.cn/api 格式。The full URI is shown, and should be in the format https://your-tenant-name.partner.onmschina.cn/api. Web 应用程序在请求 API 的访问令牌时,应将此 URI 添加为你为 API 定义的每个范围的前缀。When your web application requests an access token for the API, it should add this URI as the prefix for each scope that you define for the API.
  6. 在“此 API 定义的范围”下选择“添加范围”。 Under Scopes defined by this API, select Add a scope.
  7. 输入以下值来创建一个定义对 API 的读取访问权限的范围,然后选择“添加范围”:Enter the following values to create a scope that defines read access to the API, then select Add scope:
    1. 范围名称demo.readScope name: demo.read
    2. 管理员许可显示名称Read access to demo APIAdmin consent display name: Read access to demo API
    3. 管理员许可说明Allows read access to the demo APIAdmin consent description: Allows read access to the demo API
  8. 选择“添加范围”,输入以下值来添加一个定义对 API 的写入访问权限的范围,然后选择“添加范围”: Select Add a scope, enter the following values to add a scope that defines write access to the API, and then select Add scope:
    1. 范围名称demo.writeScope name: demo.write
    2. 管理员许可显示名称Write access to demo APIAdmin consent display name: Write access to demo API
    3. 管理员许可说明Allows write access to the demo APIAdmin consent description: Allows write access to the demo API

授予权限Grant permissions

若要从应用程序调用受保护的 Web API,需授予应用程序访问该 API 的权限。To call a protected web API from an application, you need to grant your application permissions to the API. 在先决条件教程中,已在 Azure AD B2C 中创建名为 webapp1 的 Web 应用程序。In the prerequisite tutorial, you created a web application in Azure AD B2C named webapp1. 使用此应用程序调用 Web API。You use this application to call the web API.

  1. 选择“应用注册”,然后选择应该有权访问 API 的 Web 应用程序。Select App registrations, and then select the web application that should have access to the API. 例如,“webapp1”。For example, webapp1.
  2. 在“管理”下选择“API 权限”。Under Manage, select API permissions.
  3. 在“已配置权限”下,选择“添加权限”。Under Configured permissions, select Add a permission.
  4. 选择“我的 API”选项卡。Select the My APIs tab.
  5. 选择应授予 Web 应用程序对其的访问权限的 API。Select the API to which the web application should be granted access. 例如,“webapi1”。For example, webapi1.
  6. 在“权限”下展开“演示”,然后选择前面定义的范围。 Under Permission, expand demo, and then select the scopes that you defined earlier. 例如,demo.readdemo.writeFor example, demo.read and demo.write.
  7. 选择“添加权限”。Select Add permissions.
  8. 选择“向(租户名称)授予管理员许可”。Select Grant admin consent for (your tenant name).
  9. 如果系统提示你选择一个帐户,请选择当前登录的管理员帐户,或者使用至少分配了“云应用程序管理员”角色的 Azure AD B2C 租户中的帐户登录。If you're prompted to select an account, select your currently signed-in administrator account, or sign in with an account in your Azure AD B2C tenant that's been assigned at least the Cloud application administrator role.
  10. 请选择“是”。Select Yes.
  11. 选择“刷新”,然后确认两个范围的“状态”下是否均显示“已授予...”。 Select Refresh, and then verify that "Granted for ..." appears under Status for both scopes.

注册应用程序以调用受保护的 Web API。Your application is registered to call the protected web API. 用户通过 Azure AD B2C 进行身份验证,以便使用该应用程序。A user authenticates with Azure AD B2C to use the application. 应用程序从 Azure AD B2C 获取授权,以访问受保护的 Web API。The application obtains an authorization grant from Azure AD B2C to access the protected web API.

配置示例Configure the sample

注册 Web API 并定义范围之后,请将 Web API 配置为使用你的 Azure AD B2C 租户。Now that the web API is registered and you have scopes defined, you configure the web API to use your Azure AD B2C tenant. 在本教程中,可以配置一个示例 Web API。In this tutorial, you configure a sample web API. 在先决条件教程中下载的项目中包含了示例 Web API。The sample web API is included in the project you downloaded in the prerequisite tutorial.

示例解决方案中有两个项目:There are two projects in the sample solution:

  • TaskWebApp - 创建和编辑任务列表。TaskWebApp - Create and edit a task list. 该示例使用注册或登录用户流来注册或登录用户。The sample uses the sign-up or sign-in user flow to sign up or sign in users.
  • TaskService - 支持创建、读取、更新和删除任务列表功能。TaskService - Supports the create, read, update, and delete task list functionality. 该 API 受 Azure AD B2C 的保护,由 TaskWebApp 调用。The API is protected by Azure AD B2C and called by TaskWebApp.

配置 Web 应用程序Configure the web application

  1. 在 Visual Studio 中打开 B2C-WebAPI-DotNet 解决方案。Open the B2C-WebAPI-DotNet solution in Visual Studio.

  2. TaskWebApp 项目中,打开 Web.configIn the TaskWebApp project, open Web.config.

  3. 若要在本地运行 API,请使用针对 api:TaskServiceUrl 的 localhost 设置。To run the API locally, use the localhost setting for api:TaskServiceUrl. 更改 Web.config,如下所示:Change the Web.config as follows:

    <add key="api:TaskServiceUrl" value="https://localhost:44332/"/>
    
  4. 配置 API 的 URI。Configure the URI of the API. 这是 Web 应用程序用来发起 API 请求的 URI。This is the URI the web application uses to make the API request. 另请配置所请求的权限。Also, configure the requested permissions.

    <add key="api:ApiIdentifier" value="https://<Your tenant name>.partner.onmschina.cn/api/" />
    <add key="api:ReadScope" value="demo.read" />
    <add key="api:WriteScope" value="demo.write" />
    

配置 Web APIConfigure the web API

  1. TaskService 项目中,打开 Web.configIn the TaskService project, open Web.config.

  2. 配置要使用租户的 API。Configure the API to use your tenant.

    <add key="ida:AadInstance" value="https://<Your tenant name>.b2clogin.cn/{0}/{1}/v2.0/.well-known/openid-configuration" />
    <add key="ida:Tenant" value="<Your tenant name>.partner.onmschina.cn" />
    
  3. 将客户端 ID 设置为你注册的 Web API 应用程序的应用程序 ID webapi1。Set the client ID to the Application ID of your registered web API application, webapi1.

    <add key="ida:ClientId" value="<application-ID>"/>
    
  4. 使用注册和登录用户流的名称 B2C_1_signupsignin1 更新用户流设置。Update the user flow setting with the name of your sign-up and sign-in user flow, B2C_1_signupsignin1.

    <add key="ida:SignUpSignInPolicyId" value="B2C_1_signupsignin1" />
    
  5. 配置作用域设置,使之与门户中创建的设置相匹配。Configure the scopes setting to match those you created in the portal.

    <add key="api:ReadScope" value="demo.read" />
    <add key="api:WriteScope" value="demo.write" />
    

运行示例Run the sample

TaskWebAppTaskService 项目都需要运行。You need to run both the TaskWebApp and TaskService projects.

  1. 在解决方案资源管理器中,右键单击解决方案并选择“设置启动项目...”。In Solution Explorer, right-click on the solution and select Set StartUp Projects....

  2. 选择“多启动项目”。Select Multiple startup projects.

  3. 将两个项目的“操作”更改为“启动”。 Change the Action for both projects to Start.

  4. 单击“确定”以保存配置。Click OK to save the configuration.

  5. F5 运行这两个应用程序。Press F5 to run both applications. 每个应用程序都会在其自己的浏览器窗口中打开。Each application opens in its own browser window.

    • https://localhost:44316/ 为 Web 应用程序。https://localhost:44316/ is the web application.
    • https://localhost:44332/ 为 Web API。https://localhost:44332/ is the web API.
  6. 在 Web 应用程序中,选择“注册/登录”以登录到 Web 应用程序。In the web application, select sign-up / sign-in to sign in to the web application. 使用前面创建的帐户。Use the account that you previously created.

  7. 登录后,选择“待办事项列表”并创建待办事项列表项。After you sign in, select To-do list and create a to-do list item.

创建待办事项列表项时,Web 应用程序会向 Web API 发起生成待办事项列表项的请求。When you create a to-do list item, the web application makes a request to the web API to generate the to-do list item. 受保护的 Web 应用程序将调用受 Azure AD B2C 保护的 Web API。Your protected web application is calling the web API protected by Azure AD B2C.

后续步骤Next steps

在本教程中,你已学习了如何执行以下操作:In this tutorial, you learned how to:

  • 添加 Web API 应用程序Add a web API application
  • 配置 Web API 的范围Configure scopes for a web API
  • 授予 Web API 权限Grant permissions to the web API
  • 将示例配置为使用此应用程序Configure the sample to use the application