使用本地身份验证在 React 单页应用（SPA）中为用户登录 - Microsoft identity platform

适用于：带灰色 X 号的白色圆圈。员工租户带白色勾号的绿色圆圈。外部租户（了解详细信息）

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

先决条件

具有活动订阅的 Azure 帐户。如果您还没有帐户，请免费创建一个帐户。
Azure 帐户必须拥有管理应用程序的权限。以下任何Microsoft Entra 角色都包含所需的权限：
- 应用程序管理员
- 应用程序开发人员
外部租户。若要创建一个，请从以下方法中进行选择：
- 使用 Microsoft Entra 外部 ID 扩展直接在 Visual Studio Code 中设置外部租户。 （推荐使用）
- 在 Microsoft Entra 管理中心创建新的外部租户。
一个用户流。有关详细信息，请参阅为外部租户中的应用创建自助服务注册用户流。确保用户流包含以下用户属性：
- 名字
- Surname
在 Microsoft Entra 管理中心注册一个新应用，并配置为仅适用于此组织目录中的帐户。有关更多详细信息，请参阅注册应用程序。在应用程序概述页中记录以下值供以后使用：
- 应用程序（客户端）ID
- 目录（租户）ID
将应用程序添加到用户流
Node.js。
Visual Studio Code 或其他代码编辑器。

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

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

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

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

或者，下载示例，然后将其提取到名称长度少于 260 个字符的文件路径。

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

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

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

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

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

在终端窗口中运行以下命令以启动 CORS 代理服务器：
```
cd API\React\ReactAuthSimple
npm run cors
```
若要启动 React 应用，请打开另一个终端窗口，然后运行以下命令：
```
cd API\React\ReactAuthSimple
npm start
```
打开 Web 浏览器并转到 http://localhost:3000/。
若要注册帐户，请选择注册，然后按照提示做。
注册后，通过分别选择登录和 重置密码 来测试登录和密码重置。