Expo(React Native) 인증을 Logto로 구축하기
Logto SDK를 통합하여 Expo (React Native)로 사용자 인증 흐름을 구축하는 방법을 배워보세요.
Founder
시작하기
소개
- Logto는 아이덴티티 인프라를 구축하기 위한 오픈 소스 Auth0 대안입니다. 사용자 이름, 이메일, 전화번호 및 Google, GitHub와 같은 인기 있는 소셜 로그인 방법을 포함한 다양한 로그인 방법을 지원합니다.
- Expo (React Native) React를 사용하여 Android, iOS 및 웹에서 실행되는 범용 네이티브 앱을 만들 수 있도록 도와주는 도구의 생태계입니다.
이 튜토리얼에서는 Logto SDK를 통합하여 Expo (React Native)로 사용자 인증 흐름을 구축하는 방법을 보여줍니다. 튜토리얼에서는 프로그래밍 언어로 TypeScript를 사용합니다.
사전 요구 사항
시작하기 전에 다음을 확인하십시오:
- Logto 계정. 계정이 없으면 무료로 가입할 수 있습니다.
- An Expo (React Native) 개발 환경 및 프로젝트.
Logto 애플리케이션 만들기
시작하려면 "Native" 유형의 Logto 애플리케이션을 만드십시오. Logto 애플리케이션을 만드는 단계는 다음과 같습니다:
- Logto 콘솔에 로그인합니다.
- 왼쪽 탐색 모음에서 애플리케이션을 클릭합니다.
- 애플리케이션 생성을 클릭합니다.
- 열린 페이지에서 "Native" 섹션을 찾아 "Expo (React Native)" 카드를 찾습니다.
- 구축 시작을 클릭하고 애플리케이션 이름을 입력합니다.
- 생성을 클릭합니다.
그런 다음 Expo (React Native) 애플리케이션과 Logto SDK를 통합하는 과정을 안내하는 대화형 가이드를 볼 수 있습니다. 다음 내용은 향후 참고 자료로 사용할 수 있습니다.
Logto SDK 통합하기
설치
Logto SDK와 피어 의존성을 선호하는 패키지 관리자를 통해 설치하세요:
@logto/rn 패키지는 Logto의 SDK입니다. 나머지 패키지들은 피어 의존성입니다. Expo CLI는 네이티브 모듈의 모든 의존성이 루트 프로젝트의 package.json에 직접 설치되어야 하기 때문에 직접 의존성으로 나열될 수 없습니다.
Logto 제공자 초기화
LogtoProvider를 가져오고 사용하여 Logto 컨텍스트를 제공합니다:
로그인 및 로그아웃 구현
Logto 콘솔의 애플리케이션 세부정보 페이지로 전환하세요. 네이티브 리디렉션 URI를 추가하고 (예: io.logto://callback), "저장"을 클릭합니다.
-
iOS의 경우,
ASWebAuthenticationSession클래스가 등록 여부와 관계없이 리디렉션 URI를 들으므로 리디렉션 URI 스킴은 실제로 중요하지 않습니다. -
Android의 경우, 리디렉션 URI 스킴은 Expo의
app.json파일에 입력되어야합니다, 예를 들어:
이제 앱으로 돌아가 useLogto 훅을 사용하여 로그인 및 로그아웃 할 수 있습니다:
사용자 정보 표시
사용자의 정보를 표시하려면 getIdTokenClaims() 메서드를 사용할 수 있습니다:
체크포인트: 애플리케이션 실행
이제 애플리케이션을 실행하고 Logto로 로그인/로그아웃을 시도할 수 있습니다:
- 브라우저에서 애플리케이션을 열면 "로그인" 버튼이 표 시될 것입니다.
- "로그인" 버튼을 클릭하면 Logto 로그인 페이지로 리디렉션됩니다.
- 로그인한 후 애플리케이션으로 다시 리디렉션되며 사용자 데이터와 "로그아웃" 버튼이 표시될 것입니다.
- "로그아웃" 버튼을 클릭하면 Logto 로그아웃 페이지로 리디렉션된 다음 로그인되지 않은 상태로 애플리케이션으로 다시 리디렉션됩니다.
통합 중 문제가 발생하면 Discord 서버에 가입하여 커뮤니티 및 Logto 팀과 채팅하십시오!