사이프러스에서 Logto 인증

소개#

인증은 웹 응용 프로그램의 중요한 부분이며, 단일 페이지 응용 프로그램(SPAs)에서 인증 가드가 예상대로 작동하는지 확인하는 것이 필수적입니다. 이 가이드에서는 사이프러스 테스트에서 Logto를 사용하여 인증하는 과정을 안내하여 SPA의 인증 흐름을 효과적으로 테스트할 수 있도록 합니다.

사전 조건#

시작하기 전에 다음이 준비되어 있는지 확인하세요:

• Logto 계정. 계정이 없다면 Logto 클라우드에 무료로 가입할 수 있습니다.

• Logto와 통합된 단일 페이지 응용 프로그램(SPA). 계정이 없다면 우리의 첫 앱 생성 및 통합 가이드를 따라, Logto에 새로운 응용 프로그램을 생성하고 등록하세요.

  

• 우리의 기성 SDK를 사용하여 SPA 응용 프로그램과 Logto를 통합합니다. 예: React SDK

• 로그인 경험 가이드를 따라 SPA 응용 프로그램에 맞게 로그인 경험을 사용자 정의하십시오. 사이프러스 테스트에서 로그인 흐름을 그에 따라 시뮬레이션합니다.

  

• 사이프러스 설치 및 구성 완료. 이 가이드는 사이프러스 환경이 잘 설정되어 있고 사이프러스 테스트를 실행할 수 있다고 가정합니다.

• Logto 서비스와 클라이언트 애플리케이션 구동.

이 가이드에서는 React SPA 샘플 응용 프로그램을 예로 사용합니다. 소스 코드는 여기에서 찾을 수 있습니다. Logto React SDK를 사용하여 인증하는 간단한 React 응용 프로그램입니다.

• Logto 로그인 URL: http://localhost:3001/sign-in
• React SPA 응용 프로그램 도메인: http://localhost:3000
• Logto 로그인 경험 설정: 사용자 이름/비밀번호

Logto로 인증하기 위한 사용자 정의 사이프러스 명령 작성하기#

사이프러스 테스트에서 Logto로 쉽게 인증할 수 있도록 사용자 정의 사이프러스 명령을 작성해 보겠습니다.

1단계: 로그인 흐름 시작#

사이프러스 테스트에서 클라이언트 응용 프로그램 로그인 페이지로 이동하고, 로그인 버튼을 클릭하여 로그인 흐름을 시작합니다.

2단계: 로그인 양식 작성 및 제출#

Logto 로그인 페이지로 이동하여 사용자 이름과 비밀번호를 입력하여 로그인합니다.

일반적으로 단일 사이프러스 테스트는 웹 브라우저의 표준 보안 기능에 의해 결정된 제한 사항으로 인해 단일 출처에서만 명령을 실행할 수 있습니다. cy.origin() 명령은 테스트가 이러한 제한을 우회할 수 있게 합니다.

1. 현재 URL이 Logto 로그인 페이지인지 확인합니다.
2. 사용자 이름과 비밀번호 입력 필드를 식별하고 사용자 이름과 비밀번호를 입력합니다.
3. 로그인 버튼을 클릭하여 로그인합니다.

3단계: 성공적으로 인증된 후 클라이언트 응용 프로그램으로 리디렉션#

성공적으로 로그인한 후에는 클라이언트 응용 프로그램으로 리디렉션될 수 있어야 합니다.

4단계: 로그인 흐름을 사용자 정의 사이프러스 명령으로 포장#

전체 로그인 흐름을 사용자 정의 사이프러스 명령으로 포장합니다. 이 예에서는 cy.signIn입니다.

사용자 정의 사이프러스 명령을 사용하여 애플리케이션 인증#

사이프러스 테스트에서 언제든지 사용자 정의 사이프러스 명령을 사용하여 Logto로 인증할 수 있습니다.

축하합니다! 사이프러스 테스트에서 Logto로 성공적으로 인증되었습니다. 이제 인증 흐름에 대해 걱정하지 않고 SPA 애플리케이션 테스트에 집중할 수 있습니다.