使用 Cypress 进行 Auth0 身份验证

Question

我正在尝试为赛普拉斯创建登录命令，并注意到他们关于如何执行此操作的博客与 Auth0 React SDK 的预期值不匹配。看来他们已经使用自定义快速应用程序来处理登录而不是使用 SDK 来处理此问题（根据 offical Auth0 documentation）。

Cypress official documentation 生成一个本地存储键值对，如下所示。

const item = {
        body: {
          decodedToken: {
            claims,
            user: { ... },
            audience,
            client_id,
          },
        },
        expiresAt: exp,
      }

window.localStorage.setItem('auth0Cypress', JSON.stringify(item))

然而，由 Auth0 React SDK 创建的那个会产生类似于：

const item = {
      body: {
        access_token,
        audience,
        client_id,
        decodedToken: {
          claims,
          user: { ... },
          encoded,
          header
        },
        expires_in,
        id_token,
        scope,
        token_type
      },
      expiresAt: exp
    }

window.localStorage.setItem(`@@auth0spajs@@::${client_id}::${audience}::${scope}`, JSON.stringify(item))

我能够让https://${auth)_domain}/oauth/token 请求正常工作，但是我无法弄清楚如何从响应中获取数据以使其适合 Auth0 react SDK 想要的数据结构。

有人在这方面取得了成功吗？

---

经过一番探索，我从/oauth/token 得到的响应似乎不包含 Auth0 React SDK 在登录时输出的值的所有字段。

我还注意到Auth0 has a guide 关于如何与赛普拉斯集成，但它不使用此 SDK，而是使用 SPA SDK。该指南还使用了自定义登录表单，我使用的是 LockUI。

需要注意的一点是，我没有使用后端进行身份验证（就像在大多数示例中一样）。我按照官方推荐使用loginWithRedirect登录。

Answer 1

经过 Auth0 团队的一些调查和帮助，我成功地完成了这项工作。

这是我使用的代码：

Cypress.Commands.add("login", () => {
  cy.clearLocalStorage();

  const email = "";
  const password = "";
  const client_id = "";
  const client_secret = "";
  const audience = "";
  const scope = "";

  cy.request({
    method: "POST",
    url: "",
    body: {
      grant_type: "password",
      username: email,
      password,
      audience,
      scope,
      client_id,
      client_secret,
    },
  }).then(({ body: { access_token, expires_in, id_token, token_type } }) => {
    cy.window().then((win) => {
      win.localStorage.setItem(
        `@@auth0spajs@@::${client_id}::${audience}::${scope}`,
        JSON.stringify({
          body: {
            client_id,
            access_token,
            id_token,
            scope,
            expires_in,
            token_type,
            decodedToken: {
              user: JSON.parse(
                Buffer.from(id_token.split(".")[1], "base64").toString("ascii")
              ),
            },
            audience,
          },
          expiresAt: Math.floor(Date.now() / 1000) + expires_in,
        })
      );
      cy.reload();
    });
  });
});

您必须确保您传入的配置与您在 Auth0 Provider 中使用的配置完全相同相同。

有一次让我感到困惑的是，我也在使用刷新令牌。如果是这种情况，请确保将 offline_access 添加到您的范围内。

我有一个公共存储库来下载一个有效的解决方案 - https://github.com/charklewis/auth0-cypress。

Answer 2

Cypress Real World App 中有一个示例，这是一个支付应用程序，用于演示赛普拉斯测试方法、模式和工作流程的实际使用情况，此外还有一个 Auth0 Authentication Testing Strategies Guide，它详细说明了 Auth0 应用程序和 @ 987654323@.

Answer 3

对于那些将来遇到这种情况的人。我们创建了一种使用 Cypress 测试 Auth0 的替代方法，它不需要在实际应用程序中更改代码。

我们使用的方法是运行一个本地服务，该服务公开与 Auth0 相同的 API。我们将此服务打包为 NPM 包。您可以在我们的博文https://frontside.com/blog/2022-01-13-auth0-simulator/

中了解它

这是你的测试最终的样子，

import auth0Config from '../../cypress.env.json';

describe('log in', () => {
  it('should get token without signing in', () => {
    cy.createSimulation(auth0Config)
      .visit('/')
      .contains('Log out')
      .should('not.exist')
      .given({
        email: 'bob@gmail.com'
      })
      .login()
      .visit('/')
      .contains('Log out')
      .logout();
  });
});