Dowiedz się, jak zbudować przepływ uwierzytelniania użytkownika z Angular poprzez integrację biblioteki Angular OIDC client.
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.
Zanim zaczniesz, upewnij się, że masz następujące:
Aby rozpocząć, utwórz aplikację Logto z typem "Single page app". 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ą Angular. Poniższa treść może być odniesieniem na przyszłość.
Zainstaluj Logto JS core SDK i Angular OIDC client library:
W swoim projekcie Angular dodaj dostawcę autoryzacji do app.config.ts:
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:
OidcSecurityService zapewnia wygodny sposób subskrypcji stanu uwierzytelniania:
I użyj tego w szablonie:
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!