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

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.

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.