# Közösségi bejelentkezés: Google és Facebook

> A Google Client ID, a Facebook App ID és az App Secret létrehozása és megadása a Bejelentkezési űrlap widget közösségi gombjaihoz.

A **Bejelentkezési űrlap** widget közösségi gombjai csak akkor működnek, ha a UAE beállításai között megadtad a Google Client ID-t, illetve a Facebook App ID-t és App Secretet. A kulcsokat a Google és a Facebook fejlesztői felületén kell létrehozni.

A kulcsokat a **UAE → Beállítások → Integrations** oldalon a **Login Form** szakaszba illeszd be, majd kattints a **Save** gombra.

![A Google Client ID és a Facebook App ID mezői a UAE integrációs oldalán](./kepek/urlapok-integraciok-kozossegi.webp)

*A Google Client ID és a Facebook App ID mezői a UAE integrációs oldalán* (https://minta-bolt.hu/wp-admin/admin.php?page=uaepro)

A képen a **Google Client ID** mező, valamint a **Facebook App Details** szakasz **App ID** és **App Secret** mezője látszik.

A weboldalnak HTTPS-en kell futnia, különben egyik szolgáltatás sem engedi a bejelentkezést.

## Google Client ID létrehozása

Előbb húzd a **Bejelentkezési űrlap** widgetet az oldalra, és kapcsold be a **Google-bejelentkezés engedélyezése** kapcsolót a **Közösségi bejelentkezés** szakaszban. Ezután a Google fejlesztői konzolján (Google Cloud Console) kövesd az alábbi lépéseket. Be kell jelentkezned a Google-fiókoddal.

### 1. A projekt létrehozása

1. Nyisd meg a Google fejlesztői konzolt.
2. Ha még nincs projekted, kattints a **Create Project** gombra. Ha már van, kattints a projekt nevére, és a megnyíló ablakban válaszd a **New Project** lehetőséget.
3. Adj nevet a projektnek, és kattints a **Create** gombra.
4. A projekt elkészülte után a konzol irányítópultjára kerülsz.

### 2. A beleegyezési képernyő beállítása

1. Az irányítópulton, a **Credentials** alatt válaszd az **OAuth consent** (OAuth hozzájárulási képernyő) pontot.
2. Az alkalmazás típusa maradjon **Public**. Az **Application name** mezőbe írj egy érthető nevet: ez a név látszik majd a látogatónak, amikor a Google engedélyt kér tőle.
3. Töltsd ki a további mezőket.
4. Az **Authorized domains** mezőbe a domainedet írd, `sajatoldalad.hu` formában, `https://` és aldomain nélkül.
5. Kattints a **Save** gombra. Ha nincs minden kötelező mező kitöltve, a gomb nem működik.

### 3. Az OAuth-azonosító létrehozása

1. A **Credentials** oldalon kattints a **Create credentials** gombra, és a listából válaszd az **OAuth Client ID** lehetőséget.
2. Az alkalmazás típusa legyen **Web application**.
3. Add meg az alkalmazás nevét.
4. Az **Authorized JavaScript origins** mezőbe írd a webhelyed pontos címét, például `https://sajatoldalad.hu`, aldomain nélkül.
5. Az **Authorized redirect URIs** mezőbe azt a címet írd, amelyet a widget **További lehetőségek** szakaszában az **Átirányítás bejelentkezés után** mezőbe is megadtál. A kettőnek egyeznie kell.
6. Kattints a **Create** gombra.
7. Megjelenik egy ablak az azonosítóval. Ha nem, nyisd meg a **Credentials** oldalt, kattints az alkalmazásod nevére, és másold ki a **Client ID** értékét.

Illeszd be a **Client ID**-t a **UAE → Beállítások → Integrations** oldal **Login Form** szakaszának **Google Client ID** mezőjébe, és mentsd. A Google-bejelentkezés ezzel kész.

## Facebook App ID és App Secret létrehozása

A **Facebook-bejelentkezés engedélyezése** kapcsoló bekapcsolása után a Facebook fejlesztői oldalán (Meta for Developers) hozz létre egy alkalmazást. Ne a vállalati fiókoddal lépj be.

### 1. Fejlesztői fiók

Ha még sosem használtad a Facebook fejlesztői konzolját:

1. Kattints a bal felső sarokban a **Getting Started** gombra.
2. Az üdvözlő ablakban kattints a **Next** gombra: ez létrehozza a fejlesztői fiókodat.
3. Válaszd a **Developer** szerepet, majd kattints a **Create First App** gombra.

### 2. Az alkalmazás létrehozása

1. A jobb felső sarokban nyisd meg a **My Apps** menüt, és válaszd a **Create App** lehetőséget.
2. A felugró ablakban add meg az alkalmazás nevét (**Display Name**), és kattints a **Create App ID** gombra.
3. A **Add a Product** oldalon a **Facebook Login** mellett kattints a **Set Up** gombra.
4. Platformnak válaszd a **WWW** lehetőséget.
5. Add meg a webhelyed címét (**Site URL**), és kattints a **Save** gombra. A címnek `https://`-sel kell kezdődnie.
6. A bal oldali sávban nyisd meg a **Settings → Basic** oldalt. Itt látod az **App ID**-t: másold ki, és illeszd be a **UAE → Beállítások → Integrations** oldal **Facebook App Details** szakaszának **App ID** mezőjébe.
7. A bal oldali sávban a **Products** alatt válaszd a **Facebook Login** termék **Settings** oldalát. A **Client OAuth Settings** között a **Valid OAuth redirect URIs** mezőbe azt a címet írd, amelyet a widgetben átirányításnak adtál meg.

### 3. Az App Secret

1. A Facebook fejlesztői konzolján nyisd meg a **Settings → Basic** oldalt.
2. Az **App Secret** mező titkosítva (csillagokkal) látszik. Kattints mellette a **Show** gombra, és a megerősítéshez add meg a Facebook-jelszavadat.
3. Másold ki az értéket, és illeszd be a **UAE → Beállítások → Integrations** oldal **Facebook App Details** szakaszának **App Secret** mezőjébe, majd kattints a **Save** gombra.

Az App ID és az App Secret együtt kell ahhoz, hogy a Facebook-bejelentkezés látsszon a weboldalon.

### 4. A JavaScript SDK engedélyezése

1. A Facebook fejlesztői konzolján nyisd meg a **Facebook Login → Settings** oldalt.
2. Kapcsold be a **Login with the JavaScript SDK** lehetőséget.
3. Az **Allowed Domains for the JavaScript SDK** mezőbe írd be a webhelyed címét. A bejelentkezés csak ezeken a domaineken működik.