Polski
  • react
  • react-native
  • expo
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

Budowanie uwierzytelniania Expo (React Native) z Logto

Dowiedz się, jak zbudować przepływ uwierzytelniania użytkownika z Expo (React Native) poprzez integrację z SDK Logto.

Gao
Gao
Founder

Rozpocznij

Wprowadzenie

  • Logto to otwartoźródłowa alternatywa dla Auth0 do budowania infrastruktury tożsamości. Obsługuje różne metody logowania, w tym nazwę użytkownika, e-mail, numer telefonu oraz popularne logowania społecznościowe, takie jak Google i GitHub.
  • Expo (React Native) jest ekosystemem narzędzi, które pomagają tworzyć uniwersalne aplikacje natywne z React, działające na Androidzie, iOS i w sieci.

W tym poradniku pokażemy, jak zbudować przepływ uwierzytelniania użytkownika za pomocą Expo (React Native) integrując Logto SDK. Poradnik używa TypeScript jako języka programowania.

Wymagania wstępne

Zanim zaczniesz, upewnij się, że masz następujące:

Utwórz aplikację Logto

Aby rozpocząć, utwórz aplikację Logto z typem "Native". Wykonaj następujące kroki, aby utworzyć aplikację Logto:

  1. Zaloguj się do Logto Console.
  2. W lewym pasku nawigacyjnym kliknij Aplikacje.
  3. Kliknij Utwórz aplikację.
  4. Na otwartej stronie znajdź sekcję "Native" i zlokalizuj kartę "Expo (React Native)".
  5. Kliknij Rozpocznij budowanie i wprowadź nazwę swojej aplikacji.
  6. Kliknij Utwórz.

Następnie powinieneś zobaczyć interaktywny przewodnik, który poprowadzi Cię przez proces integracji Logto SDK z Twoją aplikacją Expo (React Native). Poniższa treść może być odniesieniem na przyszłość.

Wypróbuj interaktywny przewodnik Logto Cloud

Integracja z SDK Logto

Instalacja

Zainstaluj SDK Logto i jego zewnętrzne zależności za pomocą ulubionego menedżera pakietów:

Pakiet @logto/rn to SDK dla Logto. Pozostałe pakiety to jego zewnętrzne zależności. Nie mogły być wymienione jako zależności bezpośrednie, ponieważ Expo CLI wymaga, aby wszystkie zależności dla modułów natywnych były zainstalowane bezpośrednio w głównym pliku projektu package.json.

Inicjacja dostawcy Logto

Zaimportuj i użyj LogtoProvider, aby zapewnić kontekst Logto:

Implementacja logowania i wylogowania

Przełącz się na stronę szczegółów aplikacji w Logto Console. Dodaj natywny URI przekierowania (na przykład, io.logto://callback), a następnie kliknij "Zapisz".

  • Dla iOS, schemat URI przekierowania właściwie nie ma znaczenia, ponieważ klasa ASWebAuthenticationSession będzie nasłuchiwać URI przekierowania niezależnie od tego, czyjest zarejestrowana.

  • Dla Androida, schemat URI przekierowania musi być wypełniony w pliku app.json Expo, na przykład:

Wracając teraz do swojej aplikacji, możesz użyć hooka useLogto do logowania i wylogowania:

Wyświetlanie informacji o użytkowniku

Aby wyświetlić informacje o użytkowniku, możesz użyć metody getIdTokenClaims():

Punkt kontrolny: Uruchom aplikację

Teraz możesz uruchomić aplikację i spróbować zalogować się/wylogować za pomocą Logto:

  1. Otwórz aplikację w przeglądarce, powinieneś zobaczyć przycisk "Zaloguj się".
  2. Kliknij przycisk "Zaloguj się", a zostaniesz przekierowany na stronę logowania Logto.
  3. Po zalogowaniu powinieneś zostać przekierowany z powrotem do aplikacji i zobaczyć dane użytkownika oraz przycisk "Wyloguj się".
  4. Kliknij przycisk "Wyloguj się", a zostaniesz przekierowany na stronę wylogowania Logto, a następnie przekierowany z powrotem do aplikacji w stanie niezalogowanym.

Jeśli napotkasz jakiekolwiek problemy podczas integracji, nie wahaj się dołączyć do naszego serwera Discord, aby porozmawiać z społecznością i zespołem Logto!

Dalsza lektura

Wypróbuj Logto już dziś