Uzyskaj uwierzytelnienie SvelteKit z Logto
Dowiedz się, jak zbudować przepływ uwierzytelniania użytkowników za pomocą SvelteKit, integrując SDK Logto.
Founder
Zacznij
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.
- SvelteKit to framework do szybkiego tworzenia solidnych, wydajnych aplikacji internetowych z użyciem Svelte.
W tym poradniku pokażemy, jak zbudować przepływ uwierzytelniania użytkownika za pomocą SvelteKit integrując Logto SDK. Poradnik używa TypeScript jako języka programowania.
Wymagania wstępne
Zanim zaczniesz, upewnij się, że masz następujące:
- Konto Logto. Jeśli go nie masz, możesz zarejestrować się za darmo.
- Środowisko programistyczne A SvelteKit i projekt.
Utwórz aplikację Logto
Aby rozpocząć, utwórz aplikację Logto z typem "Tradycyjny internet". Wykonaj następujące kroki, aby utworzyć aplikację Logto:
- Zaloguj się do Logto Console.
- W lewym pasku nawigacyjnym kliknij Aplikacje.
- Kliknij Utwórz aplikację.
- Na otwartej stronie znajdź sekcję "Tradycyjny internet" i zlokalizuj kartę "SvelteKit".
- Kliknij Rozpocznij budowanie i wprowadź nazwę swojej aplikacji.
- Kliknij Utwórz.
Następnie powinieneś zobaczyć interaktywny przewodnik, który poprowadzi Cię przez proces integracji Logto SDK z Twoją aplikacją SvelteKit. Poniższa treść może być odniesieniem na przyszłość.
Zintegruj się z SDK Logto
Instalacja
Zainstaluj Logto SDK za pomocą swojego ulubionego menedżera pakietów:
Dodaj haczyk Logto
W swoim pliku hooks.server.ts dodaj następujący kod, aby wstrzyknąć haczyk Logto do swojego serwera:
Ponieważ te informacje są wrażliwe, zaleca się użycie zmiennych środowiskowych:
Jeśli masz kilka haczyków, możesz użyć funkcji pomocniczej sequence() do łączenia ich w łańcuch:
Teraz możesz uzyskać dostęp do klienta Logto w obiekcie locals. Dla TypeScript, możesz dodać typ do app.d.ts:
Później omówimy obiekt user.
Zaimplementuj logowanie i wylogowanie
Konfiguruj URI przekierowania
Przejdź do strony szczegółów aplikacji w Logto Console. Dodaj URI przekierowania http://localhost:3000/callback.
URI przekierowania to koncepcja OAuth 2.0, która oznacza lokalizację, do której powinno nastąpić przekierowanie po uwierzytelnieniu.
Podobnie dodaj http://localhost:3000/ do sekcji "URI przekierowania po wylogowaniu".
URI przekierowania po wylogowaniu to koncepcja OAuth 2.0, która oznacza lokalizację, do której powinno nastąpić przekierowanie po wylogowaniu.
Następnie kliknij "Zapisz", aby zapisać zmiany.
Wróć do swojej aplikacji, na stronie, na której chcesz zaimplementować logowanie i wylogowanie, zdefiniuj następujące akcje:
Następnie użyj tych akcji w swoim komponencie Svelte:
Wyświetl informacje o użytkowniku
Aby wyświetlić informacje o użytkowniku, możesz wstrzyknąć obiekt locals.user do układu, dzięki czemu będzie on dostępny na wszystkich stronach:
W swoim komponencie Svelte:
Punkt kontrolny: Uruchom aplikację
Teraz możesz uruchomić aplikację i spróbować zalogować się/wylogować za pomocą Logto:
- Otwórz aplikację w przeglądarce, powinieneś zobaczyć przycisk "Zaloguj się".
- Kliknij przycisk "Zaloguj się", a zostaniesz przekierowany na stronę logowania Logto.
- Po zalogowaniu powinieneś zostać przekierowany z powrotem do aplikacji i zobaczyć dane użytkownika oraz przycisk "Wyloguj się".
- 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!