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

> A WP belépés és regisztráció widget Közösségi bejelentkezés/regisztráció szakasza: Facebook-alkalmazás, Google-gomb beállításai és a Google-gomb mindkét űrlapon.

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.

![A Közösségi bejelentkezés/regisztráció szakasz bekapcsolt Facebook kapcsolóval, az Elrendezés mezővel és az Átirányítási URL mezővel](./kepek/kozosseg-funkciok-5-facebook-panel-kozossegi.webp)

*A Közösségi bejelentkezés/regisztráció szakasz bekapcsolt Facebook kapcsolóval, az Elrendezés mezővel és az Átirányítási URL mezővel* (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.

![A Közösségi bejelentkezés/regisztráció szakasz bekapcsolt Google és Űrlap elrejtése kapcsolóval, a Google-gomb beállításaival](./kepek/kozosseg-funkciok-5-google-panel-kozossegi.webp)

*A Közösségi bejelentkezés/regisztráció szakasz bekapcsolt Google és Űrlap elrejtése kapcsolóval, a Google-gomb beállításaival* (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.