Dowiedz się, jak zbudować przepływ uwierzytelniania użytkownika z Nuxt poprzez integrację SDK Logto.
W tym poradniku pokażemy, jak zbudować przepływ uwierzytelniania użytkownika za pomocą Nuxt 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 "Tradycyjne strony internetowe". 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ą Nuxt. Poniższa treść może być odniesieniem na przyszłość.
Zainstaluj Logto SDK za pomocą ulubionego menedżera paczek:
W konfiguracji Nuxt (nuxt.config.ts), dodaj moduł Logto:
Minimalna konfiguracja dla modułu wygląda następująco:
Ponieważ te informacje są wrażliwe, zaleca się korzystanie z zmiennych środowiskowych:
Zobacz runtime config dla więcej informacji.
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.
Kiedy rejestrujesz moduł @logto/nuxt, wykonuje następujące czynności:
/sign-in), wylogowania (/sign-out) i callback (/callback).useLogtoClient i useLogtoUser.Te trasy można skonfigurować za pomocą logto.pathnames w opcjach modułu, na przykład:
Sprawdź plik definicji typu w pakiecie @logto/nuxt dla więcej informacji.
Ponieważ strony Nuxt będą rehydratyzowane i stają się jednostronicową aplikacją (SPA) po początkowym załadowaniu, musimy przekierować użytkownika do trasy logowania lub wylogowania w razie potrzeby.
Aby wyświetlić informacje o użytkowniku, możesz skorzystać z composable 'useLogtoUser()', który jest dostępny zarówno na serwerze, jak i po stronie klienta:
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!