한국어
  • auth
  • authentication
  • identity
  • integration
  • capacitor
  • capacitorjs
  • oidc
  • oauth
  • cross-platform

CapacitorJS 인증을 Logto로 구축하기

이 튜토리얼에서는 Capacitor에서 Logto를 사용하여 인증 흐름을 구축하는 방법을 설명합니다. 이를 통해 크로스 플랫폼으로 손쉽게 로그인 및 회원가입 흐름을 만들 수 있습니다.

Gao
Gao
Founder

소개

  • Logto는 고객 ID 인프라를 최소한의 노력으로 구축하기 위한 현대적인 Auth0 대안입니다. 사용자 이름, 이메일, 전화번호, Google 및 GitHub과 같은 인기 있는 소셜 로그인을 포함한 다양한 로그인 방법을 지원합니다.
  • Capacitor는 웹 네이티브 앱을 구축하기 위한 오픈 소스 네이티브 런타임입니다.

이 튜토리얼에서는 Capacitor에서 Logto를 사용하여 인증 흐름을 구축하는 방법을 설명합니다. 이를 통해 크로스 플랫폼으로 손쉽게 로그인 및 회원가입 흐름을 만들 수 있습니다.

사전 요구 사항

시작하기 전에 다음이 필요합니다:

  • Logto 계정. 계정이 없다면 무료로 가입할 수 있습니다.
  • Capacitor 프로젝트. 공식 가이드를 따라 하나를 생성할 수 있습니다.

Logto 애플리케이션 생성하기

시작하려면 'Native' 유형으로 Logto 애플리케이션을 생성하세요. Logto 애플리케이션은 OAuth 2.0 및 OpenID Connect (OIDC) 흐름에서 클라이언트 애플리케이션 역할을 합니다. Logto 애플리케이션을 생성하려면 다음 단계를 따르세요:

  1. Logto Cloud Console에 로그인합니다.
  2. 왼쪽 탐색 바에서 애플리케이션을 클릭합니다.
  3. 애플리케이션 생성을 클릭합니다.
  4. Native를 애플리케이션 유형으로 선택하고 애플리케이션 이름을 입력합니다.
  5. 생성을 클릭합니다.
Logto 애플리케이션 생성

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 로그인 페이지로 리디렉션됩니다.

Logto 로그인 페이지

로그아웃

Capacitor는 iOS에서 사파리 뷰 컨트롤러와 Android에서 크롬 커스텀 탭을 활용하기 때문에 인증 상태가 잠시 유지될 수 있습니다. 그러나 때때로 사용자가 즉시 애플리케이션에서 로그아웃하고자 할 수 있습니다. 이 경우 사용자를 로그아웃시키기 위해 signOut 메서드를 사용할 수 있습니다:

signOut 메서드는 로그아웃 후 리디렉션 URI에 대한 선택적 매개변수를 가집니다. 제공되지 않으면 사용자가 Logto 로그아웃 페이지로 리디렉션됩니다:

Logto 로그아웃 페이지

사용자는 웹 보기를 닫고 Capacitor 앱으로 돌아가기 위해 "완료"를 클릭해야 합니다. 사용자를 자동으로 Capacitor 앱으로 다시 리디렉션하려면 로그아웃 후 리디렉션 URI를 제공할 수 있습니다:

로그아웃 후 리디렉션 URI가 Capacitor 앱으로 리디렉션되는지 확인하고, Logto 콘솔에 로그아웃 후 리디렉션 URI를 추가하는 것을 잊지 마세요:

Logto 리디렉션 URI 구성

체크포인트: 인증 흐름 완료

Capacitor 앱을 다시 실행하고 로그인 버튼을 클릭하세요. 모든 것이 잘 진행되면 인증 흐름이 완료되었을 때 Capacitor 앱이 로그인 결과를 받아 콘솔에 사용자 클레임을 출력합니다.

Capacitor iOS 앱

그런 다음 로그아웃 버튼을 클릭하면 Capacitor 앱이 Logto 로그아웃 페이지로 리디렉션됩니다. 설정된 로그아웃 후 리디렉션 URI가 있는 경우 자동으로 Capacitor 앱으로 다시 리디렉션됩니다.

이제 복잡한 코드를 작성하지 않고 Logto Cloud Console에서 인증 흐름을 구성할 수 있습니다. 구성은 모든 클라이언트 애플리케이션에 적용되어 일관된 사용자 경험을 보장합니다.

통합 중에 문제가 발생하면 [email protected]로 이메일을 보내거나 Discord 서버에 가입하는 것을 주저하지 마세요!

추가 읽을 거리

Logto 사용해보기