## Wprowadzenie - [Logto](https://logto.io/) 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](https://capacitorjs.com/) 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](https://cloud.logto.io/). - Projekt w Capacitor. Możesz skorzystać z [oficjalnego przewodnika](https://capacitorjs.com/docs/getting-started), 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: 1. Zaloguj się do [Logto Cloud Console](https://cloud.logto.io/). 2. W lewym pasku nawigacyjnym kliknij **Aplikacje**. 3. Kliknij **Utwórz aplikację**. 4. Wybierz **Native** jako typ aplikacji i wpisz jej nazwę. 5. Kliknij **Utwórz**. Utwórz aplikację Logto

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](https://capacitorjs.com/docs/guides/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 ```bash # lub yarn, pnpm npm install @logto/capacitor # Zainstaluj zależności peera npm install @capacitor/browser @capacitor/app @capacitor/preferences ``` ### Inicjalizacja klienta Logto ```ts import LogtoClient from '@logto/capacitor'; const logtoClient = new LogtoClient({ endpoint: 'https://your-logto-endpoint', appId: '', }); ``` - `endpoint` to punkt końcowy API Logto. Możesz go znaleźć w przewodniku wbudowanym lub w sekcji **Domeny** w ustawieniach dzierżawcy. - `appId` to 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: ```ts const onClick = async () => { await logtoClient.signIn('com.example.app://callback'); console.log(await logtoClient.isAuthenticated()); // true console.log(await logtoClient.getIdTokenClaims()); // { sub: '...', ... } }; ``` 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. Strona logowania Logto

Jeśli użytkownik zamknie okno przeglądarki bez ukończenia procesu uwierzytelniania, aplikacja Capacitor otrzyma błąd `LogtoClientError`. ## 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: ```ts const onClick = async () => { await logtoClient.signOut(); console.log(await logtoClient.isAuthenticated()); // false }; ``` Metoda `signOut` ma opcjonalny parametr dla przekierowania URI po wylogowaniu. Jeśli nie zostanie podany, użytkownik zostanie przekierowany na stronę wylogowania Logto: Strona 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: ```ts const onClick = async () => { await logtoClient.signOut('com.example.app://callback/sign-out'); }; ``` Upewnij się, że URI przekierowania po wylogowaniu przekierowuje do aplikacji Capacitor i pamiętaj, aby dodać URI przekierowania po wylogowaniu do Logto Console: Konfiguracja URI przekierowania Logto

## 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. Aplikacja Capacitor na iOS

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: contact@logto.io lub [dołącz do naszego serwera Discord](https://discord.gg/UEPaF3j5e6)! ## Dalsza lektura - [Dostosuj doświadczenie logowania](https://docs.logto.io/docs/recipes/customize-sie/) - [Konfiguracja złącz](https://docs.logto.io/docs/recipes/configure-connectors/) - [Ochrona Twojego API](https://docs.logto.io/docs/recipes/protect-your-api/) Wypróbuj Logto Dzisiaj