快速入门:从 Node.js Web 应用登录用户并调用 Microsoft 图形 API

本快速入门使用示例Node.js Web 应用来演示如何使用 授权代码流 登录用户并调用 Microsoft Graph API。 此示例使用 MSAL Node 来处理身份验证。

先决条件

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

若要完成注册,请为应用程序命名并指定支持的帐户类型。 注册后,应用程序“概述”窗格将显示应用程序源代码中所需的标识符。

  1. 登录 Microsoft Entra 管理中心

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

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

  4. 输入应用程序名称,例如 identity-client-web-app

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

  6. 选择“注册”。

    显示了如何在 Microsoft Entra 管理中心输入名称和选择帐户类型的屏幕截图。

  7. 注册完成后,将显示应用程序的“概述”窗格。 记录要在应用程序源代码中使用的目录(租户)ID 和应用程序(客户端)ID。

    显示了 Microsoft Entra 管理中心的概述页面上的标识符值的屏幕截图。

    注意

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

添加平台重定向 URI 并创建客户端密码

若要为应用注册指定应用类型,请执行以下步骤:

  1. 在“管理”下,选择“身份验证”。
  2. 在“平台配置”页上,选择“添加平台”,然后选择“Web”选项。
  3. 对于“重定向 URI”,请输入 http://localhost:3000/auth/redirect
  4. 在“前通道注销 URL”下,输入 https://localhost:5001/signout-callback-oidc 进行退出登录。
  5. 选择“配置”以保存更改。
  6. 在“管理”下,选择“证书和机密”>“客户端密码”>“新建客户端密码”。 选择说明,然后选择“ 添加”。
  7. 记下客户端密码的值供稍后使用此值仅显示一次。

克隆或下载示例应用程序

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

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

    git clone https://github.com/Azure-Samples/ms-identity-node.git
    
  • 下载 .zip 文件。 将其提取到名称长度小于 260 个字符的文件路径。

配置项目

提取项目,打开 ms-identity-node-main 文件夹,然后打开 App 文件夹下的 .env 文件。 将上面的值如下所示进行替换:

变量 说明 示例
Enter_the_Cloud_Instance_Id_Here 在其中注册应用程序的 Azure 云实例 https://login.microsoftonline.com/(包括尾随正斜杠)
Enter_the_Tenant_Info_here 租户 ID 或主域 contoso.microsoft.comaaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here 你已注册的应用程序的客户端 ID 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here 你已注册的应用程序的客户端机密 A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here 你的应用将调用的 Microsoft Graph API 云实例 https://graph.microsoft.com/(包括尾随正斜杠)
Enter_the_Express_Session_Secret_Here 用于对 Express 会话 cookie 进行签名的随机字符串 A1b-C2d_E3f.H4...

你的文件应与以下内容类似:

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

运行应用程序并登录

使用 Node.js 运行项目。

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

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

  3. 选择“登录”以启动登录过程。

    首次登录时,系统会提示你允许应用程序将你登录并访问你的个人资料。 成功登录后,你将被重定向回应用程序主页。

详细信息

示例工作原理

该示例在 localhost 端口 3000 上托管 Web 服务器。 当 Web 浏览器访问此地址时,应用将呈现主页。 用户选择“登录”后,应用将通过 MSAL 节点库生成的 URL 将浏览器重定向到 Microsoft Entra 登录屏幕。 用户同意后,浏览器会将用户与 ID 和访问令牌一起重定向回应用程序主页。

MSAL Node

MSAL Node 库会让用户登录,并请求用于访问受 Microsoft 标识平台保护的 API 的令牌。 可通过 Node.js 包管理器 (npm) 下载最新版本:

npm install @azure/msal-node

下一步

在以下多部分教程系列中,通过构建一个让用户登录的 ASP.NET Core Web 应用来了解详细信息: