Budowanie uwierzytelniania Angular z Logto
Dowiedz się, jak zbudować przepływ uwierzytelniania użytkownika z Angular poprzez integrację biblioteki Angular OIDC client.
Founder
Rozpocznij
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.
- Angular to framework do tworzenia aplikacji webowych stworzony i utrzymywany przez Google.
W tym poradniku pokażemy, jak zbudować przepływ uwierzytelniania użytkownika za pomocą Angular 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 An Angular i projekt.
Utwórz aplikację Logto
Aby rozpocząć, utwórz aplikację Logto z typem "Single page app". 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ę "Single page app" i zlokalizuj kartę "Angular".
- 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ą Angular. Poniższa treść może być odniesieniem na przyszłość.
Integracja Logto z Twoim projektem
Instalacja
Zainstaluj Logto JS core SDK i Angular OIDC client library:
Konfiguracja aplikacji
W swoim projekcie Angular dodaj dostawcę autoryzacji do app.config.ts:
Implementacja logowania i wylogowywania
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.
W komponencie, w którym chcesz zaimplementować logowanie i wylogowywanie (na przykład, app.component.ts), wstrzyknij OidcSecurityService i użyj go do logowania i wylogowywania.
Następnie, w szablonie, dodaj przyciski do logowania i wylogowywania:
Subskrybuj stan uwierzytelniania i wyświetlaj informacje o użytkowniku
OidcSecurityService zapewnia wygodny sposób subskrypcji stanu uwierzytelniania:
I użyj tego w szablonie:
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!