한국어

    로그토 클라우드에 나만의 로그인 UI 가져오기

    이 튜토리얼은 로그토 클라우드에 나만의 맞춤형 로그인 UI를 생성하고 배포하는 과정을 안내합니다.

    Charles
    Charles
    Developer

    배경

    로그토는 모든 로그토 기능을 포괄하는 기본 제공 로그인 경험 UI를 제공합니다. 여기에는 로그인, 회원가입, 비밀번호 복구, 싱글 사인온(SSO) 등이 포함됩니다. 사용자는 "맞춤 CSS" 기능을 사용하여 로그인 경험 UI의 모양과 느낌을 사용자 지정할 수도 있습니다.

    그러나 일부 사용자는 자사의 브랜드 및 특정 비즈니스 요구 사항에 맞춰 로그인 경험(UI 및 인증 흐름)을 깊이 맞춤화하고 싶어합니다. 여러분의 의견을 들었습니다! 그리고 "나만의 UI 가져오기" 기능이 이제 로그토 클라우드에서 사용할 수 있게 되었다는 소식을 전하게 되어 기쁩니다.

    이 튜토리얼에서는 로그토 클라우드에 나만의 맞춤형 로그인 UI를 생성하고 배포하는 단계를 안내합니다.

    사전 요구 사항

    시작하기 전에 다음을 준비하세요:

    단순화를 위해 다음 단계에서는 클래식 "사용자 이름 & 비밀번호" 로그인 방식을 사용합니다. 로그토 콘솔에서 로그인 방식을 변경하는 것을 잊지 마세요.

    사용자 이름 비밀번호 로그인

    나만의 맞춤 로그인 UI 만들기

    로그인 UI의 최소 요구 사항은 index.html 파일을 갖추는 것입니다. 여기에는 최소한 사용자 이름 입력, 비밀번호 입력 및 제출 버튼이 포함된 로그인 폼이 있습니다. ChatGPT를 사용하여 샘플 HTML을 생성했으며, 여기에는 이 핑크색 사랑스러운 로그인 페이지가 있습니다.

    맞춤 로그인 페이지

    단순화를 위해 CSS 스타일은 생략했으며, HTML은 다음과 같이 간단합니다:

    또한, Create React App, Next.js 또는 Vue CLI와 같은 즐겨 사용하는 프론트엔드 프레임워크의 보일러플레이트로 시작할 수도 있습니다.

    로그토는 오픈 소스이므로 또 다른 추천 방법은 로그토 경험 프로젝트를 클론하고, 필요에 맞게 코드를 수정하는 것입니다. 이는 React와 TypeScript로 작성된 로그토 내장 로그인 경험 UI의 전체 기능입니다.

    로그토 터널 CLI 설정하기

    로그토 터널 CLI는 HTML 페이지를 서비스할 뿐만 아니라, 로컬 개발 환경에서 로그토 경험 API와 상호 작용할 수 있게 해주는 도구입니다.

    당신의 index.html 페이지가 /path/to/your/custom-ui에 위치해 있으며, 로그토 테넌트 ID가 foobar인 경우, 다음과 같은 방식으로 명령을 실행할 수 있습니다:

    또는, 내장 개발 서버가 있는 UI 프레임워크를 사용하고 있으며, 페이지가 http://localhost:4000에서 제공되고 있는 경우, 다음과 같은 방식으로 명령을 실행할 수 있습니다:

    명령을 실행하면 터널 서비스가 로컬 머신 http://localhost:9000/에서 시작됩니다.

    애플리케이션에서 로그인 시작하기

    이전에 생성한 애플리케이션으로 이동하여 로그토 SDK 구성에서 로그토 엔드포인트를 https://foobar.logto.app/에서 http://localhost:9000/으로 변경합니다.

    React 샘플 프로젝트를 예로 들어보겠습니다:

    애플리케이션에서 "로그인" 버튼을 클릭하세요. 내장 로그토 로그인 UI를 보는 대신 나만의 맞춤 로그인 페이지로 리디렉션됩니다.

    로그토 경험 API와 상호 작용하기

    이 단계에서는 맞춤형 UI에서 로그토 경험 API와 상호 작용합니다. 먼저 script.js 파일을 생성하고 index.html에 참조를 추가합니다.

    script.js 파일에 다음 코드를 넣으세요.

    이 스크립트는 다음 API의 도움으로 사용자 이름과 비밀번호 로그인 흐름을 완료합니다:

    • PUT /api/experience - 로그인 상호작용 시작하기
    • POST /api/experience/verification/password - 사용자 이름과 비밀번호 확인
    • POST /api/experience/identification - 현재 상호작용에 대해 사용자 식별
    • POST /api/experience/submit - 로그인 상호작용 제출하기

    더 많은 세부사항은 로그토 경험 API 문서를 참조하세요.

    맞춤 로그인 페이지 테스트

    1. 애플리케이션으로 이동하여 "로그인" 버튼을 클릭하세요.
    2. http://localhost:9000/에서 나만의 맞춤 로그인 페이지로 리디렉션됩니다.
    3. 사용자 이름과 비밀번호를 입력하고, "제출" 버튼을 클릭하세요.
    4. 모든 것이 올바르게 설정되었다면, 인증된 사용자 정보와 함께 애플리케이션으로 다시 리디렉션됩니다.

    나만의 맞춤 로그인 UI를 로그토 클라우드에 배포

    로컬에서 맞춤형 로그인 UI 개발 및 테스트를 완료한 후, 로그토 클라우드에 배포할 수 있습니다. 맞춤형 UI 폴더의 zip 파일을 만들고 로그토 콘솔의 "맞춤 UI" 섹션에 업로드하세요.

    맞춤 UI 업로드

    업로드 후 변경 사항을 저장하면 맞춤형 로그인 UI가 로그토 클라우드 테넌트에 활성화되어 내장 로그토 로그인 경험을 대체합니다.

    맞춤 UI 활성화

    마지막으로 애플리케이션으로 돌아가서 엔드포인트 URI를 로그토 클라우드 엔드포인트인 https://foobar.logto.app/로 다시 변경하세요. 가상 터널 서비스를 중지할 수 있으며, 애플리케이션이 이제 온라인에 호스팅된 맞춤 UI와 직접 작동해야 합니다.

    결론

    이 튜토리얼에서는 나만의 맞춤 로그인 UI를 로그토 클라우드에 구현하고 배포하는 과정을 안내했습니다.

    이 기능을 사용하여 로그인 UI와 인증 흐름을 깊이 맞춤화하여 브랜드 및 특정 비즈니스 요구 사항에 맞출 수 있습니다.

    코딩을 즐기세요! 🚀

    Logto Cloud를 무료로 사용해보세요