Cum să activați autentificarea Google cu un singur clic în WordPress

Publicat: 2023-03-20

Când utilizatorii dvs. se pot conecta utilizând contul lor Google, nu vor trebui să stabilească, să-și amintească sau să monitorizeze un alt nume de utilizator și parolă pentru a vă accesa site-ul web. Timpul lor este economisit, iar ratele de conversie cresc. În acest tutorial, vă vom arăta cum să integrați o conectare Google cu un singur clic în WordPress.

De ce să includeți Google Login în WordPress?

Mulți utilizatori online continuă să-și folosească conturile Google. Acest lucru le permite să acceseze rapid produsele Google, cum ar fi Gmail, Drive și Documente, fără a fi nevoie să se conecteze separat pentru fiecare.

Când activați conectarea Google cu un singur clic pe pagina dvs. de conectare WordPress, utilizatorii dvs. vor putea face același lucru pe site-ul dvs. web. Utilizatorii pot economisi timp conectându-se rapid cu contul lor Google. Acest lucru elimină necesitatea ca utilizatorii să introducă detaliile de conectare de fiecare dată.

Dacă aveți doar un blog WordPress de bază, este posibil să nu găsiți această funcție utilă. Dar, dacă compania dvs. folosește Google Workspace pentru adrese de e-mail profesionale, membrii echipei dvs. se pot conecta folosind conturile de aplicații Google ale companiei.

O opțiune de conectare unică, cum ar fi autentificarea Google cu un singur clic, este, de asemenea, extrem de utilă pentru orice site web care solicită utilizatorilor să se conecteze, cum ar fi site-uri web cu mai mulți autori, site-uri web de membru și site-uri web care vând cursuri online. Acestea fiind spuse, haideți să aruncăm o privire la cum să integrați pur și simplu conectarea Google cu un singur clic pe site-ul dvs. WordPress.

Cum să activezi autentificarea Google cu un singur clic în WordPress?

Mai întâi, descărcați și instalați pluginul Nextend Social Login and Registration. Vă rugăm să vizitați ghidul nostru pentru începători pentru instalarea unui plugin WordPress pentru informații suplimentare.

Pentru această lecție, vom folosi pluginul gratuit care permite autentificarea Google, Twitter și Facebook. Nextend Social Login are, de asemenea, o versiune comercială care adaugă autentificare socială la o varietate de site-uri web, inclusiv PayPal, Slack și TikTok.

Accesați Setări » Nextend Social Login în zona de administrare WordPress după activare. Acest ecran afișează numeroasele opțiuni de conectare la rețele sociale care sunt disponibile.

One-Click Google Login plugin

Faceți clic pe butonul „Noțiuni introductive” de sub sigla Google pentru a adăuga o autentificare Google pe site-ul dvs. WordPress. Primul pas, după cum puteți vedea, va fi să dezvoltați o aplicație Google. Nu vă lăsați intimidați de perspectiva de a crea o aplicație Google.

One-Click Google Login app

Nu trebuie să cunoașteți niciun cod și vă vom ghida prin întregul proces.

Dezvoltarea unei aplicații Google

Va trebui să faceți tranziția între tabloul de bord WordPress și Consola pentru dezvoltatori Google pentru a crea această aplicație. Este o idee bună să lăsați tabloul de bord WordPress deschis în fila curentă a browserului în timp ce deschideți una nouă.

Acum puteți accesa pagina Google Developers Console. Dacă nu sunteți deja conectat, vi se va solicita să faceți acest lucru folosind contul dvs. Google.

Următorul pas este să selectați un proiect din meniul de sus. Pentru a continua, va apărea o fereastră pop-up și va trebui să faceți clic pe butonul „Creați proiect”.

new project

Acest lucru vă va direcționa către pagina pentru proiecte noi. Trebuie să introduceți un nume de proiect și să alegeți o locație. Numele proiectului poate fi orice doriți, de exemplu, „Google Login”.

Dacă v-ați conectat cu un cont Google Workspace, locația va fi completată automat cu numele organizației dvs. Dacă nu, lăsați pur și simplu „Fără organizație”.

cloud google

Pentru a continua, faceți clic pe butonul „Creați”. Veți fi direcționat la tabloul de bord „API-uri și servicii acum. Pe această pagină, selectați „Ecran de consimțământ OAuth” din opțiunea din stânga.

consent screen

Selectați tipul de persoană pe care doriți să o activați pentru a vă conecta aici.

Alegeți „Intern” dacă numai persoanele cu contul Google al companiei dvs. se vor putea conecta. Dacă utilizatorii dvs. au adrese de e-mail în afara organizației dvs., ar trebui să selectați „Extern”. Cineva are un cont @gmail.com, de exemplu, spre deosebire de o adresă @yourcompanyemail.com.

Când sunteți pregătit să continuați, faceți clic pe butonul „Creați”. Acum puteți începe să adăugați informații despre aplicația dvs.

app registration

Mai întâi, introduceți numele companiei dvs. în zona de nume a aplicației. Când se conectează, utilizatorul va vedea ceva de genul „Smith Training Services solicită acces la contul tău Google”.

De asemenea, trebuie să introduceți adresa de e-mail cu care v-ați conectat la Google. Acest lucru permite utilizatorilor să se întrebe despre ecranul de conectare Google.

După aceea, derulați în jos la zona „Domeniul aplicației”. Adăugați aici linkuri către pagina de pornire a site-ului dvs., pagina cu politica de confidențialitate și pagina cu termenii și condițiile.

app domain

Apoi, faceți clic pe opțiunea „Adăugați domeniu” pentru a introduce numele de domeniu pentru site-ul dvs. web, cum ar fi „example.com”. Dacă doriți să adăugați login Google cu un singur clic pe mai multe site-uri web, puteți face acest lucru făcând clic pe opțiunea „+ Adăugați domeniu”.

app registration

În cele din urmă, trebuie să introduceți una sau mai multe adrese de e-mail, astfel încât Google să vă țină la curent cu orice modificări aduse proiectului dvs. După ce l-ați finalizat, faceți clic pe opțiunea „Salvați și continuați”.

Veți fi apoi direcționat la paginile Scopes and Test Users. Pur și simplu derulați până în partea de jos a ambelor pagini și faceți clic pe opțiunea „Salvați și continuați”.

scopes

Ultima pagină a acestui pas vă va oferi un rezumat al setărilor ecranului de consimțământ OAuth. Următorul pas este să generați cheile necesare pluginului dvs. pentru a vă conecta la Google Cloud. Din meniul din stânga, selectați „Acreditări”, apoi faceți clic pe opțiunea „+ Generați acreditări” din partea de sus a ecranului. Trebuie să alegeți opțiunea „ID client OAuth”.

API keys One-Click Google Login

Aceasta vă va redirecționa către pagina „Creați ID client OAuth”. Alegeți „Aplicație web” din meniul drop-down „Tip de aplicație”.

Client ID

Site-ul web va fi actualizat cu unele setări. Mergeți în zona intitulată „URI de redirecționare autorizate” și faceți clic pe butonul „+ Adăugați URI”.

Acum introduceți următorul URL:

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

Aveți grijă să schimbați example.com cu adresa propriului site web.

Client URI

După aceea, ar trebui să faceți clic pe butonul „Creați” pentru a salva opțiunea. Ar putea dura de la cinci minute la multe ore pentru ca ajustarea să intre în vigoare.

Clientul dvs. OAuth a fost generat cu succes!

Va apărea o fereastră cu „ID-ul dvs. de client” și „Secretul dvs. de client”. Aceste chei trebuie copiate și lipite în pagina de setări a pluginului din zona dvs. de administrare WordPress.

Pur și simplu faceți clic pe pictograma „Copiere” din dreapta pentru a copia fiecare cheie pe rând.

client created

Includerea cheilor Google în pluginul dvs

Acum reveniți la fila browser a site-ului dvs. și selectați fila „Setări” din meniul Setări » Nextend Social Login . Există câmpuri pentru ID-ul clientului și Secretul clientului aici.

Trebuie să copiați și să inserați cheile din Google Cloud Console în aceste zone.

Including Google Keys in Your Plugin

După aceea, asigurați-vă că faceți clic pe butonul „Salvare modificări pentru a salva setările.

Acum trebuie să validați că setările sunt corecte. Acest lucru este semnificativ, deoarece nu doriți ca utilizatorii autentici să întâmpine dificultăți în timp ce încearcă să se autentifice pe site-ul dvs. web.

Save Changes button

Pur și simplu faceți clic pe butonul „Verificați setările”, iar pluginul se va asigura că aplicația Google pe care ați stabilit-o este operațională.

Dacă ați efectuat corect instrucțiunile precedente, ar trebui să vedeți un mesaj care spune „Funcționează OK – Dezactivat”.

you should see a message

Acum puteți face clic pe butonul „Activați” cu încredere pentru a le permite oamenilor să se înregistreze cu ID-ul Google.

Va apărea o notificare care verifică dacă autentificarea Google este acum activată.

Alegerea unui stil de buton și etichetare

Stilul și eticheta implicite ale butonului din Nextend sunt destul de convenționale și vor funcționa pentru majoritatea site-urilor web. Puteți, totuși, să le modificați accesând opțiunea „Butoane” din partea de sus a ecranului.

Acum veți vedea toate stilurile disponibile pentru butonul de conectare socială. Pentru a utiliza un stil diferit, selectați doar butonul radio al acestuia.

Choosing a Button Style

După aceea, puteți modifica formularea butonului modificând conținutul din câmpul „Etichetă de conectare”.

Dacă alegeți, puteți utiliza HTML pentru a adăuga unele formatări de bază la eticheta de conectare. De exemplu, etichetele <b> și </b> pot fi folosite pentru a face textul aldine.

Choosing Labeling

De asemenea, puteți modifica opțiunile „Conectați eticheta” și „Deconectați eticheta”, care permit utilizatorilor să se conecteze și să deconecteze conturile Google de la site-ul dvs. Utilizatorii tehnici își pot construi propriul buton de conectare Google utilizând codul HTML pentru butoane.

Pentru a salva setările, asigurați-vă că faceți clic pe opțiunea „Salvați modificările”.

Eliminarea aplicației dvs. Google din modul de testare

Înapoi în fila browserului Google Cloud, mai trebuie să faceți un lucru. Fereastra pop-up care conține ID-ul și secretul clientului ar trebui să fie în continuare vizibilă. Puteți închide fereastra pop-up făcând clic pe butonul „OK” din partea de jos.

Acum trebuie să selectați „Ecranul de consimțământ OAuth” din meniul din stânga.

Aplicația dvs. Google este în modul „Testare”, după cum puteți vedea. Acest lucru vă permite să testați aplicația cu un grup mic de persoane. Acum îl puteți muta în modul „Producție” după ce primiți un semnal „Funcționează OK” după validarea setărilor folosind pluginul.

testing

Reușiți acest lucru făcând clic pe butonul „Publicați aplicația”. După aceea, veți primi o fereastră pop-up cu titlul „Push to production?”

Pur și simplu faceți clic pe „Confirmare” pentru a permite tuturor să utilizeze o conectare Google într-un singur pas pe site-ul dvs.

push to production

Dacă ați urmat cu atenție această instrucțiune, starea verificării ar trebui să fie acum „Verificarea nu este necesară”.

Aplicația dvs. este acum accesibilă tuturor utilizatorilor Google.

verification status

Când utilizatorii se înscriu pe site-ul dvs., vor avea acum opțiunea de a folosi Google.

Ei pot, totuși, să continue să se autentifice folosind numele de utilizator și parola obișnuite WordPress, dacă doresc.

WordPress login with Google

Rețineți că oamenii se pot conecta numai folosind adresa contului Google pe care au folosit-o pe site-ul dvs. În plus, dacă ați activat înregistrarea utilizatorilor pe site-ul dvs. WordPress, oamenii se pot înregistra instantaneu folosind autentificarea Google cu un singur clic.

Dacă doriți să plasați butonul de conectare Google în altă parte pe site-ul dvs., puteți face acest lucru cu un shortcode. Puteți afla mai multe accesând fila „Utilizare” a Nextend.

googleloginshortcode

Încheierea

Integrarea unei autentificări Google cu un singur clic pe site-ul dvs. WordPress poate economisi timpul utilizatorilor și poate îmbunătăți ratele de conversie. Acest lucru este util în special pentru site-urile web care solicită utilizatorilor să se conecteze, cum ar fi site-uri web cu mai mulți autori, site-uri web de membru și site-uri web care vând cursuri online. Pentru a activa această caracteristică, trebuie să descărcați și să instalați pluginul Nextend Social Login and Registration și să creați o aplicație Google urmând pașii descriși în acest tutorial. Cu funcția de conectare Google cu un singur clic, utilizatorii se pot conecta rapid cu contul lor Google, fără a fi nevoie să introducă detaliile de conectare de fiecare dată.