Integreren met WordPress

Deze gids begeleidt je bij het proces van het integreren van Logto met WordPress met behulp van de OIDC-plugin. Maar laten we eerst eens kijken naar de gebruikerservaring zodra de integratie voltooid is.

Het aanmeldproces met Logto-integratie#

1. De gebruiker bezoekt de inlogpagina van de WordPress-site, die standaard [SITE URL]/wp-login.php is, en er is een aanmeldknop via OIDC.
2. De gebruiker klikt op de knop en wordt doorgestuurd naar de inlogpagina van Logto met je aangepaste inlogervaring.
3. De gebruiker kiest een inlogmethode, en Logto zal de gebruiker verifiëren.
4. Zodra de gebruiker is geverifieerd, zal Logto de gebruiker terugleiden naar de WordPress-site.
5. WordPress maakt een nieuw gebruikersaccount aan of meldt de bestaande gebruiker aan en leidt de gebruiker terug naar de vorige pagina.

Nu we het eindresultaat van de integratie van Logto met WordPress hebben gezien, gaan we aan de slag en duiken in het integratieproces.

Vereisten#

Voordat we beginnen, zorg ervoor dat je het volgende hebt:

1. Een WordPress-site: Een volledig operationele WordPress-site is vereist. Zorg voor beheertoegang om plugins te beheren en instellingen te configureren.
2. Een Logto-instantie: Maak een nieuwe Logto-instantie aan door naar de Logto Console te gaan, of host je eigen instantie door de installatiegids te volgen.

Integratiestappen#

Stap 1: Maak een Logto-applicatie aan#

1. Bezoek de Logto Console.
2. Navigeer naar "Toepassingen" en klik op "Toepassing maken".
3. Klik op "App maken zonder framework".
4. Selecteer "Traditionele Web" als het type toepassing.
5. Geef je applicatie een naam en klik op "Toepassing maken".

Stap 2: Installeer de plugin#

1. Log in op je WordPress-site.
2. Navigeer naar "Plugins" en klik op "Nieuwe toevoegen".
3. Zoek naar "OpenID Connect Generic" en installeer de plugin van daggerhart.
4. Activeer de plugin.

Stap 3: Configureer de plugin#

1. Open de plugin-instellingen door te navigeren naar "Instellingen" > "OpenID Connect Generic".
2. Vul de volgende velden in:
   • Client-ID: De app-ID van je Logto-applicatie.
   • Client Secret: Het app-geheim van je Logto-applicatie.
   • OpenID Scope: Voer email profile openid offline_access in.
   • Inlog Eindpunt URL: De autorisatie-eindpunt-URL van je Logto-applicatie, dit is https://[tenant-id].logto.app/oidc/auth, je kunt op "toon eindpunt details" klikken op de Logto-applicatiepagina om de URL te krijgen.
   • Userinfo Eindpunt URL: De userinfo eindpunt-URL van je Logto-applicatie, dit is https://[tenant-id].logto.app/oidc/me.
   • Token Validering Eindpunt URL: De token validering eindpunt-URL van je Logto-applicatie, dit is https://[tenant-id].logto.app/oidc/token.
   • End Session Eindpunt URL: De eind sessie eindpunt-URL van je Logto-applicatie, dit is https://[tenant-id].logto.app/oidc/session/end.
   • Identity Key: De unieke sleutel in het ID-token die de identiteit van de gebruiker bevat, het kan email of sub zijn, afhankelijk van je configuratie.
   • Nickname Key: De sleutel in het ID-token die de bijnaam van de gebruiker bevat, je kunt het instellen op sub en het later wijzigen.

Stap 4: Configureer de applicatie#

1. Scrol in de plugin-instellingen naar beneden naar het gedeelte "Opmerkingen" en kopieer de waarde "Redirect URI".
2. Navigeer in de Logto Console naar de instellingen van je applicatie.
3. Voeg de gekopieerde "Redirect URI"-waarde toe aan het veld "Redirect URI's".

Stap 5: Test de integratie#

1. Log uit van je WordPress-site.
2. Bezoek de inlogpagina van WordPress en klik op de knop "Aanmelden met Logto".
3. Je wordt doorgestuurd naar de inlogpagina van Logto.
4. Log in met je Logto-account.
5. Je wordt teruggeleid naar de WordPress-site en automatisch ingelogd.

Laatste stappen#

Gefeliciteerd! Je hebt Logto met succes geïntegreerd met WordPress.

Om de integratie verder aan te passen, kun je aanvullende functies verkennen op de instellingenpagina van de plugin, zoals het koppelen van bestaande gebruikers, het aanpassen van de inlogknop, het gebruik van SSO-modus en meer.