您现在访问的是微软AZURE全睃版技术文档网站,若需覝访问由世纪互蝔违蝥的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn.

快速入门:使用具有 PKCE 的授权代码流在 JavaScript SPA 中登录用户并获取访问令牌

在本快速入门中,你将下载并运行一个代码示例,该示例演示 JavaScript 单页应用程序 (SPA) 如何通过使用具有代码交换证明密钥 (PKCE) 的授权代码流让用户登录并调用 Microsoft Graph。 此代码示例演示如何获取访问令牌来调用 Microsoft Graph API 或任何 Web API。

有关说明,请参阅示例工作原理

先决条件

注册并下载快速入门应用程序

若要启动快速入门应用程序,请使用以下选项之一。

选项 1(快速):注册并自动配置应用,然后下载代码示例

  1. 访问 Azure 门户 - 应用注册
  2. 输入应用程序的名称。
  3. 在“支持的帐户类型”下,选择“任何组织目录中的帐户和个人 Microsoft 帐户”。
  4. 选择“注册”。
  5. 转到快速入门窗格,按说明下载并自动配置新应用程序。

选项 2(手动):注册并手动配置应用程序和代码示例

步骤 1:注册应用程序

  1. 登录 Azure 门户
  2. 如果有权访问多个租户,请使用顶部菜单中的“目录 + 订阅”筛选器 ,以切换到要在其中注册应用程序的租户。
  3. 搜索并选择“Azure Active Directory”。
  4. 在“管理”下,选择“应用注册” > “新建注册” 。
  5. 输入应用程序的 名称。 应用的用户可能会看到此名称,你稍后可对其进行更改。
  6. 在“支持的帐户类型”下,选择“任何组织目录中的帐户和个人 Microsoft 帐户”。
  7. 选择“注册” 。 在应用的“概述”页上,记下“应用程序(客户端) ID”值,供稍后使用 。
  8. 在“管理”下,选择“身份验证”。
  9. 在“平台配置”下,选择“添加平台” 。 在打开的窗格中,选择“单页应用程序”。
  10. 将“重定向 URI”值设为 http://localhost:3000/
  11. 选择“配置”。

步骤 1:在 Azure 门户中配置应用程序

为使此快速入门中的代码示例正常运行,请添加重定向 URI http://localhost:3000/

已配置 应用程序已使用这些属性进行配置。

步骤 2:下载项目

若要使用 Node.js 在 Web 服务器中运行项目,请下载核心项目文件

使用 Node.js 在 Web 服务器中运行项目

步骤 3:配置 JavaScript 应用

在“应用”文件夹中打开“authConfig.js”文件,然后更新 msalConfig 对象中的 clientIDauthorityredirectUri 值 。

// Config object to be passed to MSAL on creation
const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
    authority: "Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here",
    redirectUri: "Enter_the_Redirect_Uri_Here",
  },
  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
  }
};

备注

Enter_the_Supported_Account_Info_Here

修改 msalConfig 部分中的值:

  • Enter_the_Application_Id_Here 是已注册应用程序的应用程序(客户端)ID。

    若要查找“应用程序(客户端) ID”的值,请转到 Azure 门户中应用注册的“概览”页面 。

  • Enter_the_Cloud_Instance_Id_Here 是 Azure 云实例。 对于主要云或全球 Azure 云,请输入 https://login.microsoftonline.com。 对于 国家 云(例如“中国”云),请参阅 国家云

  • Enter_the_Tenant_info_here 是下列值之一:

    • 如果应用程序支持“此组织目录中的帐户”,请将此值替换为“租户 ID”或“租户名称”。 例如,contoso.microsoft.com

    若要查找“目录(租户) ID”的值,请转到 Azure 门户中应用注册的“概述”页 。

    • 如果应用程序支持“任何组织目录中的帐户”,请将该值替换为“organizations”。
    • 如果应用支持“任何组织目录中的帐户和个人 Microsoft 帐户”,请将此值替换为“common”。 本快速入门中使用 common
    • 若要限制对“仅限个人 Microsoft 帐户”的支持,请将此值替换为“consumers”。

    若要查找“支持的帐户类型”的值,请转到 Azure 门户中应用注册的“概述”页 。

  • Enter_the_Redirect_Uri_Herehttp://localhost:3000/

如果使用的是主要(全球)Azure 云,则 authConfig 中的 authority 值应类似于:

authority: "https://login.microsoftonline.com/common",

步骤 3:应用已配置并可以运行

我们已经为项目配置了应用属性的值。

接下来,打开“graphConfig.js”文件,以更新 apiConfig 对象中的 graphMeEndpointgraphMailEndpoint 值。

  // Add here the endpoints for MS Graph API services you would like to use.
  const graphConfig = {
    graphMeEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me",
    graphMailEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me/messages"
  };

  // Add here scopes for access token to be used at MS Graph API endpoints.
  const tokenRequest = {
      scopes: ["Mail.Read"]
  };

Enter_the_Graph_Endpoint_Here 是将针对其进行 API 调用的终结点。 对于主要或全局 Microsoft Graph API 服务,请输入 https://graph.microsoft.com/(包括末尾的正斜杠)。 若要详细了解国家云上的 Microsoft Graph,请参阅国家云部署

如果使用的是主要(全球)Microsoft Graph API 服务,则 graphConfig.js 文件中的 graphMeEndpointgraphMailEndpoint 值应该与下方类似:

graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
graphMailEndpoint: "https://graph.microsoft.com/v1.0/me/messages"

步骤 4:运行项目

使用 Node.js 在 Web 服务器中运行项目。

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

    npm install
    npm start
    
  2. 转到 http://localhost:3000/

  3. 选择“登录”以启动登录过程,然后调用该 Microsoft Graph API。

    首次登录时,系统会提示你允许应用程序访问你的个人资料并将你登录。 成功登录后,你的用户配置文件信息会显示在页面上。

详细信息

示例工作原理

展示单页应用程序的授权代码流的示意图。

MSAL.js

MSAL.js 库会登录用户并请求令牌,这些令牌用于访问受 Microsoft 标识平台保护的 API。 示例的 index.html 文件包含对库的引用:

<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.0.0-beta.0/js/msal-browser.js" integrity=
"sha384-r7Qxfs6PYHyfoBR6zG62DGzptfLBxnREThAlcJyEfzJ4dq5rqExc1Xj3TPFE/9TH" crossorigin="anonymous"></script>

如果已安装 Node.js,则可通过 Node.js 包管理器 (npm) 下载最新版本:

npm install @azure/msal-browser

后续步骤

若要查看生成本快速入门中使用的应用程序的详细分步指南,请参阅以下教程: