如何为静态 Web 应用注册标识应用程序

本文介绍如何注册 Azure AD(或 Microsoft 标识平台)应用程序。 必需该应用程序才可通过适用于 React 的 Microsoft 身份验证库 (MSAL React) 对用户进行身份验证,以及代表用户调用 Azure 服务。

创建 Microsoft 标识提供者应用注册

创建 Microsoft 标识提供者应用注册以管理身份验证。

  1. 登录 Azure 门户

  2. 如果你的帐户存在于多个 Azure AD 租户中,请在页面顶部菜单的右上角选择你的配置文件,然后切换目录,将门户会话更改为所需的 Azure AD 租户。

  3. 在“应用注册”页中,选择“+ 新建注册”

  4. 在“名称”部分输入一个会显示给应用用户的有意义的应用程序名称,例如 Microsoft Identity Static web app - favorite color

  5. 对于“支持的帐户类型”设置,请选择“仅限此组织目录中的帐户”。 支持单个租户。

  6. 在“重定向 URI”部分的组合框中选择“单页应用程序”,然后输入以下重定向 URI:http://localhost:3000/ 。 此端口号是示例 React 应用的默认端口。

  7. 选择“注册”以创建身份验证应用程序的应用注册。

    Screenshot of Azure portal app registration's create page.

进行应用注册设置

在应用注册的“概述”屏幕中,查找并注意以下事项:

  • 应用程序(客户端) ID
  • 目录(租户)ID

稍后在 React 和 API 配置文件中需要进行这些设置。

应用注册的函数 API 配置

由于此示例包含一个 Azure 函数 API,该 API 需要在用户未直接登录的情况下调用 Azure 服务 (Microsoft Graph),所以应用注册需要更多设置,使 Azure 函数可代表用户进行操作。 使用身份验证的信息流有助于了解需要这些设置的原因。

代表用户执行的信息流包括:

  • 在用户身份验证期间:在用户登录期间请求 access_as_user 作用域内的权限,以代表用户对 Azure 函数中的 /api/hello 终结点执行操作。 在 Azure 应用注册的 Azure 门户中,并在 React 应用的 /src/authConfig.js 文件的代码中可以配置此项。
  • React 客户端与 Azure 函数 API 调用之间:当 React 客户端调用 Azure 函数 API 时,客户端将传递客户端用户身份验证期间接收的访问令牌。
  • 在 Azure 函数 API 调用中:Azure 函数接收令牌,验证令牌,获取可代表用户操作的新令牌,然后将该新令牌传递给 Azure 服务 (Microsoft Graph)。

创建应用注册客户端密码

此密码用于验证从函数 API 发出的请求。

  1. 在应用的注册屏幕中,选择“ 证书 & 机密 ”边栏选项卡以打开可以生成机密并上传证书的页面。

  2. 在“客户端密码”部分选择“新建客户端密码”,然后输入密钥描述(例如 Microsoft Identity Static web app - favorite color app secret

  3. 选择一个可用的密钥持续时间,然后选择“添加”。

    生成的密钥将会显示出来。

  4. 复制生成的值以备在后续步骤中使用。 此密钥值将不会再次显示,并且无法通过任何其他方式检索,因此在导航到任何其他界面或边栏选项卡之前,请务必从 Azure 门户记下密钥。

    稍后在 API 配置文件中将需要此客户端密码。

创建和公开 API 的身份验证终结点

为 Azure 函数 API 创建身份验证终结点,以便让它在调用其它 API 时代表 (OBO) 用户进行操作。 创建一个应用程序 ID URI,该 URI 在 React 客户端 MSAL config 对象中用于代表用户请求访问 Azure 函数 API。

  1. 在应用的注册屏幕中,选择“公开 API”边栏选项卡以打开页面,在这里你可以声明参数以将此应用公开为你的 Web 应用程序可为其获取访问令牌的 API。
  2. 选择“应用程序 ID URI”旁边的 Set为此应用生成唯一的 URI。
  3. 选择“保存”,接受建议的应用程序 ID URI (api://{clientId})。
  4. 复制 URI。 稍后在 React 和 API 配置文件中需要此 URI。

配置应用注册 API 作用域

创建一个用户或管理员在批准此应用程序代表用户执行操作时需要了解的范围及其说明性文本。

access_as_user添加React客户端应用程序的范围,以便成功获取具有该作用域的访问令牌。 向用户的第一次身份验证添加信息以解释作用域请求。

  1. 仍在“公开 API”边栏选项卡中选择“添加作用域” 。
  2. 对于“作用域名称”,请使用 access_as_user
  3. 在“谁能同意?”的选项中选择“管理员和用户” 。
  4. 对于“管理员同意显示名称”,键入 Admin: Access Microsoft Identity Static web app - favorite color
  5. 对于“管理员同意描述”,键入 Allows the app to access Function API as the signed-in user
  6. 对于“用户同意显示名称”,键入 User: Access Microsoft Identity Static web app - favorite color
  7. 对于“用户同意描述”,键入 Allow the application to access Function API on your behalf
  8. 将“状态”保持为“已启用” 。
  9. 选择“添加作用域”以保存此作用域。

为应用配置 API 权限

在同意过程中,用户/管理员授予应用程序(React 客户端和 Azure 函数)权限后,应用程序有权调用 API。 已配置权限的列表应包含应用程序所需的所有权限。

  1. 选择“API 权限”边栏选项卡。 注意,系统已为你默认添加了 Microsoft 图形 API 的 User.Read 作用域。

  2. 选择“添加权限”,然后选择“我的 API” 。 术语 API 指 Active Directory 应用 Microsoft Identity Static web app - favorite color

  3. 从 API 的列表中,选择你的应用名称 Microsoft Identity Static web app - favorite color

  4. 在“委托的权限”部分中,选择“access_as_user”权限 。

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

    现在为本地 React 客户端和本地 Azure 函数应用已配置了应用注册。

为单个租户应用配置令牌版本

单租户 Active Directory 应用需要此步骤。

  1. 选择“清单”边栏选项卡。

  2. 查找密钥 accessTokenAcceptedVersion 并将现有值替换 (null) 替换为 2

    "accessTokenAcceptedVersion": 2
    
  3. 选择“保存”。

查看收集的设置

React 客户端和 Azure 函数都需要可使用 MSAL SDK 的配置设置。

你应该已从前面的步骤中收集了以下信息:

  • 应用程序(客户端)ID
  • 目录(租户)ID
  • 客户端机密
  • 应用 ID URI

后续步骤