在 Cypress 中使用 Logto 进行身份验证

介绍#

身份验证是任何 Web 应用程序的关键部分，确保身份验证保护在单页应用程序 (SPA) 中按预期工作至关重要。在本指南中，我们将引导你通过在 Cypress 测试中使用 Logto 进行身份验证的过程，以便你能够有效地测试 SPA 的身份验证流程。

先决条件#

在深入了解之前，请确保你已准备好以下内容：

• 一个 Logto 帐户。如果你没有，可以免费注册 Logto 云。

• 一个与 Logto 集成进行身份验证的单页应用程序 (SPA)。如果你没有，请按照我们的创建并集成第一个应用程序指南，在 Logto 中创建并注册一个新应用程序。

  

• 使用我们现成的 SDK 集成 Logto 到你的 SPA 应用程序。比如 React SDK

• 你可以按照我们的注册体验指南自定义你自己的 SPA 应用程序的注册体验。在你的 Cypress 测试中模拟注册流程。

  

• 完成 Cypress 安装和配置。本指南假设你已经设好了 Cypress 环境，并且能够运行 Cypress 测试。

• 启动你的 Logto 服务和客户端应用程序。

我们将在本指南中以我们的 React SPA 示例应用程序为例。你可以在这里找到源代码。它是一个简单的 React 应用程序，使用 Logto React SDK 进行身份验证。

• Logto 注册 URL: http://localhost:3001/sign-in
• React SPA 应用程序域名: http://localhost:3000
• Logto 注册体验设置: 用户名/密码

编写一个自定义 Cypress 命令以使用 Logto 进行身份验证#

让我们编写一个自定义 Cypress 命令在你的 Cypress 测试中使用 Logto 进行身份验证。通过使用自定义命令，你可以轻松地在任何 Cypress 测试中进行 Logto 身份验证。

第 1 步：启动注册流程#

在 Cypress 测试中访问你的客户端应用程序的注册页面，并通过点击注册按钮启动注册流程。

第 2 步：填写注册表单并提交#

导航到 Logto 注册页面，并填写用户名和密码进行注册。

在正常使用中，单个 Cypress 测试可能只能在单个来源中运行命令，这是由浏览器的标准 Web 安全功能决定的限制。cy.origin() 命令允许你的测试绕过此限制。

1. 断言当前 URL 是 Logto 注册页面。
2. 识别用户名和密码输入字段并填写用户名和密码。
3. 点击注册按钮进行注册。

第 3 步：成功注册并重定向回你的客户端应用程序#

成功注册后，你应该能够重定向回你的客户端应用程序。

第 4 步：将整个注册流程包裹为自定义 Cypress 命令#

将整个注册流程包裹为自定义 Cypress 命令。在本例中为 cy.signIn。

使用自定义 Cypress 命令对你的应用程序进行身份验证#

在任何 Cypress 测试中，你都可以使用自定义 Cypress 命令进行 Logto 身份验证。

恭喜！你已经成功在 Cypress 测试中使用 Logto 进行身份验证。你现在可以专注于测试 SPA 应用程序，而不用担心身份验证流程。