Hur man lägger till inloggning med ett klick med Google i WordPress

Googles inloggning med ett klick låter besökare registrera sig eller logga in på din webbplats med ett konto de redan har. Istället för att skapa ytterligare ett användarnamn och lösenord kan de komma åt ditt innehåll eller din nätbutik med ett enda klick.

Vi har funnit att användare uppskattar denna typ av enkelhet. Att erbjuda Google-inloggning gör inte bara processen snabbare och enklare, utan det kan också förbättra användarupplevelsen, öka konverteringar och minska antalet avbrutna kundvagnar.

I den här steg-för-steg-guiden visar vi hur du lägger till Google-inloggning med ett klick till din WordPress-webbplats så att du kan effektivisera hela användarresan. 🚀

Varför lägga till Google-inloggning med ett klick i WordPress?

Att ha Google-inloggning med ett klick aktiverat på ditt WordPress inloggningsformulär låter dina användare spara tid genom att snabbt logga in med sitt Google-konto. Detta förhindrar dem från att behöva ange sina inloggningsuppgifter varje gång.

Om du driver en enkel blogg, kanske du inte tycker att den här funktionen är användbar.

Men om din organisation använder Google Workspace för professionella företagsadresser, kan dina teammedlemmar använda din organisations Google-appar-konton för inloggning.

En funktion för enkel inloggning, som Google-inloggning med ett klick, är också mycket användbar för alla webbplatser som kräver att användare loggar in, såsom webbplatser med flera författare, medlemskapswebbplatser, och webbplatser som säljer onlinekurser.

Skapa ditt perfekta registreringsformulär för användare

WPForms är den bästa dra-och-släpp-formulärbyggaren för WordPress. Medan sociala inloggningar är bra, låter WPForms dig skapa helt anpassade användarregistreringsformulär för att samla in exakt den information du behöver från dina användare.

Du kan också skapa kontaktformulär, betalningsformulär, enkäter och mer på bara några minuter.

Kom igång med WPForms idag

Låt oss nu titta på hur du enkelt lägger till inloggning med ett klick med Google till din WordPress-webbplats.

Hur man lägger till Google-inloggning med ett klick i WordPress

Först måste du installera och aktivera pluginet Nextend Social Login and Register. För mer information, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

För den här handledningen kommer vi att använda gratispluginet som stöder Google-, Twitter- och Facebook-inloggning. Det finns också en betald version av Nextend Social Login som lägger till social inloggning för många olika webbplatser, inklusive PayPal, Slack och TikTok.

Efter aktivering måste du gå till Inställningar » Nextend Social Login i WordPress adminområde. På den här skärmen ser du de olika sociala inloggningsalternativen som finns tillgängliga.

För att lägga till en Google-inloggning på din WordPress-webbplats måste du klicka på knappen ‘Kom igång’ under Google-logotypen.

Här ser du att ditt första steg blir att skapa en Google-app.

Att skapa en Google-app låter tekniskt, men oroa dig inte.

Du behöver inte kunna någon kod, och vi kommer att guida dig genom alla steg.

Skapa en Google-app

För att skapa den här appen måste du växla mellan din WordPress-instrumentpanel och Google Developers Console. Det är en bra idé att lämna din WordPress-instrumentpanel öppen i den aktuella fliken och öppna en ny webbläsarflik.

Nu kan du besöka webbplatsen Google Developers Console. Om du inte redan är inloggad, kommer du att bli ombedd att logga in med ditt Google-konto.

Klicka sedan på ‘Välj ett projekt’ i toppmenyn. Det öppnar ett popup-fönster där du måste klicka på knappen ‘Nytt projekt’ för att fortsätta.

Detta öppnar sidan Nytt projekt. Du måste ange ett projektnamn och välja plats. Projektnamnet kan vara vad du vill, till exempel ‘Google-inloggning.’

Om du loggade in med ett Google Workspace-konto, kommer platsen att fyllas i automatiskt med namnet på din organisation. Om inte, bör du lämna det som ‘Ingen organisation.’

Klicka sedan på knappen ‘Skapa’ för att fortsätta.

Du kommer nu att omdirigeras till instrumentpanelen ‘API:er & tjänster’. På den här sidan måste du klicka på ‘OAuth-samtyckeskärm’ i den vänstra menyn.

Här måste du välja vilken typ av användare du tillåter att logga in.

Välj 'Intern' om endast användare med din organisations Google-konto kommer att logga in. Alternativt bör du välja 'Extern' om dina användare har e-postadresser utanför din organisation.

Till exempel, någon med ett @gmail.com-konto jämfört med en @dittföretagsmail.com-adress.

När du är redo att fortsätta, klicka på knappen 'Skapa'. Nu kan du börja lägga till information om din app.

Först bör du ange ditt företagsnamn i fältet för appnamn. Detta kommer att visas för användaren vid inloggning, till exempel, 'Smith Training Services vill ha åtkomst till ditt Google-konto.'

Du måste också lägga till den e-postadress du loggade in på Google med. Detta gör att dina användare kan ställa frågor om Google-inloggningsskärmen.

När du har gjort det, scrolla ner till avsnittet ‘App domain’. Här måste du lägga till länkar till din webbplats startsida, sidan för integritetspolicy och sidan för användarvillkor.

Klicka sedan på knappen ‘Lägg till domän’ för att lägga till din webbplats domännamn, som till exempel ‘example.com.’

Om du vill lägga till Google-inloggning med ett klick till mer än en webbplats, kan du klicka på knappen '+ Lägg till domän' för att lägga till en annan domän.

Slutligen måste du lägga till en eller flera e-postadresser så att Google kan meddela dig om eventuella ändringar i ditt projekt.

När du är klar, se till att du klickar på knappen ‘Spara och fortsätt’.

Därefter kommer du till sidorna Scopes och Testanvändare. För båda dessa sidor, scrolla helt enkelt till botten och klicka på knappen ‘Spara och fortsätt’.

Den slutliga sidan för detta steg visar en sammanfattning av dina inställningar för OAuth-samtyckesskärm.

Nästa steg är att skapa de nycklar som din inloggningsplugin behöver för att ansluta till Google Cloud.

Du bör klicka på ‘Autentiseringsuppgifter’ i den vänstra menyn och sedan klicka på knappen ‘+ Skapa autentiseringsuppgifter’ högst upp på skärmen. Du behöver välja alternativet ‘OAuth-klient-ID’.

Detta tar dig till sidan 'Skapa OAuth-klient-ID'.

Du bör välja 'Webbapplikation' från rullgardinsmenyn 'Applikationstyp'.

Vissa inställningar kommer att läggas till på sidan. Du behöver skrolla ner till sektionen ‘Authorized redirect URIs’ och klicka på knappen ‘+ Add URI’.

Nu behöver du ange följande URL i fältet.

Det är mycket viktigt att denna URL börjar med ‘https://’ eftersom Google kräver en säker anslutning för att den här funktionen ska fungera korrekt.

https://example.com/wp-login.php?loginSocial=google 

Se bara till att ersätta ‘example.com’ med din egen webbplats domännamn.

När du har gjort det bör du klicka på knappen ‘Skapa’ för att spara inställningarna. Det kan ta från 5 minuter till några timmar för inställningarna att träda i kraft.

Din OAuth-klient har nu skapats!

Du kommer att se ett popup-fönster som innehåller ‘Ditt klient-ID’ och ‘Din klienthemlighet.’ Du måste klistra in dessa nycklar på plugin-inställningssidan tillbaka i ditt WordPress-adminområde.

Du kan bara klicka på ikonen 'kopiera' till höger för att kopiera nycklarna en i taget.

Lägga till dina Google-nycklar i ditt plugin

Byt nu helt enkelt tillbaka till din webbplats webbläsarflik och klicka på fliken ‘Inställningar’ under Inställningar » Nästaend Social Login. Här ser du fält för Klient-ID och Klienthemlighet.

Du behöver kopiera dina nycklar från Google Cloud Console och klistra in dem i dessa fält.

När du har gjort det, se till att du klickar på knappen ‘Spara ändringar’ för att lagra dina inställningar.

Nu måste du testa att inställningarna fungerar korrekt. Detta är viktigt eftersom du inte vill att riktiga användare ska stöta på fel när de försöker logga in på din webbplats.

Klicka bara på knappen 'Verifiera inställningar', så ser pluginet till att Google-appen du skapade fungerar korrekt.

Om du följde stegen korrekt, bör du se en avisering som säger ‘Fungerar bra – Inaktiverad.’

Det här meddelandet kan verka förvirrande, men det är faktiskt goda nyheter. ‘Fungerar bra’ bekräftar att dina inställningar är korrekta och att anslutningen till Google är lyckad.

‘Inaktiverad’ betyder helt enkelt att inloggningsknappen inte är aktiv på din webbplats ännu.

Du kan nu klicka på knappen ‘Aktivera’ för att göra Google-inloggningen live för dina användare.

När du har gjort det kommer ett meddelande att visas som bekräftar att Google-inloggning nu är aktiverat.

Välja din knappstil och etiketter

Nextends standardknappstil och etikett är ganska standard och fungerar för de flesta webbplatser. Du kan dock anpassa dem genom att klicka på fliken ‘Knappar’ högst upp på skärmen.

Du kommer nu att se alla olika stilar som finns tillgängliga för sociala inloggningsknappar. För att använda en annan stil, klicka helt enkelt för att välja dess radioknapp.

När du har gjort det kan du också ändra knapptexten genom att redigera texten i fältet 'Inloggningsetikett'.

Om du vill kan du tillämpa grundläggande formatering på inloggningsetiketten med HTML. Du kan till exempel göra text fetstil med taggarna <b> och </b>.

Du kan också redigera fälten 'Länketikett' och 'Avlänkningsetikett' som tillåter användare att länka och avlänka din webbplats med sina Google-konton.

Om du vill placera inloggningsknappen på andra områden på din webbplats, som i en sidofältswidget eller på en specifik sida, kan du enkelt göra detta genom att använda pluginets kortkoder.

Se till att du klickar på knappen ‘Spara ändringar’ för att spara dina inställningar.

Ta din Google-app ur testläge

Nu finns det en sista sak du behöver göra tillbaka i Google Cloud-webbläsarfliken. Du bör fortfarande se popup-fönstret med ditt klient-ID och klienthemlighet. Du kan stänga popup-fönstret genom att klicka på ‘OK’ längst ner i popup-fönstret.

Därefter behöver du klicka på ‘OAuth-samtyckeskärm’ i den vänstra menyn.

Du kan se att din Google-app är i ‘Testläge’. Detta gör att du kan testa din app med ett begränsat antal användare. Nu när du har fått ett meddelande om ‘Fungerar bra’ när du verifierar inställningarna med plugin-programmet kan du flytta det till ‘Produktionsläge’.

Du gör detta genom att klicka på knappen 'Publicera app'. Därefter ser du en popup med titeln 'Pusha till produktion?'

Klicka helt enkelt på ‘Bekräfta’ för att tillåta alla att använda en Google-inloggning i ett steg på din webbplats.

Om du följde den här handledningen noggrant, bör verifieringsstatusen nu vara ‘Verifiering inte nödvändig.’

Din app kommer nu att fungera med alla Google-användare.

Nu, när användare loggar in på din webbplats, kommer de att ha möjlighet att logga in med Google.

Men om de föredrar det kan de fortfarande logga in med sitt vanliga WordPress-användarnamn och lösenord.

Här är hur Google-inloggning fungerar för dina besökare.

Nya besökare kan använda knappen för att omedelbart registrera ett konto på din webbplats. För befintliga användare kan de använda knappen för att logga in, så länge deras kontos e-postadress är densamma som deras Google-e-postadress.

Om du vill lägga till Google-inloggningsknappen någon annanstans på din webbplats kan du göra det med en kortkod. Du kan lära dig mer genom att klicka på Nextends flik 'Användning'.

Vanliga frågor om Google-inloggning

Här är en lista över några frågor som våra läsare ofta ställer om att lägga till Google-inloggning på sin webbplats.

Är det säkert att lägga till Google-inloggning på min WordPress-webbplats?

Ja, det är mycket säkert. Processen använder Googles standardprotokoll OAuth 2.0. Detta innebär att din webbplats aldrig hanterar eller lagrar användarens Google-lösenord, vilket säkerställer att deras uppgifter förblir säkra.

Din webbplats tar bara emot en säker token från Google för att verifiera användarens identitet.

Kan jag lägga till inloggningsalternativ för andra sociala medieplattformar?

Absolut. Gratispluginet Nextend Social Login stöder även Facebook och Twitter. Om du uppgraderar till deras betalversion kan du lägga till många andra plattformar som LinkedIn, PayPal, Slack och TikTok.

Vad händer om en besökare inte har ett Google-konto?

Standardinloggningsformuläret i WordPress förblir fullt fungerande. Att lägga till en Google-inloggningsknapp ger ett ytterligare, bekvämt alternativ, men tar inte bort standardfälten för användarnamn och lösenord.

Kommer den här funktionen att sakta ner min webbplats?

Nej, det borde det inte. Nextend Social Login-pluginet är lättviktigt och optimerat för prestanda. Autentiseringsprocessen sker på Googles snabba servrar, så det kommer inte att ha någon märkbar inverkan på din webbplats hastighet.

Fungerar Google-inloggning med WooCommerce eller medlemskapssidor?

Ja, det fungerar utmärkt med populära e-handels- och medlemskapsplugins. Att förenkla kassan och registreringsprocessen kan hjälpa till att minska övergivna kundvagnar för WooCommerce-butiker och öka registreringar på webbplatser som använder plugins som MemberPress.

Ytterligare resurser för att anpassa din inloggningssida

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till inloggning med ett klick med Google i WordPress.

Du kanske också vill se andra guider om hur du anpassar inloggningsupplevelsen på din webbplats:

• Hur man lägger till Logga in med Facebook i WordPress
• Hur man lägger till social inloggning till WordPress (det enkla sättet)
• Bästa WordPress inloggningssida plugins (säkra & anpassningsbara)
• Hur man lägger till lösenordsfri inloggning i WordPress med magiska länkar
• Hur man lägger till inloggning med telefonnummer via OTP i WordPress
• Hur man skapar en anpassad WordPress inloggningssida (ultimat guide)
• Varför och hur du bör begränsa inloggningsförsök i WordPress
• Hur man lägger till en anpassad inloggnings-URL i WordPress (steg för steg)
• Hur man lägger till CAPTCHA i WordPress inloggnings- och registreringsformulär
• Hur man kräver inloggning för att visa en sida i WordPress
• Nybörjarguide för att lägga till tvåfaktorsautentisering i WordPress (gratis metod)
• Hur man begränsar användarinloggning till en enhet i WordPress

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.