SPA용 Cypress 및 Auth0 설정

Cypress 로그인 뒤에 잠겨 있는 SPA를 종단 간 테스트를 위해 설정하는 방법Auth0. Auth0에는 이 설정을 설명하는 블로그 게시물이 있습니다here. 그러나 단일 페이지 애플리케이션을 구축하는 경우 로그인 상태를 관리하기 위해 @auth0/auth0-spa-js에 의존할 가능성이 가장 높습니다. 이는 토큰을 auth0 클라이언트로 가져와야 함을 의미합니다. 이 게시물은 localstorage를 사용하여 이를 달성하는 방법을 보여줍니다.

Auth0 및 Cypress 설정

먼저 API 요청으로 토큰을 검색할 수 있도록 Auth0을 구성해야 합니다. 이렇게 하려면 Cypress에 대한 Auth0 블로그 게시물의 단락Auth0 Setup & Configuration에 있는 단계를 따르세요.

cypress 프로젝트 루트 폴더에 파일cypress.env.json을 추가하고 auth0 애플리케이션 및 사용자 데이터로 채우십시오.

{
  "auth_audience": "",
  "auth_url": "",
  "auth_client_id": "",
  "auth_client_secret": "",
  "auth_username": "",
  "auth_password": ""
}

.gitignore에 추가하는 것을 잊지 마십시오!

그런 다음 /cypress/support/commands.js 에 명령을 추가합니다.

Cypress.Commands.add('login', (overrides = {}) => {
  Cypress.log({
    name: 'loginViaAuth0',
  });

  const options = {
    method: 'POST',
    url: Cypress.env('auth_url'),
    body: {
      grant_type: 'password',
      username: Cypress.env('auth_username'),
      password: Cypress.env('auth_password'),
      audience: Cypress.env('auth_audience'),
      scope: 'openid profile email',
      client_id: Cypress.env('auth_client_id'),
      client_secret: Cypress.env('auth_client_secret'),
    },
  };
  cy.request(options);
});

캐싱을 위해 Auth0의 localstorage 활성화

이제 SPA의 어딘가에 다음이 있을 것입니다.

import createAuth0Client from '@auth0/auth0-spa-js'

...

this.auth0Client = await createAuth0Client(authOptions)

여기서 localstorage를 활성화해야 합니다. authOptions 매개변수는 cacheLocation 를 포함할 수 있는 객체이며, 'localstorage' 로 설정하기만 하면 됩니다. localstorage에 토큰을 저장하는 것은 보안 문제입니다. 따라서 우리는 비프로덕션 환경에 대해서만 localstorage를 사용할 것입니다. 프로덕션의 경우 cacheLocation: 'memory' 를 사용합니다. 이 값을 제공하지 않으면 기본값이기도 합니다.

const cacheLocation = process.env.NODE_ENV === 'production' ? 'memory' : 'localstorage'
const optionsWithCache = {
  ...authOptions,
  cacheLocation,
}
this.auth0Client = await createAuth0Client(optionsWithCache)

이것은 또한 Cypress 로그인이 비프로덕션 환경에서만 작동한다는 것을 의미하므로 프로덕션 환경에서 Cypress를 실행할 필요가 없기를 바랍니다.

로그인 테스트

describe("login", () => {
  it("should successfully log into our app", () => {
    cy.login()
      .then((resp) => {
        return resp.body;
      })
      .then((body) => {
        const { access_token, expires_in, id_token, token_type } = body;
        cy.visit("/", {
          onBeforeLoad(win) {
            const keyPrefix = "@@auth0spajs@@";
            const defaultScope = "openid profile email";
            const clientId = Cypress.env("auth_client_id");
            const audience = "default";
            const key = `${keyPrefix}::${clientId}::${audience}::${defaultScope}`;
            const decodedToken = {
              user: JSON.parse(
                Buffer.from(body.id_token.split(".")[1], "base64").toString(
                  "ascii"
                )
              ),
            };
            const storageValue = JSON.stringify({
              body: {
                client_id: clientId,
                access_token,
                id_token,
                scope: defaultScope,
                expires_in,
                token_type,
                decodedToken,
                audience,
              },
              expiresAt: Math.floor(Date.now() / 1000) + body.expires_in,
            });
            win.localStorage.setItem(key, storageValue);
          },
        });
      });
  });
});

이 스니펫에서 주의해야 할 몇 가지 사항:

cy.visit("/")는 baseUrl에서 cypress.json를 설정했다고 가정합니다. 예를 들어 로컬에서 테스트하는 경우:

{
  "baseUrl": "http://localhost:3020"
}

key 및 storageValue는 Auth0 클라이언트가 선택하려면 특정 형식이어야 합니다. 스니펫에는 keyPrefix , defaultScope 및 audience 에 대한 기본값이 포함되어 있습니다. 그들의 독특한 가치에 대해 걱정하지 마십시오. Auth0 클라이언트를 생성할 때 scope 또는 audience를 수정하지 않는 한 변경할 필요가 없습니다.

즐거운 테스트!