快速入门 - 在示例 Node.js Web 应用程序中编辑配置文件

适用于： 员工租户 外部租户（了解详细信息）

在本快速入门中，您将使用示例 Node.js Web 应用程序来了解如何在 Web 应用程序中添加登录和编辑配置文件。 该示例 Web 应用程序使用 Microsoft Node 身份验证库 (MSAL Node) 和 Microsoft Graph API 来完成登录和编辑个人资料操作。 编辑配置文件作要求用户完成多重身份验证 （MFA）。

先决条件

• 完成文章快速入门：在示例网络应用程序中登录用户的步骤和先决条件。 本快速入门介绍如何使用示例 Node.js Web 应用程序登录用户。
• 在 Microsoft Entra 管理中心为 Web API 注册一个新应用，名称为 edit-profile-service， 仅为此组织目录中的帐户配置。 有关更多详细信息 ，请参阅注册应用程序 。 在应用程序 概述 页中记录以下值供以后使用：
  • 应用程序（客户端）ID
  • 目录（租户）ID
• 将客户端密码添加到应用注册。 不要 在生产应用中使用客户端机密。 请改用证书或联合凭据。 有关详细信息，请参阅 向应用程序添加凭据。

配置 API 范围和角色

通过注册 Web API，必须配置 API 范围，以定义客户端应用程序可以请求访问 Web API 的权限。 此外，需要设置应用角色来指定可供用户或应用程序使用的角色，并向 Web 应用授予必要的 API 权限，使其能够调用 Web API。

配置 EditProfileService 应用 API 范围

EditProfileService 应用程序需要公开客户端应用程序获取以调用 Web API 的权限。

API 需要发布至少一个范围（也称为 委派权限），客户端应用才能成功获取用户的访问令牌。 若要发布范围，请执行以下步骤：

1. 在“应用注册”页中，选择创建的 API 应用程序（如 edit-profile-service），以打开其“概述”页。

2. 在“管理”下，选择“公开 API” 。

3. 在页面顶部的“应用程序 ID URI”旁边，选择“添加”链接以生成对此应用来说独一无二的 URI。

4. 接受建议的应用程序 ID URI，例如 api://{clientId}，然后选择“保存”。 当您的 Web 应用在请求 Web API 的访问令牌时，会将该 URI 添加为 API 每个定义范围的前缀。

5. 在“此 API 定义的范围”下选择“添加范围”。

6. 输入以下值，用于定义对 API 的读取访问权限，然后选择添加范围以保存更改：

   资产	价值
   范围名称	EditProfileService.ReadWrite
   谁可以许可	仅管理员
   管理员同意显示名称	客户端通过编辑配置文件服务编辑配置文件
   管理员同意说明	允许客户端 Web 应用通过调用编辑配置文件服务来编辑配置文件的范围。
   国家	已启用

向 EditProfileService 应用授予 User.ReadWrite 权限

User.ReadWrite 是一种 Microsoft Graph API 权限，允许用户更新其个人资料。 若要授予 User.ReadWrite EditProfileService 应用的权限，请使用以下步骤：

1. 在“应用注册”页中，选择创建的应用程序（如 edit-profile-service），以打开其“概述”页。

2. 在“ 管理”下，选择 API 权限。

3. 选择“Microsoft API”选项卡，然后在“常用 Microsoft API”下，选择“Microsoft Graph”。

4. 选择“委派的权限”，然后搜索并从权限列表中选择“User.ReadWrite”。

5. 选择“添加权限”按钮。

6. 您已将 User.ReadWrite 权限正确分配给 EditProfileService 应用程序。 但是，由于租户是外部租户，因此客户用户本身无法同意这些权限。 作为租户的管理员，你必须代表租户中的所有用户同意此权限：

   1. 选择“为<租户名称>授予管理员同意”，然后选择“是”。
   2. 选择“刷新”，然后验证两个范围的“状态”下是否均显示“已为 你的租户名称< 授予”。>

向客户端 Web 应用授予 API 权限

在本部分中，您将向您之前注册的客户端 Web 应用程序授予 API 权限（在先决条件中）。

向客户端 Web 应用授予 EditProfileService.ReadWrite 权限。 此权限由 EditProfileService 应用公开，它使用 MFA 保护更新配置文件操作。 若要授予 EditProfileService.ReadWrite 客户端 Web 应用的权限，请使用以下步骤：

1. 从“应用注册”页中，选择创建的 API 应用程序（例如 ciam-client-app）以打开其“概述”页。

2. 在“ 管理”下，选择 API 权限。

3. 在“已配置权限”下，选择“添加权限”。

4. 选择“我的组织使用的 API”选项卡。

5. 在 API 列表中，选择 API，例如 edit-profile-service。

6. 选择“委托的权限”选项。

7. 从权限列表中选择 EditProfileService.ReadWrite。

8. 选择“添加权限”按钮。

9. 从“配置的权限”列表中，选择 EditProfileService.ReadWrite 权限，然后复制权限的完整 URI 供以后使用。 完整权限 URI 看起来类似于 api://{clientId}/{EditProfileService.ReadWrite}。

10. 您已将 *EditProfileService.ReadWrite 权限正确分配给客户端 Web 应用程序。 但是，由于租户是外部租户，因此客户用户本身无法同意这些权限。 作为租户的管理员，你必须代表租户中的所有用户同意此权限：

    1. 选择“为<租户名称>授予管理员同意”，然后选择“是”。
    2. 选择“刷新”，然后验证两个范围的“状态”下是否均显示“已为 你的租户名称< 授予”。>

创建条件访问 MFA 策略

你前面注册的 EditProfileService 应用是使用 MFA 保护的资源。

要创建 MFA 条件访问 （CA） 策略，请使用 向应用程序添加多重身份验证 中的步骤。 创建策略时，请使用以下设置：

• 对于“名称”，请使用“MFA 策略”。
• 对于目标资源，请选择之前注册的 EditProfileService 应用，例如 edit-profile-service。

克隆或下载示例 Web 应用程序

您已经从先决条件克隆了 示例应用程序 ，但如果您尚未这样做，则可以从 GitHub 克隆它或将其下载为 .zip 文件。

下载 zip 文件，或通过运行以下命令从 GitHub 克隆示例 Web 应用程序：

git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

配置示例 Web 应用

此代码示例包含两个应用程序：客户端 Web 应用程序和 API 应用程序（EditProfileService 应用程序）。 需要更新这些应用以使用外部租户设置。 为此，请按照以下步骤操作：

1. 在代码编辑器中，打开 1-Authentication\7-edit-profile-with-mfa-express\App\authConfig.js 文件，然后找到占位符：

   • Enter_the_Application_Id_Here 并将其替换为您之前注册的客户端 Web 应用程序的应用程序（客户端）ID。
   • Enter_the_Tenant_Subdomain_Here 并将其替换为 Directory （tenant） 子域。 例如，如果租户主域名是 contoso.onmicrosoft.com，请使用 contoso。 如果没有租户名称，请了解如何 阅读租户详细信息。
   • Enter_the_Client_Secret_Here 并将其替换为您之前复制的客户端 Web 应用程序的 App Secret 值。
   • graph_end_point 并将其替换为 Microsoft Graph API 终结点，即 https://graph.microsoft.com/。
   • Add_your_protected_scope_here 并将其替换为 API 应用程序 （EditProfileService app） 范围。 该值类似于 api://{clientId}/EditProfileService.ReadWrite。 {clientId} 是您之前注册的 EditProfileService 的 Application （client） ID 值。

2. 在代码编辑器中，打开 1-Authentication\7-edit-profile-with-mfa-express\Api\authConfig.js 文件，然后找到占位符：

   • Enter_the_Tenant_Subdomain_Here，并将其替换为目录（租户）子域。 例如，如果租户主域名是 contoso.onmicrosoft.com，请使用 contoso。 如果没有租户名称，请了解如何 阅读租户详细信息。
   • Enter_the_Tenant_ID_Here，并将其替换为租户 ID。 如果没有租户 ID，请了解如何读取租户详细信息。
   • Enter_the_Edit_Profile_Service_Application_Id_Here 并将其替换为 EditProfileService 应用程序的 Application （client） ID 值。
   • Enter_the_Client_Secret_Here 并将其替换为作为先决条件的一部分创建的 Client secret 值。
   • graph_end_point 并将其替换为 Microsoft Graph API 终结点，即 https://graph.microsoft.com/。

安装项目依赖项并运行应用

若要测试应用，请同时为客户端应用和服务/API 应用安装项目依赖项，然后运行它们。

1. 若要运行客户端应用，请打开终端窗口，然后运行以下命令：

   cd 1-Authentication\7-edit-profile-with-mfa-express\App
   npm install
   npm start
   

2. 若要运行编辑服务/API 应用，请将目录更改为编辑服务/API 应用， 1-Authentication\7-edit-profile-with-mfa-express\Api，然后运行以下命令：

   npm install
   npm start
   

3. 打开浏览器，然后转到 http://localhost:3000. 如果遇到 SSL 证书错误，请创建一个 .env 文件，然后添加以下配置：

   # Use this variable only in the development environment. 
   # Remove the variable when you move the app to the production environment.
   NODE_TLS_REJECT_UNAUTHORIZED='0'
   

4. 选择“登录”按钮，然后登录。

5. 在登录页上，键入你的“电子邮件地址”，选择“下一步”，键入你的“密码”，然后选择“登录”。 如果没有帐户，请选择“无帐户? 创建一个”链接，以启动注册流。

6. 若要更新个人资料，请选择“个人资料编辑”链接。 此时会看到类似于以下屏幕截图的页面：

   

7. 若要编辑个人资料，请选择“个人资料编辑”按钮。 如果尚未执行此操作，应用程序会提示你完成 MFA 质询。

8. 更改任何个人资料详细信息，然后选择“保存”按钮。

相关内容

• 了解如何在你自己的 Node.js Web 应用中添加编辑个人资料。