Budowa uwierzytelniania Nuxt z Logto
Dowiedz się, jak zbudować przepływ uwierzytelniania użytkownika z Nuxt poprzez integrację 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.
- Nuxt to otwarte źródło, które czyni rozwój stron internetowych intuicyjnym i potężnym.
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.
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 Nuxt i projekt.
Utwórz aplikację Logto
Aby rozpocząć, utwórz aplikację Logto z typem "Tradycyjne strony internetowe". 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ę "Tradycyjne strony internetowe" i zlokalizuj kartę "Nuxt".
- 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ą Nuxt. Poniższa treść może być odniesieniem na przyszłość.
Zintegruj SDK Logto
Instalacja
Zainstaluj Logto SDK za pomocą ulubionego menedżera paczek:
Zarejestruj moduł Logto
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.
Implementuj 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.
Kiedy rejestrujesz moduł @logto/nuxt, wykonuje następujące czynności:
- Dodaje trzy trasy do logowania (
/sign-in), wylogowania (/sign-out) i callback (/callback). - Importuje dwie kompozycje:
useLogtoClientiuseLogtoUser.
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.
Wyświetl informacje o użytkowniku
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:
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!