Belépés: Facebook és Google bejelentkezés

A közösségi bejelentkezéssel a látogatók egy már meglévő fiókkal léphetnek be, nem kell új jelszót kitalálniuk. A WP belépés és regisztráció widget Közösségi bejelentkezés/regisztráció szakasza a Facebook- és a Google-gombot adja hozzá az űrlaphoz.

Előkészületek

• A widget a Pro bővítmény része. Az ingyenes bővítmény zárolt Pro widgetként listázza, és nem adja hozzá az Elementorhoz.
• Kapcsold be a widgetet: The Plus Addons → Widgets, keress rá a WP belépés és regisztráció névre.
• A Beállítások → Általános → Tagság alatt a Bárki regisztrálhat legyen bejelölve. A Facebook-belépést a bővítmény addig elutasítja, amíg ez ki van kapcsolva, a meglévő tagoknál is.
• Facebookhoz: fejlesztői fiók és egy alkalmazás a Facebook Login termékkel. Google-hoz: Google Client ID.

Facebook-belépés

1. lépés: Facebook-alkalmazás létrehozása

A Meta fejlesztői felületének képernyői gyakran változnak, ezért a feliratok eltérhetnek attól, amit látsz.

1. Jelentkezz be a Facebook fejlesztői felületére. Ha még nincs fejlesztői fiókod, kattints a Get Started gombra, és fejezd be a regisztrációt.
2. Az alkalmazások oldalán kattints a Create App gombra.
3. Válaszd ki az alkalmazás típusát, és folytasd.
4. Add meg az alkalmazás nevét és egy kapcsolattartó e-mail-címet, majd hozd létre az alkalmazást.
5. Az alkalmazás oldalsávjában nyisd meg a Settings → Basic oldalt.
6. Másold ki az App ID értékét, és a Show gomb után az App Secret értékét.
7. Adj meg adatvédelmi nyilatkozat URL-t, válassz kategóriát, és mentsd a módosításokat.
8. Kapcsold az alkalmazást Live módba.
9. Add hozzá az alkalmazáshoz a Facebook Login terméket.
10. A Facebook Login → Settings oldalon add meg a belépőűrlapot tartalmazó oldal címét.
11. Kapcsold be a Login with JavaScript SDK lehetőséget, add hozzá a domained az engedélyezett domainekhez, és mentsd.

2. lépés: az alkalmazáskulcsok mentése

1. Nyisd meg a The Plus Addons → Settings oldalt, és keresd meg az API csoportban a Login with Facebook sort.
2. Kattints a Configure gombra, illeszd be az App ID és az App Secret ID értékét, majd mentsd.

3. lépés: a gomb megjelenítése a widgetben

1. Add hozzá a WP belépés és regisztráció widgetet, a Típus bármi lehet az Elfelejtett jelszó kivételével.
2. Nyisd meg a Közösségi bejelentkezés/regisztráció szakaszt, és kapcsold be a Facebook kapcsolót.
3. Válassz Elrendezés értéket (Elrendezés 1 vagy Elrendezés 2), állítsd be az Igazítás mezőt, és ha kell, adj meg Átirányítási URL-t a belépés utáni oldalhoz. Ezután tedd közzé az oldalt.

https://minta-bolt.hu/wp-admin/post.php?post=31&action=elementor

A képen a Facebook kapcsoló alatt az Elrendezés mező látszik, lejjebb a Google kapcsoló, az Igazítás, az Átirányítási URL és az Űrlap elrejtése.

Működés és korlátok

• A gomb a Facebook JavaScript SDK-ját használja, és elkéri a látogató e-mail-címét.
• A webhely az App ID és az App Secret segítségével ellenőrzi a belépést, majd beléptet egy azonos e-mail-című tagot, vagy új fiókot hoz létre.
• A bejelentkezés csak akkor jut el a webhelyedhez, ha a Facebook megosztja a látogató e-mail-címét. Nélküle a gomb megnyomásának nincs hatása.
• Ha a Bárki regisztrálhat ki van kapcsolva, a bővítmény minden Facebook-belépést elutasít, a meglévő tagokét is.
• A Típus Bejelentkezés vagy Regisztrálás, Normál űrlap elrendezésnél az Űrlap elrejtése kapcsolóval csak a közösségi gombok maradnak.
• Éles webhelyen a bevezetés előtt próbáld végig a folyamatot egy tesztfiókkal.

A gomb nem jelenik meg? Ellenőrizd, hogy az App ID el van-e mentve a Login with Facebook alatt, hogy az alkalmazás Live módban van-e, és hogy a domained engedélyezve van-e a JavaScript SDK-hoz. A belépés regisztrációs üzenettel hibázik? Jelöld be a Bárki regisztrálhat négyzetet a Beállítások → Általános oldalon.

Google-belépés beállítása

1. lépés: Google Client ID létrehozása

A Google felületének képernyői változhatnak, ezért a feliratok eltérhetnek a leírtaktól.

1. Jelentkezz be a Google-fiókodba, és nyisd meg a Google fejlesztői konzolt (Google Developers Console).
2. Ha még nincs projekted, kattints a CREATE PROJECT hivatkozásra, add meg a projekt nevét, és kattints a CREATE gombra.
3. A bal oldalsávban nyisd meg az OAuth consent screen oldalt.
4. Válaszd ki a felhasználó típusát, és kattints a CREATE gombra. Az Internal csak a szervezeted tagjainak elérhető, az External minden Google-fiókkal rendelkezőnek.
5. Add meg az alkalmazás adatait. Az App name, a User support email és a Developer contact information kötelező, a többi az alkalmazás élesítéséig nem. Kattints a SAVE AND CONTINUE gombra.
6. A Scopes és a Test users oldalon is kattints a SAVE AND CONTINUE gombra.
7. Az összegző oldal alján kattints a BACK TO DASHBOARD gombra.
8. Az irányítópulton kattints a PUBLISH APP gombra az alkalmazás közzétételéhez.
9. A bal oldalsávban nyisd meg a Credentials oldalt, és kattints a + CREATE CREDENTIALS → OAuth client ID lehetőségre.
10. Az Application type listában válaszd a Web application értéket.
11. Add meg a Name mezőben az alkalmazás nevét. Az Authorised JavaScript origins és az Authorised redirect URIs alatt az ADD URI gombbal add hozzá a webhelyed címét (például https://www.sajatoldalad.hu), majd kattints a CREATE gombra.
12. A következő oldalon megkapod a Client ID és a Client Secret értékét. Másold ki őket egy jegyzettömbbe.

2. lépés: a Client ID mentése

1. Nyisd meg a The Plus Addons → Settings oldalt.
2. Az API csoportban keresd meg a Login with Google sort, és kattints a fogaskerék ikonra (Configure).
3. A felugró ablakba illeszd be a Google Client ID-t, és mentsd.

3. lépés: a gomb bekapcsolása

A WP belépés és regisztráció widgetben a Típus bármi lehet az Elfelejtett jelszó kivételével. A Közösségi bejelentkezés/regisztráció szakaszban kapcsold be a Google kapcsolót. A gomb kinézetének beállításait lejjebb találod.

Google-belépés mindkét űrlapon

A Belépés és regisztráció típusnál a Google-gomb csak a regisztrációs oldalon jelenik meg. Ha mindkét oldalon szeretnéd, egy második widget segít.

1. Add hozzá a WP belépés és regisztráció widgetet, állítsd a Típus mezőt Belépés és regisztráció értékre, és hagyd az Elrendezés mezőt Normál űrlap értéken.
2. A Közösségi bejelentkezés/regisztráció szakaszban hagyd kikapcsolva a Google kapcsolót.
3. Add hozzá a második WP belépés és regisztráció widgetet közvetlenül az első alá.
4. Állítsd a második widget Típus mezőjét Bejelentkezés (vagy Regisztrálás) értékre, Normál űrlap elrendezéssel.
5. Ennek a Közösségi bejelentkezés/regisztráció szakaszában kapcsold be a Google, majd az Űrlap elrejtése kapcsolót.

https://minta-bolt.hu/wp-admin/post.php?post=32&action=elementor

A képen a Google és az Űrlap elrejtése kapcsoló bekapcsolva látszik, köztük a gomb megjelenését állító mezők.

A második widget így csak a Google-gombot mutatja, az első widget belépő és regisztrációs füle alatt.

A Google-gomb beállításai

Beállítás	Választható értékek
Google One Tap bejelentkezés	Megjeleníti vagy elrejti a One Tap felületet a gomb helyett
Típus	Normál, Ikon
Sablon	Világos, Sötétkék, Sötétfekete
Forma	Téglalap alakú, Kapszula
Szöveg	Bejelentkezés a Google-lel, Regisztráció Google-fiókkal, Folytatás Google-fiókkal, Bejelentkezés
Méret	Nagy, Közepes, Kicsi, Egyéni (a Szélesség mezővel)

A Hosszú cím, az Igazítás és az Átirányítási URL mező is ebben a szakaszban van: az utolsóval a Google-belépés után egy másik oldalra küldheted a látogatót.

Működés és korlátok

• Az Űrlap elrejtése a widget mezőit eltávolítja, a Google-gombot meghagyja. Csak a Bejelentkezés és a Regisztrálás típusnál, Normál űrlap elrendezéssel kapcsolható.
• A Google-fiók, amelynek e-mail-címe egyezik egy meglévő felhasználóéval, azt a felhasználót lépteti be. Új fiók csak bekapcsolt Bárki regisztrálhat mellett jön létre.
• A gomb akkor is megjelenik, ha nincs mentve Client ID, de a belépés nélküle nem működik. Előbb mentsd el: The Plus Addons → Settings → API → Login with Google.
• Belépés és regisztráció típusnál a Google a regisztrációs oldalon jelenik meg, ezért kell a második widget.