Integracja z WordPress

Ten przewodnik przeprowadzi cię przez proces integracji Logto z WordPress przy użyciu wtyczki OIDC. Najpierw jednak spójrzmy na doświadczenie użytkownika po zakończeniu integracji.

Proces logowania z integracją Logto#

1. Użytkownik uzyskuje dostęp do strony logowania na stronie WordPress, która domyślnie znajduje się pod adresem [URL STRONY]/wp-login.php, i widzi przycisk logowania przez OIDC.
2. Użytkownik klika przycisk i zostaje przekierowany na stronę logowania Logto z dostosowanym doświadczeniem logowania.
3. Użytkownik wybiera metodę logowania, a Logto uwierzytelnia użytkownika.
4. Po uwierzytelnieniu użytkownik zostaje przekierowany z powrotem na stronę WordPress.
5. WordPress tworzy nowe konto użytkownika lub loguje istniejące konto użytkownika i przekierowuje użytkownika na poprzednią stronę.

Teraz, gdy zobaczyliśmy końcowy rezultat integracji Logto z WordPress, przejdźmy do procesu integracji.

Wymagania wstępne#

Przed rozpoczęciem upewnij się, że masz następujące:

1. Stronę WordPress: W pełni działającą stronę WordPress. Upewnij się, że masz dostęp administracyjny do zarządzania wtyczkami i konfiguracji ustawień.
2. Instancję Logto: Utwórz nową instancję Logto, odwiedzając Logto Console, lub hostuj swoją własną instancję, postępując zgodnie z przewodnikiem instalacyjnym.

Kroki integracji#

Krok 1: Utwórz aplikację w Logto#

1. Odwiedź Logto Console.
2. Przejdź do „Applications” i kliknij „Create application”.
3. Kliknij „Create app without framework”.
4. Wybierz „Traditional Web” jako typ aplikacji.
5. Nazwij swoją aplikację i kliknij „Create application”.

Krok 2: Zainstaluj wtyczkę#

1. Zaloguj się na swoją stronę WordPress.
2. Przejdź do „Plugins” i kliknij „Add New”.
3. Wyszukaj „OpenID Connect Generic” i zainstaluj wtyczkę od daggerhart.
4. Aktywuj wtyczkę.

Krok 3: Skonfiguruj wtyczkę#

1. Otwórz ustawienia wtyczki, przechodząc do „Settings” > „OpenID Connect Generic”.
2. Wypełnij następujące pola:
   • Client ID: ID aplikacji Logto.
   • Client Secret: Sekret aplikacji Logto.
   • OpenID Scope: Wprowadź email profile openid offline_access.
   • Login Endpoint URL: URL punktu autoryzacji aplikacji Logto, który jest https://[tenant-id].logto.app/oidc/auth, możesz kliknąć „show endpoint details” na stronie aplikacji Logto, aby uzyskać adres URL.
   • Userinfo Endpoint URL: URL punktu endpointu userinfo aplikacji Logto, który jest https://[tenant-id].logto.app/oidc/me.
   • Token Validation Endpoint URL: URL punktu walidacji tokenu aplikacji Logto, który jest https://[tenant-id].logto.app/oidc/token.
   • End Session Endpoint URL: URL punktu zakończenia sesji aplikacji Logto, który jest https://[tenant-id].logto.app/oidc/session/end.
   • Identity Key: Unikalny klucz w tokenie ID zawierający tożsamość użytkownika, może to być email lub sub, w zależności od konfiguracji.
   • Nickname Key: Klucz w tokenie ID zawierający pseudonim użytkownika, możesz ustawić go na sub i zmienić później.

Krok 4: Skonfiguruj aplikację#

1. W ustawieniach wtyczki przewiń w dół do sekcji „Notes” i skopiuj wartość „Redirect URI”.
2. W Logto Console przejdź do ustawień swojej aplikacji.
3. Dodaj skopiowaną wartość „Redirect URI” do pola „Redirect URIs”.

Krok 5: Przetestuj integrację#

1. Wyloguj się ze swojej strony WordPress.
2. Odwiedź stronę logowania WordPress i kliknij przycisk „Sign in with Logto”.
3. Zostaniesz przekierowany na stronę logowania Logto.
4. Zaloguj się na swoje konto Logto.
5. Zostaniesz przekierowany z powrotem na stronę WordPress i automatycznie zalogowany.

Ostatnie kroki#

Gratulacje! Pomyślnie zintegrowałeś Logto z WordPress.

Aby dalej dostosować integrację, możesz eksplorować dodatkowe funkcje na stronie ustawień wtyczki, takie jak łączenie istniejących użytkowników, dostosowywanie przycisku logowania, używanie trybu SSO i inne.