快速入门：使用本机身份验证 JavaScript SDK 在单页应用中登录用户

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

在本快速入门中，你将使用单页应用程序（SPA）演示如何使用本机身份验证 SDK 对用户进行身份验证。 示例应用演示了用户使用密码和电子邮件一次性密码身份验证流注册、登录和注销。

先决条件

• 拥有有效订阅的 Azure 帐户。 如果还没有帐户，请 免费创建帐户。
• Azure 帐户必须拥有管理应用程序的权限。 以下任何Microsoft Entra 角色都包含所需的权限：
  • 应用程序管理员
  • 应用程序开发人员
• 外部租户。 在 Microsoft Entra 管理中心创建新的外部租户（如果还没有）。
• 一个用户流。 有关详细信息，请参阅 为外部租户中的应用创建自助服务注册用户流。 在 “标识提供者”下，选择首选身份验证方法，即 使用密码 或 电子邮件一次性密码的电子邮件。 对于此代码示例，请在用户流中使用以下用户属性，因为示例应用从用户收集它们：
  • 名字
  • Surname
  • 职务
  • 国家/地区
• 如果尚未完成此操作，请在 Microsoft Entra 管理中心注册应用程序。 请确保：
  • 记录 应用程序（客户端）ID 和 目录（租户）ID 供以后使用。
  • 授予管理员对 应用注册的同意。
• 将应用注册与用户流相关联
• Node.js。
• Visual Studio Code 或其他代码编辑器。

启用公共客户端和原生身份验证流

若要指定此应用是公共客户端，并且可以使用本机身份验证，请启用公共客户端和本机身份验证流：

1. 在“应用注册”页中，选择要为其启用公共客户端和本机身份验证流程的应用注册。
2. 在“管理”下，选择“身份验证”。
3. 在 “高级设置”下，允许公共客户端流：
   1. 对于“启用以下移动和桌面流程”，请选择“是”。
   2. 对于“启用本机身份验证”，请选择“是”。
4. 选择“保存”按钮。

克隆或下载示例 SPA

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

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

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

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

安装项目依赖项

配置示例 React 应用

配置 CORS 代理服务器

本机身份验证 API 不支持 跨域资源共享（CORS）， 因此必须在 SPA 应用和 API 之间设置代理服务器。

此代码示例包含 CORS 代理服务器，用于将请求转发到本机身份验证 API URL 终结点。 CORS 代理服务器是一种侦听端口 3001 的 Node.js 服务器。

若要配置代理服务器，请打开 proxy.config.js 文件，然后找到占位符：

• tenantSubdomain 并将其替换为 Directory （tenant） 子域。 例如，如果租户主域名是 contoso.onmicrosoft.com，请使用 contoso。 如果没有租户子域，请了解如何 阅读租户详细信息。
• tenantId 并将其替换为目录（租户）ID。 如果没有租户 ID，请了解如何读取租户详细信息。

运行并测试应用

现已配置示例应用，并已准备好运行。

相关内容

• 生成使用本机身份验证 SDK 对用户进行身份验证的 React 单页应用。
• 生成使用本机身份验证 SDK 对用户进行身份验证的 Angular 单页应用。