通过适用于 JavaScript 的 Microsoft 身份验证库来使用 Azure Active Directory B2CUse Microsoft Authentication Library for JavaScript to work with Azure Active Directory B2C

借助适用于 JavaScript 的 Microsoft 身份验证库 (MSAL.js),JavaScript 应用程序开发人员可以使用 Azure Active Directory B2C (Azure AD B2C) 通过社交和本地标识对用户进行身份验证。Microsoft Authentication Library for JavaScript (MSAL.js) enables JavaScript developers to authenticate users with social and local identities using Azure Active Directory B2C (Azure AD B2C). 使用作为标识管理服务的 Azure AD B2C,可以自定义和控制客户的注册和登录方式,并在他们使用你的应用程序时管理其配置文件。By using Azure AD B2C as an identity management service, you can customize and control how customers sign up, sign in, and manage their profiles when they use your applications.

使用 Azure AD B2C,还可以设置应用程序在身份验证过程中显示的品牌并自定义其 UI,以便为客户提供无缝体验。Azure AD B2C also enables you to brand and customize the UI of your applications during the authentication process in order to provide a seamless experience to your customers.

本文演示如何通过 MSAL.js 来使用 Azure AD B2C,并汇总了应该注意的要点。This article demonstrates how to use MSAL.js to work with Azure AD B2C and summarizes key points that you should be aware of. 有关完整的讨论和教程,请查阅 Azure AD B2C 文档For a complete discussion and tutorial, please consult Azure AD B2C Documentation.

先决条件Prerequisites

如果你尚未创建自己的 Azure AD B2C 租户,现在请开始创建一个(也可以使用现有的 Azure AD B2C 租户,如果有的话)。If you haven't already created your own Azure AD B2C tenant, start with creating one now (you also can use an existing Azure AD B2C tenant if you have one already).

本演示文章包含两个部分:This demonstration contains two parts:

  • 如何保护 Web API。how to protect a web API.
  • 如何注册一个单页应用程序以验证并调用该 Web API 。how to register a single-page application to authenticate and call that web API.

Node.js Web APINode.js web API

Note

适用于 Node 的 MSAL.js 目前仍在开发中(请参阅路线图)。At this moment, MSAL.js for Node is still in development (see the roadmap). 在此期间,我们建议使用 passport-azure-ad,它是由 Microsoft 开发并提供支持的适用于 Node.js 的身份验证库。In the meantime, we suggest using passport-azure-ad, an authentication library for Node.js developed and supported by Microsoft.

以下步骤演示 Web API 如何使用 Azure AD B2C 来保护自身,并将所选范围公开给客户端应用程序 。The following steps demonstrate how a web API can use Azure AD B2C to protect itself and expose selected scopes to a client application.

步骤 1:注册应用程序Step 1: Register your application

若要使用 Azure AD B2C 保护 Web API,首先需要注册该 Web API。To protect your web API with Azure AD B2C, you first need to register it. 请遵循注册应用程序来执行详细步骤。See Register your application for detailed steps.

步骤 2:下载示例应用程序Step 2: Download the sample application

下载示例作为 zip 文件,或从 GitHub 克隆:Download the sample as a zip file, or clone it from GitHub:

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

步骤 3:配置身份验证Step 3: Configure authentication

  1. 在示例中打开 config.js 文件。Open the config.js file in the sample.

  2. 注册应用程序时,请使用前面获取的应用程序凭据配置示例。Configure the sample with the application credentials that you obtained earlier while registering your application. 更改以下代码行:将值替换为你的 clientID、主机、tenantId 和策略的名称。Change the following lines of code by replacing the values with the names of your clientID, host, tenantId and policy name.

const clientID = "<Application ID for your Node.js web API - found on Properties page in Azure portal e.g. 93733604-cc77-4a3c-a604-87084dd55348>";
const b2cDomainHost = "<Domain of your B2C host eg. fabrikamb2c.b2clogin.com>";
const tenantId = "<your-tenant-ID>.partner.onmschina.cn"; // Alternatively, you can use your Directory (tenant) ID (GUID)
const policyName = "<Name of your sign in / sign up policy, e.g. B2C_1_signupsignin1>";

有关详细信息,请查看此 Node.js B2C Web API 示例For more information, check out this Node.js B2C web API sample.


JavaScript SPAJavaScript SPA

以下步骤演示单页应用程序如何使用 Azure AD B2C 进行注册和登录,并调用受保护的 Web API 。The following steps demonstrate how a single-page application can use Azure AD B2C to sign up, sign in, and call a protected web API.

步骤 1:注册应用程序Step 1: Register your application

若要实现身份验证,首先需要注册你的应用程序。To implement authentication, you first need to register your application. 请遵循注册应用程序来执行详细步骤。See Register your application for detailed steps.

步骤 2:下载示例应用程序Step 2: Download the sample application

下载示例作为 zip 文件,或从 GitHub 克隆:Download the sample as a zip file, or clone it from GitHub:

git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp.git

步骤 3:配置身份验证Step 3: Configure authentication

配置应用程序时有两个关注点:There are two points of interest in configuring your application:

  • 配置 API 终结点和公开的范围Configure API endpoint and exposed scopes
  • 配置身份验证参数和令牌范围Configure authentication parameters and token scopes
  1. 在示例中打开 apiConfig.js 文件。Open the apiConfig.js file in the sample.

  2. 注册 Web API 时,请使用前面获取的参数配置示例。Configure the sample with the parameters that you obtained earlier while registering your web API. 更改以下代码行:将值替换为你的 Web API 的地址和公开的范围。Change the following lines of code by replacing the values with the address of your web API and exposed scopes.

     // The current application coordinates were pre-registered in a B2C tenant.
     const apiConfig = {
         b2cScopes: ["https://fabrikamb2c.partner.onmschina.cn/helloapi/demo.read"], //API scopes you exposed during api registration
         webApi: "https://fabrikamb2chello.chinacloudsites.cn/hello"
     };
    
  3. 在示例中打开 authConfig.js 文件。Open the authConfig.js file in the sample.

  4. 注册单页应用程序时,请使用前面获取的参数配置示例。Configure the sample with the parameters that you obtained earlier while registering your single-page application. 更改以下代码行:将值替换为你的 ClientId、颁发机构元数据和令牌请求范围。Change the following lines of code by replacing the values with your ClientId, authority metadata and token request scopes.

     // Config object to be passed to Msal on creation.
     const msalConfig = {
         auth: {
             clientId: "e760cab2-b9a1-4c0d-86fb-ff7084abd902",
             authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.partner.onmschina.cn/B2C_1_signupsignin1",
             validateAuthority: false
         },
         cache: {
             cacheLocation: "localStorage", // This configures where your cache will be stored
             storeAuthStateInCookie: false // Set this to "true" to save cache in cookies
         }
     };
    
     // Add here scopes for id token to be used at the MS Identity Platform endpoint
     const loginRequest = {
         scopes: ["openid", "profile"],
     };
    

有关详细信息,请查看此 JavaScript B2C 单页应用程序示例For more information, check out this JavaScript B2C single-page application sample.


后续步骤Next steps

了解有关以下方面的详细信息:Learn more about: