본문으로 건너뛰기

사용자 UI 가져오기

Logto는 사전 구축된 UI 사용자 정의 옵션 외에도 내장된 로그인 경험 인터페이스를 완전히 대체할 수 있는 사용자 UI를 가져올 수 있도록 합니다. 이 기능을 통해 사용자 정의 UI 자산 (HTML, CSS, JavaScript, 이미지 등)을 포함한 zip 파일을 업로드하고, Logto Cloud 서버에 호스팅하여 테넌트 사용자의 로그인 경험으로 사용할 수 있습니다.

노트:

이 기능은 사용자 정의 UI가 단일 페이지 애플리케이션 (SPA) 호환 가능해야 하며, 최적의 성능을 위해 항상 프로덕션 빌드를 사용하는 것이 좋습니다.

Logto 콘솔에서 사용자 정의 UI 기능 탐색하기​

공식 프로젝트로 시작하기​

사용자 정의 로그인 UI를 시작하는 가장 빠른 방법은 Logto 경험 프로젝트를 복제하는 것입니다. 이는 모든 기능과 Logto의 모범 사례를 포함하는 내장된 Logto 로그인 경험 UI입니다. 필요에 맞게 사용자 정의할 수 있습니다.

코드를 확인한 후, 다음 명령어를 실행하여 프로젝트를 빌드하세요:

pnpm install && pnpm build
노트:

전체 Logto 프로젝트는 pnpm 모노레포입니다. 경험 패키지를 독립적으로 실행하려면 (pnpm 없이), package.json의 workspace: 종속성을 특정 버전 번호 (예: ^1.0.0)로 교체하세요.

빌드가 완료되면, 모든 컴파일된 자산이 dist 디렉토리에 있습니다. 그런 다음 dist 디렉토리의 ZIP 아카이브를 생성하세요 - 이 아카이브는 나중에 Logto Cloud에 업로드하는 데 사용됩니다.

사용자 정의 UI 자산 요구 사항​

사용자 정의 UI 자산을 업로드하기 전에 다음 요구 사항을 충족하는지 확인하세요:

  • 업로드 자산은 단일 zip 파일로 패킹되어야 합니다.
  • zip 파일은 루트 디렉토리에 index.html 파일을 포함해야 합니다.
  • zip 파일의 크기는 20MB를 초과해서는 안 됩니다.
  • zip 파일에는 10MB를 초과하는 파일이 포함되어서는 안 됩니다.
  • zip 파일에는 총 200개 이상의 파일이 포함되어서는 안 됩니다.

사용자 정의 UI 자산 업로드하기​

노트:

이 기능을 프로덕션에서 사용할 때는 주의하세요. 사용자의 로그인 경험에 즉시 영향을 미칠 수 있습니다.

  1. 콘솔 > 로그인 경험 > 브랜딩 > 사용자 UI 가져오기

     로 이동합니다.
  2. 이전 단계에서 생성한 zip 파일을 선택하거나 드래그 앤 드롭하여 업로드 과정을 자동으로 시작합니다.
  3. 업로드가 완료되면 변경 사항을 저장하고, 사용자 정의 UI가 즉시 제공됩니다.
  4. 사용자 정의 로그인 UI를 사용할 때 "로그인 미리보기" 창이 비활성화됩니다. 그러나 "라이브 미리보기" 버튼을 클릭하여 새로 열린 브라우저 탭에서 사용자 정의 로그인 페이지를 테스트할 수 있습니다.

사용자 정의 UI 개발하기​

Experience API와 상호작용하기​

사용자 정의 UI는 Experience API와 상호작용하여 로그인, 회원가입, 비밀번호 재설정, 소셜 계정 연결, MFA 활성화 등 다양한 작업을 수행해야 합니다. 사용자 흐름과 구현 세부 사항을 더 잘 이해하려면, 포괄적인 기술 사양과 예제를 제공하는 Experience API 디자인 RFC를 확인하는 것이 좋습니다.

또한, 로그인 경험 API 엔드포인트를 통해 브랜딩 색상, 회사 로고, 파비콘, 비밀번호 정책, 현지화된 언어 구문, 사용자 정의 CSS와 같은 다른 로그인 경험 설정에 접근해야 합니다.

샘플 프로젝트​

사용자 정의 UI를 빠르게 이해하고 구현하는 데 도움이 되는 샘플 프로젝트 모음을 제공합니다. 자세한 내용은 Logto Experience 프로젝트 GitHub 저장소를 확인하세요.

또한, 가장 일반적인 사용 사례를 다루기 위해 더 간단하고 시나리오 기반의 샘플 프로젝트를 제공하기 위해 계속 작업할 것입니다. 앞으로의 업데이트를 기대해 주세요!

로컬 개발 및 디버깅​

로컬 개발 및 디버깅을 위해 Logto Tunnel CLI 도구를 제공합니다:

  • 로컬 머신에서 Logto Cloud 엔드포인트로 Experience API 요청을 프록시합니다.
  • 로컬에서 사용자 정의 UI 구현을 테스트합니다.

이를 통해 사용자는 Logto Cloud에 업로드하기 전에 로컬에서 사용자 정의 UI를 테스트하고 디버그할 수 있습니다.

자세한 내용은 로컬에서 사용자 정의 UI 디버그 및 테스트하기를 참조하세요.

CLI를 사용하여 사용자 정의 UI 자산 업로드하기​

콘솔을 통한 업로드 외에도 Logto CLI를 사용하여 사용자 정의 UI 자산을 업로드할 수 있습니다. 이는 자동화된 배포 워크플로우에 특히 유용합니다.

자세한 내용은 CLI를 사용하여 사용자 정의 UI 자산 업로드하기를 참조하세요.

Logto 내장 로그인 경험으로 복원하기​

Logto의 내장 로그인 경험으로 복원하려면, 사용자 UI 카드에서 삭제 버튼을 클릭하세요. 변경 사항을 저장한 후, 로그인 경험 UI가 Logto의 기본값으로 되돌아갑니다.

RFCS: Experience API

 Experience 샘플 Logto Cloud에 사용자 로그인 UI 가져오기