Dowiedz się, jak zbudować przepływ uwierzytelniania użytkowników za pomocą SvelteKit, integrując SDK Logto.
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.
Zanim zaczniesz, upewnij się, że masz następujące:
Aby rozpocząć, utwórz aplikację Logto z typem "Tradycyjny internet". Wykonaj następujące kroki, aby utworzyć aplikację Logto:
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ść.
Zainstaluj Logto SDK za pomocą swojego ulubionego menedżera pakietów:
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.
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:
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:
Teraz możesz uruchomić aplikację i spróbować zalogować się/wylogować za pomocą Logto:
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!