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

适用于：绿色圆圈，带有白色复选标记符号，指示以下内容适用于外部租户。外部租户（了解详细信息）

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

先决条件

拥有有效订阅的 Azure 帐户。如果您还没有帐户，请免费创建一个帐户。
Azure 帐户必须拥有管理应用程序的权限。以下任何Microsoft Entra 角色都包含所需的权限：
- 应用程序管理员
- 应用程序开发人员
外部租户。在 Microsoft Entra 管理中心创建新的外部租户（如果还没有）。
一个用户流。有关详细信息，请参阅为外部租户中的应用创建自助服务注册用户流。确保用户流包含以下用户属性：
- 名字
- 姓
如果尚未完成此操作，请在 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/。
若要注册帐户，请选择注册，然后按照提示做。
注册后，通过分别选择登录和 重置密码 来测试登录和密码重置。

你可以允许使用电子邮件地址和密码登录的用户也使用用户名和密码登录。用户名也称为备用登录标识符，可以是客户 ID、帐户号或你选择用作用户名的另一个标识符。

可以通过 Microsoft Entra 管理中心手动将用户名分配给用户帐户，或者通过 Microsoft 图形 API 在应用中自动分配用户名。

使用《使用别名或用户名登录》文章中的步骤，让用户能够在你的应用程序中使用用户名登录。

此页面是否有帮助？