CapacitorJS 인증을 Logto로 구축하기
이 튜토리얼에서는 Capacitor에서 Logto를 사용하여 인증 흐름을 구축하는 방법을 설명합니다. 이를 통해 크로스 플랫폼으로 손쉽게 로그인 및 회원가입 흐름을 만들 수 있습니다.
Founder
소개
- Logto는 고객 ID 인프라를 최소한의 노력으로 구축하기 위한 현대적인 Auth0 대안입니다. 사용자 이름, 이메일, 전화번호, Google 및 GitHub과 같은 인기 있는 소셜 로그인을 포함한 다양한 로그인 방법을 지원합니다.
- Capacitor는 웹 네이티브 앱을 구축하기 위한 오픈 소스 네이티브 런타임입니다.
이 튜토리얼에서는 Capacitor에서 Logto를 사용하여 인증 흐름을 구축하는 방법을 설명합니다. 이를 통해 크로스 플랫폼으로 손쉽게 로그인 및 회원가입 흐름을 만들 수 있습니다.
사전 요구 사항
시작하기 전에 다음이 필요합니다:
Logto 애플리케이션 생성하기
시작하려면 'Native' 유형으로 Logto 애플리케이션을 생성하세요. Logto 애플리케이션은 OAuth 2.0 및 OpenID Connect (OIDC) 흐름에서 클라이언트 애플리케이션 역할을 합니다. Logto 애플리케이션을 생성하려면 다음 단계를 따르세요:
- Logto Cloud Console에 로그인합니다.
- 왼쪽 탐색 바에서 애플리케이션을 클릭합니다.
- 애플리케이션 생성을 클릭합니다.
- Native를 애플리케이션 유형으로 선택하고 애플리케이션 이름을 입력합니다.
- 생성을 클릭합니다.
Logto 애플리케이션을 생성한 후 리디렉션 URI를 구성합니다. 리디렉션 URI는 인증 흐름 후 사용자에게 다시 앱으로 리디렉션되는 데 사용됩니다.
URI가 Capacitor 앱으로 리디렉션되는지 확인하세요, 예를 들어 com.example.app://callback. 값은 Capacitor 앱 구성에 따라 다를 수 있습니다. 자세한 내용은 Capacitor Deep Links를 참조하세요.
리디렉션 URI를 업데이트한 후 변경 사항 저장을 클릭하는 것을 잊지 마세요.
리디렉션 URI에 대해 확신이 없다면, 지금은 비워두고 나중에 업데이트할 수 있습니다.
Capacitor 설정하기
이미 Capacitor 프로젝트가 있다고 가정하고, 이 튜토리얼은 프레임워크에 구애받지 않으므로 원하는 UI 프레임워크를 사용하고 코드를 적절히 업데이트할 수 있습니다.
종속성 설치
Logto 클라이언트 초기화
endpoint는 Logto API 엔드포인트입니다. 내장 가이드나 테넌트 설정의 도메인 섹션에서 찾을 수 있습니다.appId는 Logto 애플리케이션 ID입니다. 애플리케이션 세부 정보 페이지에서 찾을 수 있습니다.
로그인 버튼 구현
로그인 버튼의 onClick 핸들러에 다음 코드를 추가하세요:
com.example.app://callback을 Logto 애플리케이션에서 구성한 리디렉션 URI로 바꾸세요.
체크포인트: 인증 흐름 트리거
Capacitor 앱을 실행하고 로그인 버튼을 클릭하세요. 브라우저 창이 열리면서 Logto 로그인 페이지로 리디렉션됩니다.
로그아웃
Capacitor는 iOS에서 사파리 뷰 컨트롤러와 Android에서 크롬 커스텀 탭을 활용하기 때문에 인증 상태가 잠시 유지될 수 있습니다. 그러나 때때로 사용자가 즉시 애플리케이션에서 로그아웃하고자 할 수 있습니다. 이 경우 사용자를 로그아웃시키기 위해 signOut 메서드를 사용할 수 있습니다:
signOut 메서드는 로그아웃 후 리디렉션 URI에 대한 선택적 매개변수를 가집니다. 제공되지 않으면 사용자가 Logto 로그아웃 페이지로 리디렉션됩니다:
사용자는 웹 보기를 닫고 Capacitor 앱으로 돌아가기 위해 "완료"를 클릭해야 합니다. 사용자를 자동으로 Capacitor 앱으로 다시 리디렉션하려면 로그아웃 후 리디렉션 URI를 제공할 수 있습니다:
로그아웃 후 리디렉션 URI가 Capacitor 앱으로 리디렉션되는지 확인하고, Logto 콘솔에 로그아웃 후 리디렉션 URI를 추가하는 것을 잊지 마세요:
체크포인트: 인증 흐름 완료
Capacitor 앱을 다시 실행하고 로그인 버튼을 클릭하세요. 모든 것이 잘 진행되면 인증 흐름이 완료되었을 때 Capacitor 앱이 로그인 결과를 받아 콘솔에 사용자 클레임을 출력합니다.
그런 다음 로그아웃 버튼을 클릭하면 Capacitor 앱이 Logto 로그아웃 페이지로 리디렉션됩니다. 설정된 로그아웃 후 리디렉션 URI가 있는 경우 자동으로 Capacitor 앱으로 다시 리디렉션됩니다.
이제 복잡한 코드를 작성하지 않고 Logto Cloud Console에서 인증 흐름을 구성할 수 있습니다. 구성은 모든 클라이언트 애플리케이션에 적용되어 일관된 사용자 경험을 보장합니다.
통합 중에 문제가 발생하면 [email protected]로 이메일을 보내거나 Discord 서버에 가입하는 것을 주저하지 마세요!