Stwórz uwierzytelnianie CapacitorJS z Logto
W tym samouczku pokażemy, jak zbudować proces uwierzytelniania z Logto w Capacitor. Umożliwi to Ci łatwe tworzenie przepływów logowania i rejestracji na różnych platformach.
Founder
Wprowadzenie
- Logto to nowoczesna alternatywa dla Auth0, umożliwiająca budowanie infrastruktury tożsamości klientów przy minimalnym wysiłku. Wspiera różne metody logowania, w tym logowanie za pomocą nazwy użytkownika, e-maila, numeru telefonu oraz popularne logowania społecznościowe, takie jak Google i GitHub.
- Capacitor to otwartoźródłowy natywny runtime do budowania aplikacji Web Native.
W tym samouczku pokażemy, jak zbudować proces uwierzytelniania z Logto w Capacitor. Umożliwi to Ci łatwe tworzenie przepływów logowania i rejestracji na różnych platformach.
Wymagania wstępne
Zanim zaczniesz, upewnij się, że masz:
- Konto w Logto. Jeśli go nie masz, możesz zarejestrować się za darmo.
- Projekt w Capacitor. Możesz skorzystać z oficjalnego przewodnika, aby go stworzyć.
Stwórz aplikację Logto
Aby rozpocząć, stwórz aplikację Logto typu „Native”. Aplikacje Logto służą jako aplikacje klienckie w przepływach OAuth 2.0 i OpenID Connect (OIDC). Wykonaj następujące kroki, aby stworzyć aplikację Logto:
- Zaloguj się do Logto Cloud Console.
- W lewym pasku nawigacyjnym kliknij Aplikacje.
- Kliknij Utwórz aplikację.
- Wybierz Native jako typ aplikacji i wpisz jej nazwę.
- Kliknij Utwórz.
Po utworzeniu aplikacji Logto, skonfiguruj przekierowanie URI. URI przekierowania jest używane do przenoszenia użytkownika z powrotem do Twojej aplikacji po zakończeniu procesu uwierzytelniania.
Upewnij się, że URI przekierowuje do aplikacji Capacitor, na przykład com.example.app://callback. Wartość może się różnić w zależności od konfiguracji Twojej aplikacji Capacitor. Więcej informacji znajdziesz w Capacitor Deep Links.
Pamiętaj o kliknięciu Zapisz zmiany po zaktualizowaniu URI przekierowania.
Jeśli nie jesteś pewien co do URI przekierowania, możesz na razie pozostawić je puste i zaktualizować później.
Konfiguracja Capacitor
Zakładając, że masz już projekt Capacitor, ten samouczek jest neutralny pod względem frameworku, więc możesz używać dowolnego preferowanego frameworka UI i odpowiednio aktualizować kod.
Instalacja zależności
Inicjalizacja klienta Logto
endpointto punkt końcowy API Logto. Możesz go znaleźć w przewodniku wbudowanym lub w sekcji Domeny w ustawieniach dzierżawcy.appIdto identyfikator aplikacji Logto. Możesz go znaleźć na stronie szczegółów aplikacji.
Implementacja przycisku logowania
Dodaj poniższy kod do obsługi kliknięcia przycisku logowania:
Zastąp com.example.app://callback odpowiednim URI przekierowania skonfigurowanym w aplikacji Logto.
Punkt kontrolny: Uruchomienie procesu uwierzytelniania
Uruchom aplikację Capacitor i kliknij przycisk logowania. Otworzy się okno przeglądarki, przekierowując do strony logowania Logto.
Wylogowanie
Ponieważ Capacitor korzysta z Safari View Controller na iOS oraz Chrome Custom Tabs na Android, stan uwierzytelniania może być przechowywany przez pewien czas. Jednakże czasami użytkownik może chcieć natychmiast wylogować się z aplikacji. W takim przypadku możemy użyć metody signOut, aby wylogować użytkownika:
Metoda signOut ma opcjonalny parametr dla przekierowania URI po wylogowaniu. Jeśli nie zostanie podany, użytkownik zostanie przekierowany na stronę wylogowania Logto:
Użytkownik musi kliknąć "Gotowe", aby zamknąć widok webowy i wrócić do aplikacji Capacitor. Jeśli chcesz automatycznie przekierować użytkownika z powrotem do aplikacji Capacitor, możesz podać URI przekierowania po wylogowaniu:
Upewnij się, że URI przekierowania po wylogowaniu przekierowuje do aplikacji Capacitor i pamiętaj, aby dodać URI przekierowania po wylogowaniu do Logto Console:
Punkt kontrolny: Ukończenie procesu uwierzytelniania
Ponownie uruchom aplikację Capacitor i kliknij przycisk logowania. Jeśli wszystko poszło dobrze, po ukończeniu procesu uwierzytelniania aplikacja Capacitor otrzyma wynik logowania i wyświetli oświadczenia użytkownika w konsoli.
Następnie kliknij przycisk wylogowania, a aplikacja Capacitor zostanie przekierowana do strony wylogowania Logto. Automatycznie przekieruje z powrotem do aplikacji Capacitor, jeśli skonfigurowano URI przekierowania po wylogowaniu.
Teraz możesz skonfigurować proces uwierzytelniania w Logto Cloud Console bez pisania skomplikowanego kodu. Konfiguracja będzie miała zastosowanie do wszystkich aplikacji klienckich, zapewniając spójne doświadczenia użytkownika.
Jeśli napotkasz jakiekolwiek problemy podczas integracji, nie wahaj się skontaktować się z nami za pomocą e-maila: [email protected] lub dołącz do naszego serwera Discord!