教程:从桌面应用使用 Azure Active Directory B2C 授予对 Node.js Web API 的访问权限Tutorial: Grant access to a Node.js web API from a desktop app using Azure Active Directory B2C

本教程展示了如何从 Windows Presentation Foundation (WPF) 桌面应用调用受 Azure Active Directory (Azure AD) B2C 保护的 Node.js Web API 资源。This tutorial shows you how to call an Azure Active Directory (Azure AD) B2C protected Node.js web API resource from a Windows Presentation Foundation (WPF) desktop app.

本教程介绍如何执行下列操作: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
  • 将示例更新为使用该应用程序Update 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 进行身份验证Complete the steps and prerequisites in Tutorial: Enable desktop app authentication with accounts 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.

  1. 登录到 Azure 门户Sign in to the Azure portal.
  2. 请确保使用包含 Azure AD B2C 租户的目录,方法是单击顶部菜单中的“目录和订阅筛选器”,然后选择包含租户的目录。Make sure you're using the directory that contains your Azure AD B2C tenant by clicking the Directory and subscription filter in the top menu and choosing the directory that contains your tenant.
  3. 选择 Azure 门户左上角的“所有服务”,然后搜索并选择“Azure AD B2C”。Choose All services in the top-left corner of the Azure portal, and then search for and select Azure AD B2C.
  4. 选择“应用程序”,然后选择“添加”。Select Applications, and then select Add.
  5. 输入应用程序的名称。Enter a name for the application. 例如,“webapi1”。For example, webapi1.
  6. 对于“包括 Web 应用/Web API”和“允许隐式流”,请选择“是”。For Include web app/ web API and Allow implicit flow, select Yes.
  7. 对于“回复 URL”,请输入 Azure AD B2C 要将应用程序请求的任何令牌返回到的终结点。For Reply URL, enter an endpoint where Azure AD B2C should return any tokens that your application requests. 本教程中的示例在本地运行并在 https://localhost:5000 上进行侦听。In this tutorial, the sample runs locally and listens at https://localhost:5000.
  8. 对于“应用 ID URI”,请输入 Web API 使用的标识符。For App ID URI, enter the identifier used for your web API. 包括域在内的完整标识符 URI 是为你生成的。The full identifier URI including the domain is generated for you. 例如,https://contosotenant.partner.onmschina.cn/apiFor example, https://contosotenant.partner.onmschina.cn/api.
  9. 单击创建Click Create.
  10. 在属性页上,记录在配置 Web 应用程序时要使用的应用程序 ID。On the properties page, record the application ID that you'll use when you configure the web application.

配置范围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. 例如,可以让某些用户拥有读取和写入访问权限,让另一些用户拥有只读权限。For example, some users could have both read and write access, whereas other users might have read-only permissions. 在本教程中,你将定义对 Web API 的读取权限。In this tutorial, you define read permissions for the web API.

  1. 依次选择“应用程序”、“webapi1”。Select Applications, and then select webapi1.
  2. 选择“已发布的范围”。Select Published scopes.
  3. 在“范围”中输入 Hello.Read,在“说明”中输入 Read access to helloFor scope, enter Hello.Read, and for description, enter Read access to hello.
  4. 在“范围”中输入 Hello.Write,在“说明”中输入 Write access to helloFor scope, enter Hello.Write, and for description, enter Write access to hello.
  5. 单击“保存” 。Click Save.

可以使用发布的作用域向客户端应用授予对 Web API 的权限。The published scopes can be used to grant a client app permission to the web 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 中创建名为 app1 的 Web 应用程序。In the prerequisite tutorial, you created a web application in Azure AD B2C named app1. 使用此应用程序调用 Web API。You use this application to call the web API.

  1. 依次选择“应用程序”、“nativeapp1”。Select Applications, and then select nativeapp1.
  2. 依次选择“API 访问”、“添加”。Select API access, and then select Add.
  3. 在“选择 API”下拉列表中,选择“webapi1”。In the Select API dropdown, select webapi1.
  4. 在“选择范围”下拉列表中,选择之前定义的“Hello.Read”和“Hello.Write”范围。In the Select Scopes dropdown, select the Hello.Read and Hello.Write scopes that you previously defined.
  5. 单击 “确定”Click OK.

用户通过 Azure AD B2C 进行身份验证,以使用 WPF 桌面应用程序。A user authenticates with Azure AD B2C to use the WPF desktop application. 桌面应用程序从 Azure AD B2C 获取授权,以访问受保护的 Web API。The desktop 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 code to use your Azure AD B2C tenant. 本教程将配置一个可从 GitHub 下载的示例 Node.js Web 应用程序。In this tutorial, you configure a sample Node.js web application you can download from GitHub.

从 GitHub 下载 zip 文件或克隆示例 Web 应用。Download a zip file or clone the sample web app from GitHub.

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git

该 Node.js Web API 示例使用 Passport.js 库来使得 Azure AD B2C 能够保护对 API 的调用。The Node.js web API sample uses the Passport.js library to enable Azure AD B2C to protect calls to the API.

  1. 打开 index.js 文件。Open the index.js file.

  2. 使用 Azure AD B2C 租户注册信息来配置示例。Configure the sample with the Azure AD B2C tenant registration information. 更改以下代码行:Change the following lines of code:

    var tenantID = "<your-tenant-name>.partner.onmschina.cn";
    var clientID = "<application-ID>";
    var policyName = "B2C_1_signupsignin1";
    

运行示例Run the sample

  1. 启动 Node.js 命令提示符。Launch a Node.js command prompt.
  2. 切换到包含 Node.js 示例的目录。Change to the directory containing the Node.js sample. 例如For example cd c:\active-directory-b2c-javascript-nodejs-webapi
  3. 运行以下命令:Run the following commands:
    npm install && npm update
    
    node index.js
    

运行桌面应用程序Run the desktop application

  1. 在 Visual Studio 中打开 active-directory-b2c-wpf 解决方案。Open the active-directory-b2c-wpf solution in Visual Studio.
  2. F5 来运行桌面应用。Press F5 to run the desktop app.
  3. 使用在桌面应用中使用 Azure Active Directory B2C 对用户进行身份验证教程中使用的电子邮件地址和密码进行登录。Sign in using the email address and password used in Authenticate users with Azure Active Directory B2C in a desktop app tutorial.
  4. 单击“调用 API”按钮。Click the Call API button.

桌面应用程序将向 Web API 发出请求并得到其中包含已登录用户的显示名称的响应。The desktop application makes a request to the web API to and gets a response with the logged-in user's display name. 受保护的桌面应用程序正在调用 Azure AD B2C 租户中的受保护 Web API。You're protected desktop application is calling the protected web API in your Azure AD B2C tenant.

后续步骤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
  • 将示例更新为使用该应用程序Update the sample to use the application