## 소개 - [Logto](https://logto.io/)는 고객 ID 인프라를 최소한의 노력으로 구축하기 위한 현대적인 Auth0 대안입니다. 사용자 이름, 이메일, 전화번호, Google 및 GitHub과 같은 인기 있는 소셜 로그인을 포함한 다양한 로그인 방법을 지원합니다. - [Capacitor](https://capacitorjs.com/)는 웹 네이티브 앱을 구축하기 위한 오픈 소스 네이티브 런타임입니다. 이 튜토리얼에서는 Capacitor에서 Logto를 사용하여 인증 흐름을 구축하는 방법을 설명합니다. 이를 통해 크로스 플랫폼으로 손쉽게 로그인 및 회원가입 흐름을 만들 수 있습니다. ## 사전 요구 사항 시작하기 전에 다음이 필요합니다: - Logto 계정. 계정이 없다면 [무료로 가입](https://cloud.logto.io/)할 수 있습니다. - Capacitor 프로젝트. [공식 가이드](https://capacitorjs.com/docs/getting-started)를 따라 하나를 생성할 수 있습니다. ## Logto 애플리케이션 생성하기 시작하려면 'Native' 유형으로 Logto 애플리케이션을 생성하세요. Logto 애플리케이션은 OAuth 2.0 및 OpenID Connect (OIDC) 흐름에서 클라이언트 애플리케이션 역할을 합니다. Logto 애플리케이션을 생성하려면 다음 단계를 따르세요: 1. [Logto Cloud Console](https://cloud.logto.io/)에 로그인합니다. 2. 왼쪽 탐색 바에서 **애플리케이션**을 클릭합니다. 3. **애플리케이션 생성**을 클릭합니다. 4. **Native**를 애플리케이션 유형으로 선택하고 애플리케이션 이름을 입력합니다. 5. **생성**을 클릭합니다. Logto 애플리케이션 생성

Logto 애플리케이션을 생성한 후 리디렉션 URI를 구성합니다. 리디렉션 URI는 인증 흐름 후 사용자에게 다시 앱으로 리디렉션되는 데 사용됩니다. URI가 Capacitor 앱으로 리디렉션되는지 확인하세요, 예를 들어 `com.example.app://callback`. 값은 Capacitor 앱 구성에 따라 다를 수 있습니다. 자세한 내용은 [Capacitor Deep Links](https://capacitorjs.com/docs/guides/deep-links)를 참조하세요. 리디렉션 URI를 업데이트한 후 **변경 사항 저장**을 클릭하는 것을 잊지 마세요. 리디렉션 URI에 대해 확신이 없다면, 지금은 비워두고 나중에 업데이트할 수 있습니다. ## Capacitor 설정하기 이미 Capacitor 프로젝트가 있다고 가정하고, 이 튜토리얼은 프레임워크에 구애받지 않으므로 원하는 UI 프레임워크를 사용하고 코드를 적절히 업데이트할 수 있습니다. ### 종속성 설치 ```bash # 또는 yarn, pnpm npm install @logto/capacitor # 피어 종속성 설치 npm install @capacitor/browser @capacitor/app @capacitor/preferences ``` ### Logto 클라이언트 초기화 ```ts import LogtoClient from '@logto/capacitor'; const logtoClient = new LogtoClient({ endpoint: 'https://your-logto-endpoint', appId: '', }); ``` - `endpoint`는 Logto API 엔드포인트입니다. 내장 가이드나 테넌트 설정의 **도메인** 섹션에서 찾을 수 있습니다. - `appId`는 Logto 애플리케이션 ID입니다. 애플리케이션 세부 정보 페이지에서 찾을 수 있습니다. ### 로그인 버튼 구현 로그인 버튼의 `onClick` 핸들러에 다음 코드를 추가하세요: ```ts const onClick = async () => { await logtoClient.signIn('com.example.app://callback'); console.log(await logtoClient.isAuthenticated()); // true console.log(await logtoClient.getIdTokenClaims()); // { sub: '...', ... } }; ``` `com.example.app://callback`을 Logto 애플리케이션에서 구성한 리디렉션 URI로 바꾸세요. ### 체크포인트: 인증 흐름 트리거 Capacitor 앱을 실행하고 로그인 버튼을 클릭하세요. 브라우저 창이 열리면서 Logto 로그인 페이지로 리디렉션됩니다.

사용자가 인증 흐름을 완료하지 않고 브라우저 창을 닫으면 Capacitor 앱이 `LogtoClientError`를 받습니다. ## 로그아웃 Capacitor는 iOS에서 사파리 뷰 컨트롤러와 Android에서 크롬 커스텀 탭을 활용하기 때문에 인증 상태가 잠시 유지될 수 있습니다. 그러나 때때로 사용자가 즉시 애플리케이션에서 로그아웃하고자 할 수 있습니다. 이 경우 사용자를 로그아웃시키기 위해 `signOut` 메서드를 사용할 수 있습니다: ```ts const onClick = async () => { await logtoClient.signOut(); console.log(await logtoClient.isAuthenticated()); // false }; ``` `signOut` 메서드는 로그아웃 후 리디렉션 URI에 대한 선택적 매개변수를 가집니다. 제공되지 않으면 사용자가 Logto 로그아웃 페이지로 리디렉션됩니다:

사용자는 웹 보기를 닫고 Capacitor 앱으로 돌아가기 위해 "완료"를 클릭해야 합니다. 사용자를 자동으로 Capacitor 앱으로 다시 리디렉션하려면 로그아웃 후 리디렉션 URI를 제공할 수 있습니다: ```ts const onClick = async () => { await logtoClient.signOut('com.example.app://callback/sign-out'); }; ``` 로그아웃 후 리디렉션 URI가 Capacitor 앱으로 리디렉션되는지 확인하고, Logto 콘솔에 로그아웃 후 리디렉션 URI를 추가하는 것을 잊지 마세요: Logto 리디렉션 URI 구성

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

그런 다음 로그아웃 버튼을 클릭하면 Capacitor 앱이 Logto 로그아웃 페이지로 리디렉션됩니다. 설정된 로그아웃 후 리디렉션 URI가 있는 경우 자동으로 Capacitor 앱으로 다시 리디렉션됩니다. 이제 복잡한 코드를 작성하지 않고 Logto Cloud Console에서 인증 흐름을 구성할 수 있습니다. 구성은 모든 클라이언트 애플리케이션에 적용되어 일관된 사용자 경험을 보장합니다. 통합 중에 문제가 발생하면 contact@logto.io로 이메일을 보내거나 [Discord 서버에 가입](https://discord.gg/UEPaF3j5e6)하는 것을 주저하지 마세요! ## 추가 읽을 거리 - [로그인 경험 사용자 정의](https://docs.logto.io/docs/recipes/customize-sie/) - [커넥터 구성](https://docs.logto.io/docs/recipes/configure-connectors/) - [API 보호하기](https://docs.logto.io/docs/recipes/protect-your-api/) Logto 사용해보기