@121watts/cypress-nextjs-auth0 中文文档教程

Question

cypress-nextjs-auth0

Contents

• Installation
• Usage
• login()
• logout()
• Security considerations
• Contributing

Installation

Step 1: Install the addon

yarn add cypress-nextjs-auth0 --dev

Step 2: Import the commands

// cypress/support/index.js

import 'cypress-nextjs-auth0';

Step 2: Register the task

// cypress/plugins/index.js

const encryptTask = require('cypress-nextjs-auth0/encrypt');

module.exports = (on, config) => {
  on('task', encryptTask)
}

Step 3: Create a test user

在您将专门用于测试的 Auth0 应用程序中创建一个用户。

在安全考虑中你会看到Auth0 推荐您为每个环境使用单独的租户（例如开发、测试、生产等）。 考虑在特定于测试的 Auth0 租户中创建此测试用户。

您需要此用户的电子邮件和密码才能完成第 4 步中的 auth0Username 和 auth0Password。

Step 4: Add Auth0 credentials

使用 Cypress 支持的方法之一（此代码示例假设您使用的是 cypress.env.json 文件）。

用您的 Auth0 应用程序的值替换值：

// cypress.env.json

{
  "auth0Audience": "https://lyft.auth0.com/api/v2/",
  "auth0Domain": "lyft.auth0.com",
  "auth0ClientId": "FNfof292fnNFwveldfg9222rf",
  "auth0ClientSecret": "FNo3i9f2fbFOdFH8f2fhsooi496bw4uGDif3oDd9fmsS18dDn",
  "auth0CookieSecret": "DB208FHFQJFNNA28F0N1F8SBNF8B20FBA0BXSD29SSJAGSL12D9922929D",
  "auth0Password": "mysupersecurepassword",
  "auth0Scope": "openid profile email",
  "auth0SessionCookieName": "appSession",
  "auth0Username": "testuser@lyft.com"
}

除 auth0Username 和 auth0Password 之外的所有内容都应与您应用程序的现有 Auth0 设置相匹配。

auth0Username 和 auth0Password 是您在第 3 步中创建的测试用户的电子邮件和密码。

Step 5: Configure Auth0

第 5.1 步：转到您的 Auth0 应用程序设置并启用密码授权类型：

第 5.2 步：转到您的Auth0 租户设置（确保租户名称在页面左上角是正确的）并将默认目录设置为 Username-Password-Authentication:

如果您更改了默认目录的名称（即租户的默认数据库名称），您应该替换 Username-Password -Authentication 使用您的数据库名称，如 Auth0 UI 中所示。 单击 Auth0 仪表板侧栏中的“数据库”以查看您的数据库。

第 5.3 步：将您的 cypress 端口 URL（例如 http://localhost:3001）添加到您的 Auth0 应用程序的“允许来源 (CORS)”列表中：

如果您不这样做但是在运行 Cypress 时指定一个端口，您需要将一个端口添加到您的 cypress.json 文件中。 例如：

// cypress.json

{
  "port": 3001
}

有时用户报告也需要在 Cypress 中添加禁用 chromeWebSecurity：

// cypress.json

{
  "port": 3001,
  "chromeWebSecurity": false
}

Usage

以下命令现在可以在您的测试套件中使用： 在测试

• login()
• logout()

login()

Property	Type	Default value	Required?
credentials	Object	None	No
credentials.username	String	Cypress.env('auth0Username')	No
credentials.password	String	Cypress.env('auth0Password')	No

开始时调用登录。 例如：

context('Logging in', () => {
  it('should login', () => {
    cy.login().then(() => {

      // Now run your test...
      cy.request('/api/me').then(({ body: user }) => {
        expect(user.email).to.equal(Cypress.env('auth0Username'));
      });
    });
  });
});

或者在 beforeEach() 循环中。 例如：

context('Logging in', () => {

  beforeEach(() => {
    cy.login();
  })

  it('should login', () => {
    cy.request('/api/me').then(({ body: user }) => {
      expect(user.email).to.equal(Cypress.env('auth0Username'));
    });
  });
});

您还可以将 credentials 传递给 login()：

context('Logging in', () => {
  it('should login', () => {
    cy.login({
      username: 'anothertestuser@lyft.com',
      password: 'mygreatpassword',
    }).then(() => {

      // Now run your test...
      cy.request('/api/me').then(({ body: user }) => {
        expect(user.email).to.equal(Cypress.env('auth0Username'));
      });
    });
  });
});

如果您想要多个测试用户，建议将他们的凭据包含在 cypress.env.json< /code> 而不是在您的源代码中。

logout()

cy.logout();

Property	Type	Default value	Required?
returnTo	String	None	No

在测试中的任何地方调用 logout()。 例如：

context('Logging out', () => {

  it('should logout', () => {
    cy.login().then(() => {
      cy.visit('/');

      cy.request('/api/me').then(({ body: user }) => {
        expect(user.email).to.equal(Cypress.env('auth0Username'));
      });

      cy.logout();

      cy.request('/api/me', {
        failOnStatusCode: false,
      }).then((response) => {
        expect(response.status).to.equal(401); // Assert user is logged out
      });
    });
  });

});

您可以将返回 URL 传递给 logout()，用户将在成功注销后转到该网址：

context('Logging out', () => {

  it('should logout', () => {
    cy.login().then(() => {
      cy.visit('/');

      cy.logout('/thanks-for-visiting');
    });
  });
});

您可能希望在每次测试后注销：

// cypress/support.index.js

import 'cypress-nextjs-auth0';

beforeEach(() => {
  cy.logout();
})

Security considerations

Use separate tenants

Auth0 建议您为每个环境使用单独的租户（例如开发、测试、<代码>生产等）。 这将有助于降低创建测试用户的风险。

因此，如果您的 testing 环境没有专门的租户，建议您创建一个新租户并更新其设置以匹配您的 development 环境，然后再执行 安装步骤。

Storing credentials

将测试凭据放入 cypress.env.json 或您可以远离源代码控制的类似位置。

如果您使用 cypress.env.json，请将文件添加到您的 .gitignore 和 .npmignore 文件中，如下所示：

# .gitignore

cypress.env.json

Continuous integration

如果您使用平台所有 CI 的一部分，例如 Travis，您需要将所有敏感数据保留在测试日志之外。

有关有关如何防止“泄漏”Travis 日志的更多信息，请参阅此处。

Contributing

为了贡献这个插件，克隆 repo：

git clone https://github.com/sir-dunxalot/cypress-nextjs-auth0.git

安装依赖项：

yarn install

运行虚拟应用服务器：

yarn dev

最后，运行测试套件（当虚拟应用服务器正在运行时）：

yarn test:ui # or yarn test:headless for no UI

要在本地运行测试套件，您需要将一些环境变量传递给Next.js 和 Cypress...

最简单的方法是添加以下两个文件（它们被排除在源代码控制之外），但您也可以通过另一种方式传递它们包含的环境变量（例如 export CYPRESS_auth0ClientId=FNfof292fnNFwveldfg9222rf ）：

• cypress.env.json
• cypress/dummy/.env

要获取这些环境变量的值，您可以：

• Open an PR and then ask @sir-dunxalot to share test credentials
• Use values from your own Auth0 test tenant and app (since these files are not check in to source control)
• Create a new (free tier) tenant and application in Auth0 and set it up as documented in the installation steps

如果您使用自己的 Auth0 租户，请注意您需要两个测试用户（auth0Username 和 auth0UsernameAlt ).

这是 Cypress 环境变量（例如在 cypress.env.json 中）：

// cypress.env.json

{
  "auth0Audience": "https://lyft.auth0.com/api/v2/",
  "auth0Domain": "lyft.auth0.com",
  "auth0ClientId": "FNfof292fnNFwveldfg9222rf",
  "auth0ClientSecret": "FNo3i9f2fbFOdFH8f2fhsooi496bw4uGDif3oDd9fmsS18dDn",
  "auth0CookieSecret": "DB208FHFQJFNNA28F0N1F8SBNF8B20FBA0BXSD29SSJAGSL12D9922929D",
  "auth0Password": "mysupersecurepassword",
  "auth0PasswordAlt": "anothersupersecurepassword",
  "auth0Scope": "openid profile email",
  "auth0SessionCookieName": "appSession",
  "auth0Username": "testuser@lyft.com",
  "auth0UsernameAlt": "testuser@lyft.com"
}

这是 Next.js 应用程序变量（例如在 cypress/dummy/.env 中）。

# cypress/dummy/.env

AUTH0_CLIENT_SECRET='FNo3i9f2fbFOdFH8f2fhsooi496bw4uGDif3oDd9fmsS18dDn'
AUTH0_SECRET='DB208FHFQJFNNA28F0N1F8SBNF8B20FBA0BXSD29SSJAGSL12D9922929D'

AUTH0_CLIENT_ID='FNfof292fnNFwveldfg9222rf'
AUTH0_AUDIENCE='https://lyft.auth0.com/api/v2/'
AUTH0_SCOPE='openid profile email'
AUTH0_ISSUER_BASE_URL='https://lyft.auth0.com'
AUTH0_BASE_URL='http://localhost:3000'

当您打开 PR 或推送到此 repo 的分支时，Travis 将运行测试。 您无需担心添加环境变量，因为它们已作为 Travis 环境变量 添加已经。

Releasing

项目合作者将构建项目并使用 yarn release 命令发布它，该命令将任何参数传递给 发布包。

例如：

yarn release patch # e.g. 1.0.0 --> 1.0.1
yarn release minor # e.g. 1.0.0 --> 1.1.0
yarn release major # e.g. 1.0.0 --> 2.0.0
yarn release 1.2.4 # e.g. 1.0.0 --> 1.2.4