본문으로 건너뛰기

커스텀 UI를 로컬에서 디버그 및 테스트하기

Logto Cloud 사용자라면, Logto에 "나만의 UI"를 쉽게 적용할 수 있도록 지원합니다. Cloud 사용자는 콘솔 > 로그인 & 계정 > 브랜딩 > 나만의 UI 적용에서 커스텀 UI 에셋이 담긴 zip 파일을 업로드할 수 있습니다 (나만의 UI 적용 페이지에서 자세한 내용을 확인하세요).

하지만 이러한 커스텀 UI 페이지를 개발할 때, Logto Cloud에 업로드하기 전에 코드를 로컬에서 테스트하고 디버깅하고 싶을 것입니다. 이 CLI 명령어는 로컬 터널을 설정하여 다음 3가지 엔티티를 연결하는 데 도움을 줍니다: Logto Cloud 인증 엔드포인트, 애플리케이션, 그리고 커스텀 로그인 UI.

왜 이 기능이 필요한가요?​

기본적으로, 애플리케이션에서 "로그인" 버튼을 클릭하면 Logto 엔드포인트에 설정된 로그인 페이지로 이동하게 됩니다. 성공적인 로그인 플로우는 다음과 같이 설명할 수 있습니다:

하지만 이제 직접 커스텀 로그인 UI를 개발하고 있으므로, 로컬에서 실행 중인 커스텀 로그인 UI 페이지로 이동할 수 있는 방법이 필요합니다. 이를 위해서는 애플리케이션에서 나가는 요청을 가로채어 커스텀 로그인 UI 페이지로 리디렉션하는 로컬 터널 서비스가 필요합니다.

또한, 사용자를 인증하고 세션을 관리하기 위해 Logto의 Experience API와 상호작용해야 합니다. 이 서비스는 Experience API 요청을 Logto Cloud로 전달하여 CORS 문제를 방지하는 데도 도움을 줍니다.

아래 시퀀스 다이어그램은 커스텀 UI와 터널 서비스가 적용된 성공적인 "로그인" 플로우를 보여줍니다:

터널 서비스가 있으면, 커스텀 로그인 UI를 로컬에서 개발 및 테스트할 수 있으며, 변경할 때마다 Logto Cloud에 에셋을 업로드할 필요가 없습니다.

사용 방법​

1단계: 명령어 실행​

Cloud 테넌트 ID가 foobar이고, 로컬 개발 서버에서 커스텀 로그인 페이지가 http://localhost:4000에 실행 중이라면, 다음과 같이 명령어를 실행할 수 있습니다:

logto-tunnel -p 9000 --experience-uri http://localhost:4000/ --endpoint https://foobar.logto.app/

Logto에서 커스텀 도메인을 설정한 경우에도 동일하게 동작합니다:

logto-tunnel -p 9000 --experience-uri http://localhost:4000/ --endpoint https://your.custom.domain/

또한, 개발 서버를 먼저 실행하지 않아도 정적 html 에셋을 지원합니다. 지정한 경로에 index.html이 있는지만 확인하세요.

logto-tunnel -p 9000 --experience-path /path/to/your/static/files --endpoint https://foobar.logto.app/

2단계: 애플리케이션에서 엔드포인트 URI 수정​

마지막으로, 애플리케이션을 실행하고 Logto 엔드포인트를 터널 서비스 주소인 http://localhost:9000/로 설정하세요.

React 애플리케이션 예시:

import { LogtoProvider, LogtoConfig } from '@logto/react';

const config: LogtoConfig = {
  // endpoint: 'https://foobar.logto.app/', // 기존 Logto Cloud 엔드포인트
  endpoint: 'http://localhost:9000/', // 터널 서비스 주소
  appId: '<your-application-id>',
};

const App = () => (
  <LogtoProvider config={config}>
    <YourAppContent />
  </LogtoProvider>
);

소셜 로그인을 사용하는 경우, 소셜 제공자 설정에서 리디렉션 URI도 터널 서비스 주소로 변경해야 합니다.

http://localhost:9000/callback/<connector-id>

모든 설정이 올바르게 완료되면, 애플리케이션에서 "로그인" 버튼을 클릭할 때 Logto의 기본 UI 대신 커스텀 로그인 페이지로 이동하며, Logto Experience API와 추가 상호작용이 가능한 유효한 세션(쿠키)도 함께 제공됩니다.

즐거운 코딩 되세요!

GitHub Actions 워크플로우로 커스텀 로그인 UI 배포 자동화하기