본문으로 건너뛰기

실시간 미리보기로 사용자 경험 테스트하기

실시간 미리보기 기능을 사용하여 로그인 경험 구성의 편리한 테스트를 수행할 수 있습니다.

실시간 미리보기​

Console > Sign-in experience로 이동하여 오른쪽 상단의 "Live preview" 버튼을 클릭하면 Logto의 기능을 완전히 시연하는 새로운 브라우저 탭이 열립니다. 이 데모는 로그인 및 회원가입 흐름에 대한 우리의 경험 디자인 접근 방식을 보여줍니다. 매우 커스터마이즈 가능하며 애플리케이션에 원활하게 통합될 수 있습니다.

노트:

이 미리보기에서 경험을 테스트하려면 먼저 계정을 생성해야 합니다. 이 계정은 나중에 Console > User management에서 관리할 수 있습니다.

생성한 사용자 계정으로 로그인 시도를 하고 문제가 없이 성공하면, 식별자와 ID가 표시되는 성공 페이지로 리디렉션됩니다.

개발자 패널​

Logto의 실시간 미리보기를 사용하여 성공적으로 로그인한 후에는 두 가지 주요 작업이 포함된 대시보드에 도착합니다:

  • 실시간 미리보기 버튼 로그아웃: 현재 세션을 종료합니다.
  • 개발자 패널 열기 버튼: 인증 흐름을 분석하기 위한 디버깅 도구를 실행합니다.

개발자 패널은 OIDC 통합 문제 해결, 토큰 및 클레임 검사, 고급 아이덴티티 시나리오 테스트를 위한 실시간 인사이트를 제공합니다.

Logto 설정​

실시간 미리보기는 기본적으로 통합된 로그인 경험을 제공하는 숨겨진 데모 앱에 의존합니다. Logto 설정 섹션에서는 인증 요청에 포함된 인증 매개변수를 구성하여 Logto OIDC 엔드포인트가 인증 프로세스를 처리하는 방법을 지시할 수 있습니다. 여기에는 앱 ID 정의, 조직 ID 할당, 특정 스코프 요청 등이 포함됩니다. 이 설정은 LogtoProvider로 LogtoClient를 초기화하여 애플리케이션에 Logto 컨텍스트를 설정하는 것과 유사합니다.

노트:

구성 변경 사항을 저장하는 것을 잊지 마세요. 다음에 실시간 미리보기로 로그인할 때 적용됩니다.

  • 앱 ID: 고유한 앱 ID를 지정하세요. 이는 앱별 로그인 경험, 리소스 보호 정책 테스트에 필수적입니다.
  • 로그인 추가 매개변수: 사용자 정의 로그인 프로세스를 테스트하기 위해 추가 인증 매개변수를 제공합니다. 예를 들어:
  • 프롬프트: 인가 서버가 최종 사용자에게 재인증 및 동의를 요청할지 여부를 지정하기 위해 OIDC 프롬프트 값 (공백으로 구분)을 추가하세요. 정의된 값은 다음과 같습니다:
    • login: 최종 사용자를 재인증하도록 강제합니다.
    • consent: 클라이언트와 정보를 공유하기 전에 사용자 동의를 요구합니다.
    • none: UI가 표시되지 않아야 함을 나타냅니다. 이 옵션은 기존 인증 또는 동의를 확인하는 데 사용됩니다.
  • 스코프: 클레임 요청을 위한 스코프 (공백으로 구분)를 지정하세요. 예를 들어:
    • 사용자 조직 세부 정보를 요청하려면 두 가지 스코프를 사용하세요: urn:logto:scope:organizations urn:logto:scope:organization_roles
    • API 권한을 요청하려면 스코프 이름을 스코프 필드에 제공하고 해당 API 식별자를 아래의 리소스 필드에 입력하세요.
  • 리소스: 애플리케이션이 접근해야 하는 API 리소스 식별자 (공백으로 구분)를 입력하세요. 이 필드는 애플리케이션이 필요한 특정 리소스 액세스 토큰을 요청할 수 있도록 합니다.

리프레시 토큰 부여​

이 섹션에서는 다양한 접근 유형에 대한 리프레시 토큰 방법을 설명합니다:

  • 리소스: API 리소스 액세스 토큰을 리프레시해야 하는 경우 특정 API 식별자 (공백으로 구분)를 입력하세요.
  • 조직 ID: 조직 토큰을 리프레시해야 하는 경우 조직 ID (공백으로 구분)를 입력하세요.

리소스와 조직 ID가 모두 제공되면, 리프레시 요청은 조직 템플릿을 사용한 API 리소스 보호를 지원하는 액세스 토큰을 반환합니다.

노트:

offline_access에 대한 프롬프트 매개변수에 consent를 포함하세요. 리프레시 토큰은 프롬프트에 consent가 포함된 경우에만 발급됩니다.

사용자 정보​

인증 흐름에서 가져온 사용자 데이터를 확인하세요:

  • ID 토큰 클레임 가져오기: at_hash, aud, auth_time, exp, iat, issu 및 추가 사용자 프로필과 같은 ID 토큰에 포함된 모든 클레임을 가져옵니다. 이는 토큰을 검증하고 필요한 사용자 정보를 추출하는 데 유용합니다.
  • 사용자 정보 가져오기: userinfo 엔드포인트를 쿼리하여 사용자 프로필 정보만 가져옵니다.
노트:

Chrome의 개발자 도구 (F12 → 콘솔)를 사용하여 네트워크 요청을 검사하고 토큰 및 클레임을 검토하세요.