Auth0 Enkel inloggning (SSO) | Logga in för WordPress med Auth0

Översikt

OAuth SSO-pluginet för WordPress möjliggör säker inloggning till WordPress med Auth0 som OAuth- och OpenID Connect-leverantör. Du kan också konfigurera pluginet med olika anpassade leverantörer och standard-IDP:er. Det stöder avancerade funktioner för enkel inloggning (SSO) som attributmappning för användarprofiler, rollmappning etc. Här går vi igenom en guide för att konfigurera SSO mellan WordPress och Auth0. I slutet av den här guiden, Användare ska kunna logga in på Auth0 med OAuth Single Sign-On i WordPress, du kan Klicka här.

Förutsättningar: Ladda ner och installation

• Logga in på din WordPress-instans som admin.
• Gå till WordPress Dashboard -> Plugins och klicka på Lägg till en ny.
• Sök efter en OAuth enkel inloggning (SSO) plugin för WordPress och klicka på installera nu.
• När du har installerat klicka på Aktivera.

Konfigurationssteg

Steg 1: Ställ in Auth0 som OAuth-leverantör

• Gå till https://auth0.com/auth/login och registrera dig eller logga in.
• Gå till Tillämpningar fliken i den vänstra panelen och klicka sedan på Tillämpningar.

• Klicka på Skapa applikation för att skapa en ny applikation.

• Välja Vanliga webbapplikationer och klicka på Skapa knapp.

• Gå nu till inställningar fliken.

• Bläddra ner till Applikations-URI:er och ange återuppringnings-url som du får från plugin. Scrolla sedan ner och klicka på spara ändringar.

• kopiera kund-ID och Klienthemlighet från grundläggande information på fliken inställningar och spara den i din miniOrange OAuth Client-plugin Konfiguration..

• Gå nu till användare fliken i användarhanteringen från den vänstra panelen.

• Klicka på skapa User för att skapa en ny användare.

• Ange alla nödvändiga uppgifter och klicka på Skapa.




Du har konfigurerat Auth0 som OAuth-leverantör för att uppnå Auth0 SSO-inloggning på din WordPress-webbplats.

Steg 2: Konfigurera WordPress som OAuth-klient

• Gratis
• Premium

• Gå till Konfigurera OAuth fliken och klicka Lägg till ny applikation för att lägga till en ny klientapplikation på din webbplats.

• Välj din applikation från listan över OAuth/OpenID Connect-leverantörer, här Auth0

• Efter att ha valt leverantör, kopiera Återuppringnings-URL som måste konfigureras i OAuth-leverantörens SSO-applikationskonfiguration.
• Ange klientuppgifterna som kund-ID & Klienthemlighet som du får från Auth0 SSO-applikationen.
• Inställd Domain Name hittas från Auth0 SSO-applikationen. Se tabellen nedan för att konfigurera omfattning och slutpunkter för Auth0 i plugin-programmet.

Obs: När du har skapat Auth0-kontot hittar du domän URL och du måste lägga till samma i slutpunkterna nedan.




Omfattning:	openid profil e-post
Auktorisera slutpunkt:	https://<Auth0-app-domain>/authorize
Åtkomsttokens slutpunkt:	https://<Auth0-app-domain>/oauth/token
Få användarinformation slutpunkt:	https://<Auth0-app-domain>/userinfo



• Klicka på Nästa.
• Efter att ha verifierat alla detaljer på sammanfattningssidan, klicka på Slutför för att spara konfigurationen samt testa SSO-anslutningen.




Du har konfigurerat WordPress som OAuth-klient för att uppnå Auth0-inloggning på din WordPress-webbplats.

• Gå till Konfigurera OAuth och sök efter ditt programnamn för att lägga till en ny klientapplikation på din webbplats, här Auth0.

• Inställd Appnamn, klient-ID, klienthemlighet från Auth0 SSO-applikation.

• Se tabellen nedan för att konfigurera scope & endpoints för Auth0 i plugin.

  Obs: När du har skapat Auth0-kontot hittar du domän url och du måste lägga till samma i slutpunkterna nedan.

  
  

  Omfattning:	öppen profil
  Auktorisera slutpunkt:	https://{your-auth0-domain}/authorize
  Åtkomsttokens slutpunkt:	https://{your-auth0-domain}/oauth/token

  
• Välj Beviljningstyp från listan över alternativ & Klicka på Spara inställningar för att spara konfigurationen.




Du har konfigurerat WordPress som OAuth-klient för att uppnå Auth0-inloggning på din WordPress-webbplats.

Steg 3: Mappning av användarattribut

• Användarattributmappning är obligatorisk för att göra det möjligt för användare att logga in på WordPress. Vi kommer att ställa in användarprofilattribut för WordPress med inställningarna nedan.

Hitta användarattribut:

• Gå till Konfigurera OAuth flik. Scrolla ner och klicka på Testkonfiguration.

• Du kommer att se alla värden som returneras av din OAuth-leverantör till WordPress i en tabell. Om du inte ser värdet för förnamn, efternamn, e-post eller användarnamn, gör de nödvändiga inställningarna i din OAuth-leverantör för att returnera denna information.
• När du ser alla värden i Test Configuration, gå till Attribut/rollmappning fliken kommer du att få en lista över attribut i en rullgardinsmeny för Användarnamn.

Steg 4: Rollmappning [Premium]

• Klicka på "Testa konfiguration" och du kommer att få en lista över attributnamn och attributvärden som skickas av din OAuth-leverantör.
• I fönstret Testkonfiguration mappar du attributnamnen i sektionen Attributmappning av plugin-programmet. Se skärmdumpen för mer information.

• Aktivera rollmappning: För att aktivera rollmappning måste du mappa attribut för gruppnamn. Välj attributnamnet från listan över attribut som returnerar rollerna från din leverantörsapplikation.
  Till exempel: Roll


• Tilldela WordPress-rollen till leverantörsrollen: Baserat på din leverantörsapplikation kan du tilldela WordPress-rollen till dina leverantörsroller. Det kan vara en elev, lärare, administratör eller någon annan beroende på din ansökan. Lägg till leverantörsrollerna under Group Attribute Value och tilldela den nödvändiga WordPress-rollen framför den under WordPress-rollen.
  
  Till exempel, i bilden nedan. Lärare har tilldelats rollen som administratör & student tilldelas rollen som prenumerant.

• När du har sparat mappningen kommer leverantörsrollen att tilldelas SSO för WordPress.
  Exempel: Enligt det givna exemplet kommer användare med rollen "lärare" att läggas till som administratör i WordPress och "student" kommer att läggas till som prenumerant.

Steg 5: Skapa anpassade attribut i Auth0

• Lägg till anpassade attribut med ett gemensamt attributvärde
• Lägg till användarspecifika anpassade attribut med olika attributvärden

• Gå till https://auth0.com/auth/login för att logga in på ditt Auth-utvecklarkonto.
• Gå till i den vänstra panelen Åtgärd -> Flöden -> Logga in.

• Klicka på Lägg till åtgärd -> Bygg anpassad.

• Ange önskat namn och behåll de andra inställningarna som de är. Klicka på Skapa knapp.

• Skriv nedanstående kod i kodredigeraren. När du har skrivit koden klickar du på Distribuera.

      
                
                Code:
                  exports.onExecutePostLogin = async (event, api) => {
                  const attr_name = "favorite_color";
                  api.idToken.setCustomClaim( attr_name , 'Purple');
                          
                  // ... additional code
                  };
                          
                Code Description:
                          
                  attr_name: This will be the attribute name which will you want to create (favorite_color in my case)
                          
                  The function api.idToken.setCustomClaim(), expects the key and its value. Here, the key is attr_name, and its value is “Purple”
                
                


• Efter att ha klickat på Distribuera, gå tillbaka till Åtgärd -> Flöden -> Logga in -> Anpassad & Dra och släpp åtgärden som vi skapade (Lägg till anpassade attribut) mellan Start & Complete-flödet, som visas nedan:

• När du har gjort detta klickar du på Ansök knapp.
• Slutligen, utför testkonfigurationen i miniOrange OAuth Single Sign-On-plugin för att se användarens anpassade attribut, som visas nedan:

• Gå till https://auth0.com/auth/login för att logga in på ditt Auth-utvecklarkonto.
• Gå till i den vänstra panelen Användarhantering -> Användare.
• Välj den användare som du vill tilldela det anpassade attributet till.

• När du har valt en användare, scrolla ner och gå till Metadata. I user_metadatamåste du lägga till de anpassade attributen som ett nyckel-värdepar enligt nedan:

• Gå till i den vänstra panelen Åtgärd -> Flöden -> Logga in.

• Klicka på Lägg till åtgärd -> Bygg anpassad.

• Ange önskat namn och behåll de andra inställningarna som de är. Klicka på Skapa knapp.

• Skriv nedanstående kod i kodredigeraren. När du har skrivit koden klickar du på Distribuera.

              

              Code:
                exports.onExecutePostLogin = async (event, api) => {
                          
                const { favorite_color, preferred_contact } = event.user.user_metadata;
                        
                if (event.authorization) {
                // Set claims 
                api.idToken.setCustomClaim('fav_color', favorite_color);
                api.idToken.setCustomClaim('preferred_contact', preferred_contact);
                }
                };
                        
                        
              Code Description:
                We’ll add the keys (created in user_metadata) in the const as the parameters.
                        
                When using the "api.idToken.setCustomClaim() function, you will need to include two parameters. The first parameter is used to specify the desired attribute name, while in the second parameter you will add the key which you want set the attribute value.
              
              


• Efter att ha klickat på Distribuera, gå tillbaka till Åtgärd -> Flöden -> Logga in -> Anpassad & Dra och släpp åtgärden som vi skapade tidigare (Lägg till anpassade attribut) mellan Start & Complete-flödet, som visas nedan:

• När du har gjort detta klickar du på Ansök knapp.
• Slutligen, utför testkonfigurationen i plugin-programmet miniOrange för att se användarens anpassade attribut, som visas nedan:

Steg 6: Inloggningsinställningar

• Logga in inställningar för WordPress 5.7 och tidigare
• Inloggningsinställningar för WordPress 5.8
• Inloggningsinställningar för WordPress 5.9

• Gå till WordPress vänsterpanel > Utseende > Widgets.
• Välja miniOrange OAuth. Dra och släpp till din favoritplats och spara.

• Gå till WordPress vänsterpanel > Utseende > Widgets.
• Välja miniOrange OAuth. Dra och släpp till din favoritplats och spara.

• Öppna din Auth0 SSO för Auth0 Single Sign-On för WordPress (SSO) - Auth0 OAuth nu.

• Se till "Visa på inloggningssidan" alternativet är aktiverat för din applikation. (Se bilden nedan)

• Gå nu till din Logga in för WordPress sida. (T.ex. https://< din-wordpress-domän >/wp-login.php)
• Du kommer att se en Auth0 SSO-inloggningsknapp där. När du klickar på inloggningsknappen kommer du att kunna testa Auth0 Single Sign-On (SSO) - Auth0 OAuth.

Relaterade artiklar

• OAuth 2.0 auktoriseringsramverk
• Vad är OAuth 2.0?
• OAuth / OpenID Connect / JWT SSO för WordPress
• Vad är OAuth 2.0 och hur fungerar det?
• Hur vi är olika