Integrera med WordPress

Den här guiden leder dig genom processen att integrera Logto med WordPress med hjälp av OIDC-plugin. Men först, låt oss ta en titt på användarupplevelsen när integrationen är klar.

Inloggningsprocessen med Logto-integrering#

1. Användaren går till WordPress-sajtens inloggningssida, som är [SITE URL]/wp-login.php som standard, och där finns en "sign in by OIDC"-knapp.
2. Användaren klickar på knappen och omdirigeras till Logtos inloggningssida med din anpassade inloggningsupplevelse.
3. Användaren väljer en inloggningsmetod, och Logto kommer att autentisera användaren.
4. När användaren är autentiserad, kommer Logto att omdirigera användaren tillbaka till WordPress-sajten.
5. WordPress kommer att skapa ett nytt användarkonto eller logga in det befintliga användarkontot och omdirigera användaren till föregående sida.

Nu när vi har sett slutresultatet av att integrera Logto med WordPress, låt oss sätta igång och dyka in i integrationsprocessen.

Förutsättningar#

Innan vi börjar, se till att du har följande:

1. En WordPress-sajt: En fullt fungerande WordPress-sajt krävs. Säkerställ administrativ tillgång för att hantera plugins och konfigurera inställningar.
2. En Logto-instans: Skapa en ny Logto-instans genom att besöka Logto Console, eller värd din egen instans genom att följa installationsguiden.

Integrationssteg#

Steg 1: Skapa en Logto-applikation#

1. Besök Logto Console.
2. Navigera till "Applications" och klicka "Create application".
3. Klicka "Create app without framework".
4. Välj "Traditional Web" som applikationstyp.
5. Namnge din applikation och klicka "Create application".

Steg 2: Installera plugin#

1. Logga in på din WordPress-sajt.
2. Navigera till "Plugins" och klicka "Add New".
3. Sök efter "OpenID Connect Generic" och installera plugin från daggerhart.
4. Aktivera plugin.

Steg 3: Konfigurera plugin#

1. Öppna plugininställningarna genom att navigera till "Settings" > "OpenID Connect Generic".
2. Fyll i följande fält:
   • Client ID: App-ID för din Logto-applikation.
   • Client Secret: App-hemligheten för din Logto-applikation.
   • OpenID Scope: Ange email profile openid offline_access.
   • Login Endpoint URL: URL för auktoriseringsendpoint för din Logto-applikation, som är https://[tenant-id].logto.app/oidc/auth, du kan klicka "show endpoint details" på Logto-applikationssidan för att få URLen.
   • Userinfo Endpoint URL: URL för userinfo endpoint för din Logto-applikation, som är https://[tenant-id].logto.app/oidc/me.
   • Token Validation Endpoint URL: URL för tokenvalideringsendpoint för din Logto-applikation, som är https://[tenant-id].logto.app/oidc/token.
   • End Session Endpoint URL: URL för slut sessions endpoint för din Logto-applikation, som är https://[tenant-id].logto.app/oidc/session/end.
   • Identity Key: Den unika nyckeln i ID-token som innehåller användarens identitet, det kan vara email eller sub, beroende på din konfiguration.
   • Nickname Key: Nyckeln i ID-token som innehåller användarens smeknamn, du kan sätta den till sub och ändra den senare.

Steg 4: Konfigurera applikationen#

1. I plugininställningarna, scrolla ner till "Notes"-sektionen och kopiera "Redirect URI"-värdet.
2. I Logto Console, navigera till din applikations inställningar.
3. Lägg till det kopierade "Redirect URI"-värdet till fältet "Redirect URIs".

Steg 5: Testa integrationen#

1. Logga ut från din WordPress-sajt.
2. Besök WordPress-inloggningssidan och klicka på "Sign in with Logto"-knappen.
3. Du kommer att omdirigeras till Logto inloggningssidan.
4. Logga in med ditt Logto-konto.
5. Du kommer att omdirigeras tillbaka till WordPress-sajten och loggas in automatiskt.

Sista stegen#

Grattis! Du har framgångsrikt integrerat Logto med WordPress.

För att anpassa integrationen ytterligare kan du utforska ytterligare funktioner på pluginens inställningssida, såsom att länka befintliga användare, anpassa inloggningsknappen, använda SSO-läge och mer.