본문으로 건너뛰기

라이브 미리보기로 사용자 경험 테스트하기

라이브 미리보기 기능을 사용하면 로그인 경험 설정을 편리하게 테스트할 수 있습니다.

라이브 미리보기​

콘솔 > 로그인 경험으로 이동한 후, 우측 상단의 "라이브 미리보기" 버튼을 클릭하면 Logto의 기능을 완전히 시연하는 새로운 브라우저 탭이 열립니다. 이 데모는 로그인 및 회원가입 플로우에 대한 Logto의 경험 디자인 방식을 보여줍니다. 매우 높은 수준의 커스터마이징이 가능하며, 애플리케이션에 손쉽게 통합할 수 있습니다.

노트:

이 미리보기에서는 먼저 계정을 생성하여 경험을 테스트해야 합니다. 이후 콘솔 > 사용자 관리에서 이 계정을 관리할 수 있습니다.

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

개발자 패널​

Logto의 라이브 미리보기를 통해 성공적으로 로그인하면, 두 가지 주요 작업이 포함된 대시보드로 이동합니다:

  • 라이브 미리보기 로그아웃 버튼: 현재 세션을 종료합니다.
  • 개발자 패널 열기 버튼: 인증 (Authentication) 플로우를 분석할 수 있는 디버깅 도구를 실행합니다.

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

Logto 설정(Logto Config)​

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

노트:

설정 변경 사항을 반드시 저장하세요. 변경 사항은 다음 번 라이브 미리보기 로그인 시 적용됩니다.

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

리프레시 토큰(Refresh token) 그랜트​

이 섹션에서는 다양한 접근 유형에 대해 리프레시 토큰(Refresh token)을 갱신하는 방법을 설명합니다.

  • 리소스(Resource): API 리소스 액세스 토큰을 갱신해야 하는 경우, 해당 API 식별자(공백으로 구분)를 입력하세요.
  • 조직 ID: 조직 토큰을 갱신해야 하는 경우, 조직 ID(공백으로 구분)를 입력하세요.

리프레시 토큰(Refresh token) 그랜트 사용 방법에 대한 자세한 내용은 인가 (Authorization)를 참고하세요.

노트:

offline_access를 위해 프롬프트 파라미터에 consent를 포함하세요. 프롬프트에 consent가 포함되어 있을 때만 리프레시 토큰(Refresh token)이 발급됩니다.

사용자 정보(User info)​

인증 (Authentication) 플로우에서 가져온 사용자 데이터를 확인하세요:

  • ID 토큰(ID token) 클레임(Claims) 가져오기: ID 토큰에 포함된 모든 클레임(예: at_hash, aud, auth_time, exp, iat, issu 및 추가 사용자 프로필)을 조회합니다. 토큰 유효성 검사 및 필요한 사용자 정보 추출에 유용합니다.
  • 사용자 정보 가져오기: userinfo 엔드포인트를 쿼리하여 사용자 프로필 정보만 조회합니다.
노트:

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