快速入门：在单页应用 (SPA) 中使用户登录，并使用 React 调用 Microsoft Graph API

本快速入门使用示例 React 单页应用 (SPA) 向你展示如何使用授权代码流和代码交换证明密钥 (PKCE) 让用户登录。 此示例使用适用于 JavaScript 的 Microsoft身份验证库 来处理身份验证。

先决条件

• 具有活动订阅的 Azure 帐户。 如果还没有帐户，创建免费帐户。
• Node.js
• Visual Studio 2022 或 Visual Studio Code

注册应用程序并记录标识符

若要完成注册，请为应用程序提供一个名称，指定支持的帐户类型，并添加重定向 URI。 注册后，应用程序 “概述” 窗格会显示应用程序源代码中所需的标识符。

1. 登录 Microsoft Entra 管理中心。

2. 如果你有权访问多个租户，请使用顶部菜单中的“设置”图标 ，通过“目录 + 订阅”菜单切换到你希望在其中注册应用程序的租户。

3. 浏览至“标识”>“应用程序”>“应用注册”，然后选择“新建注册”。

4. 输入应用程序名称，例如 identity-client-spa。

5. 对于“支持的帐户类型”设置，请选择“仅限此组织目录中的帐户”。 要了解不同帐户类型的信息，请选择“帮我选择”选项。

6. 选择“注册”。

   

7. 注册完成后，将显示应用程序的 概述 窗格。 记录 目录（租户）ID 和 应用程序（客户端）ID 用于应用程序源代码。

   

   注意

   可以通过参照修改应用程序支持的帐户来更改支持的帐户类型。

添加平台重定向 URI

若要将应用类型指定到应用注册，请执行以下步骤：

1. 在 管理中，选择 身份验证。
2. 在 平台配置 页上，选择 添加平台，然后选择 SPA 选项。
3. 对于“重定向 URI”，请输入 http://localhost:3000。
4. 选择“配置”以保存更改。

克隆或下载示例应用程序

若要获取示例应用程序，可以从 GitHub 克隆它，也可以将其下载为 .zip 文件。

• 若要克隆示例，请打开命令提示符并导航到要创建项目的位置，并输入以下命令：

  git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git
  

• 下载 .zip 文件。 将其解压缩到名称长度少于 260 个字符的文件路径。

配置项目

1. 在 IDE 中，打开包含示例的项目文件夹，ms-identity-docs-code-javascript/react-spa。

2. 打开 src/authConfig.js，并使用之前在管理中心记录的信息更新以下值。

   /*
    * Copyright (c) Microsoft Corporation. All rights reserved.
    * Licensed under the MIT License.
    */
   
   import { LogLevel } from "@azure/msal-browser";
   
   /**
    * Configuration object to be passed to MSAL instance on creation. 
    * For a full list of MSAL.js configuration parameters, visit:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
    */
   
   export const msalConfig = {
       auth: {
           clientId: "Enter_the_Application_Id_Here",
           authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
           redirectUri: "http://localhost:3000",
       },
       cache: {
           cacheLocation: "sessionStorage", // This configures where your cache will be stored
           storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
       },
       system: {	
           loggerOptions: {	
               loggerCallback: (level, message, containsPii) => {	
                   if (containsPii) {		
                       return;		
                   }		
                   switch (level) {
                       case LogLevel.Error:
                           console.error(message);
                           return;
                       case LogLevel.Info:
                           console.info(message);
                           return;
                       case LogLevel.Verbose:
                           console.debug(message);
                           return;
                       case LogLevel.Warning:
                           console.warn(message);
                           return;
                       default:
                           return;
                   }	
               }	
           }	
       }
   };
   
   /**
    * Scopes you add here will be prompted for user consent during sign-in.
    * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
    * For more information about OIDC scopes, visit: 
    * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
    */
   export const loginRequest = {
       scopes: ["User.Read"]
   };
   
   /**
    * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
    * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
    */
   export const graphConfig = {
       graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
   };
   

   • clientId - 应用程序的标识符，也称为客户端。 将引号中的文本替换为前面记录的 应用程序（客户端）ID 值。
   • authority - 颁发机构是一个 URL，表示 MSAL 可从中请求令牌的目录。 请将“Enter_the_Tenant_Info_Here”替换为先前记录的“目录（租户）ID”值。
   • redirectUri - 应用程序的重定向 URI。 如有必要，请将引号中的文本替换为前面记录的重定向 URI。

运行应用程序并登录

使用 Node.js通过 Web 服务器运行项目：

1. 若要启动服务器，请从项目目录中运行以下命令：

   npm install
   npm start
   

2. 复制终端中显示的 https URL，例如 https://localhost:3000，并将其粘贴到浏览器中。 建议使用专用或隐身浏览器会话。

3. 按照步骤操作，并输入必要的详细信息，以使用 Microsoft 帐户登录。 你已请求电子邮件地址，以便可以向你发送一次性密码。 出现提示时输入代码。

4. 该应用程序将请求权限，以保持访问你已授权访问的数据、登录和阅读配置文件的权限。 选择 接受。 将显示以下屏幕截图，表明你已登录应用程序且已从 Microsoft Graph API 访问个人资料详细信息。

   

从应用程序注销

1. 在页面右上角找到“注销”按钮，然后选择它。
2. 系统会提示你选择要从中注销的帐户。 选择用于登录的帐户。

此时会显示一条消息，指示你已注销。现在可以关闭浏览器窗口。

相关内容

• 快速入门：使用Microsoft标识平台 保护 ASP.NET 核心 Web API

• 要了解详细信息，可通过以下系列从头开始构建此 React SPA：教程：让用户登录并调用 Microsoft Graph