Bevezetés 

A modul segítségével a webáruház látogatói megadhatják Facebook / Google bejelentkezési adataikat és már a boltunkban regisztrált vásárlóként élvezhetik a további böngészést. 

A Shoprenteres boltokban először telepítenünk kell a Közösségi bejelentkezésmodult a Megjelenés > Modulok menüpontban. Telepítés után szerkeszthetjük a modult, melyben az Általános, a Facebook, a Google és a GoodID fül található. 

Ha a Belépés és regisztráció oldalon a "Regisztráció jóváhagyása" igenre van állítva, akkor abban az esetben a közösségi bejelentkezés modul nem jelenik meg. 

Az Általános fülön megjeleníthetjük, illetve megadhatjuk a modul nevét, engedélyezhetjük állapotát.

Facebook bejelentkezés beállítása

A Facebook fülön engedélyezhetjük a bejelentkezést és saját belépési képet tölthetünk fel a sablonkép helyett. Az App ID és az App Secret azonosítók beírásához további beállításokat kell elvégeznünk a Facebook fiókunkban.

A Facebook bejelentkezés beállításához elsőként létre kell hoznunk egy Meta Developers appot, melyet a következő oldalon tudunk megtenni: https://developers.facebook.com/apps/ 

Amennyiben még nincs semmilyen Facebook alkalmazásunk, úgy kattintsunk a fejlécben található "Get started" lehetőségre:

Haladjunk végig ezen a regisztrációs folyamaton, majd kattintsunk a "Create APP" gombra. 

Az azután felugró ablakban ki kell választanunk, hogy milyen céllal készítjük el az alkalmazást. Itt válasszuk az "Other" lehetőséget, majd a következő oldalon a "Fogyasztó" opciót.

Az ezután megjelenő ablakban az Add an app name-hez beírhatjuk a boltunk nevét, App contact email-nek pedig az email címünket.

Létrehozás után az Add Products to Your App felületen válasszuk ki a Facebook Login lehetőséget és kattintsunk a Set up gombra.

Ezt követően erre a felületre kerülünk, ahol válasszuk ki a WWW ikont.

Itt adjunk meg a boltunk URL címét:



Majd a Facebook Login > Settings menüpontra kattintva adjuk meg a Valid OAuth redirect URl-eket:

A következő két link lesz ez az URL:

{boltcím}/index.php?route=module%2Fsociallogin%2Fcallback&platform=facebook 

{boltcím}/index.php?route=module%2Fsociallogin%2Fcallback&platform=facebook&go_checkout=true 

A {boltcím} helyett a boltunk url-jét kell megadnunk. Amennyiben már van egyedi domain irányítva az áruházunkra, használjuk az elsődlegesnek beállított domainünket.

Például:
https://www.valamilyenboltnev.hu/index.php?route=module%2Fsociallogin%2Fcallback&platform=facebook 

https://www.valamilyenboltnev.hu/index.php?route=module%2Fsociallogin%2Fcallback&platform=facebook&go_checkout=true 

(A példáknál www-s az elsődleges domain, de ha a bolton nem ez van használva, akkor elhagyható a www).

A beállításokat követően, a jobb alsó sarokban található Save Changes gombra kattintva mentsük el a módosításokat.

Ezt követően két dologra lesz még szükségünk, egyrészt meg kell adnunk az engedélykéréseket, amelyeket az alkalmazásunk közvetít majd a bejelentkező személy felé, ezek feltételeként pedig meg kell adnunk a webáruházunkban feltüntetett Adatvédelmi nyilatkozat linkjét, valamint a Személyes adatok kezelését lehetővé tévő menüpontra mutató útvonalat.

Ezt az App settings>Basic  menüpontban tehetjük meg. Lépjünk be, majd adjuk meg a kért URL-eket.

Amennyiben nem hoztunk még létre olyan menüpontot, ahol vásárlóink kérvényezhetik az adataik törlését, ezt könnyen megtehetjük a webáruházunk admin felületére, majd a Tartalom > Szöveges menüpontokba belépve. Itt kattintsunk az "Új hozzáadása" gombra, majd a menüpont típusaként válasszuk a "Link a személyes adatok kezelésére" opciót. A menüpont létrehozását követően csak arra van szükség, hogy megnyissuk a hozzá tartozó aloldalt, és bemásoljuk a címét a "User data deletion" mezőbe.

Ha ezzel elkészültünk, következő lépésként azt kell megadnunk, hogy milyen adatokat kérjünk be a látogatók Facebook oldaláról. Fontos, hogy itt a publikus adatok (név, cím) és az e-mail cím bekérésre kerüljenek, máskülönben nem lesz elegendő adatunk a felhasználói fiók létrehozásához.

Lépjünk be az App Review > Permissions and Features menüpontba.

Itt láthatjuk majd, hogy a fenti két adat már standard access státusszal rendelkezik, azonban nekünk ebben az esetben "Advanced access"-re lesz szükségünk. A menüponton belül a "Get advances access" lehetőség akkor érhető el, ha elvégzünk egy business verification-t. Ezt a business.facebook.com oldalon tudjuk megtenni, viszont a Meta for developers oldal is átirányít minket, amennyiben a verification még nem történt meg.

Az appot szükséges engedélyezni is a megfelelő működéshez: a fejlécben láthatunk egy kapcsolót, amelyet Live-ra szükséges állítanunk.

Ha az appunk kész és engedélyeztük, szükségünk lesz két adatra: az App ID és App Secret kódokra.
Ehhez lépjünk a App settings>Basic menübe, és másoljuk ki a két kódot.

Ezeket a kódokat pedig helyezzük el az admin felületünkön, a Megjelenés > Modulok > Közösségi bejelentkezés > Facebook fülön a megfelelő rubrikákba.

Google bejelentkezés beállítása

Ahhoz, hogy használni tudjuk a Google bejelentkezést, szükséges létrehoznunk egy Google App-ot.

Ehhez – ha még nem tettük meg – regisztráljunk be egy Google fiókot akár a Gmail-en keresztül. Amennyiben ezzel megvagyunk, lépjünk be a fiókunkba és navigáljunk a https://console.developers.google.com oldalra.

Először fogadjuk el a felhasználási feltételeket, ha a Google ezt kéri tőlünk.
Kattintsunk a „Create Project” gombra, majd hozzuk létre a projektet.

Ha létrehoztuk a projektet, az APIs & Services menüponton belül válasszuk ki az "Enabled APIs & Services" menüt, ahol el is kezdhetjük a Google+ API hozzáadását.

Ha a rendelkezésre álló API-k között megtaláltuk ezt, kattintsunk rá duplán, majd az "Enable" gomb használatával engedélyezzük.

Szükséges lesz megadnunk , hogy milyen adatok felhasználására kérünk majd engedélyt a látogatóktól, ezt a következő lépésekkel tehetjük meg.

Lépjünk be az OAuth consent screen menüpontba, és User Type-ként jelöljük meg az "External" opciót, majd kattintsunk a "Create" gombra.

A következő oldalon töltsük ki a szükséges mezőket:

App information:

1. App Name: A beleegyezést kérő alkalmazás neve
2. User Support email: A felhasználók ezen az e-mail címen fogják tudni feltenni a kérdéseiket
3. App logo: Itt tudjuk kiválasztani az Applikáció logóját. A logónak a következő feltételeknek kell megfelelnie:
   - Mérete nem lehet nagyobb 1mb-nál.
   - JPG,PNG és BMP formátum engedélyezett.
   - A logónak négyzet alakúnak kell lennie.
   - 120px széles és 120 px magas legyen a legjobb eredmények érdekében.

App Domain:

1. Application home page: Egy linket szolgáltat a felhasználóknak a főoldalra.
2. Application privacy policy link: Adatvédelmi szabályzathoz link.
3. Application terms of service link: Általános szerződési feltételekhez link.

Authorized domains:

A + Add domain lehetőségre kattintva lehet felvenni domain neveket. Miután hozzáadtunk egy engedélyezett domaint, használhatjuk annak aldomainjeit vagy oldalait. Amennyiben hitelesítő adatainak létrehozásakor engedélyezett JavaScript eredeteket és engedélyezett átirányítási URL-eket adtunk hozzá, akkor azok itt is meg fognak jelenni.

Developer contact information: itt lehet megadni azt az e-mail címet, amelyen keresztül a Google értesítéseket küldhet a változásokról/projektekről.

Ezután az oldal alján kattintsunk a „Save and continue” lehetőségre.

A következő aloldalon a hatóköröket (scopes) szükséges megadnunk.

A hatókörök kifejezik azokat az engedélyeket, amelyek  lehetővé teszik a projekt számára, hogy bizonyos típusú személyes felhasználói adatokhoz hozzáférjen a Google-fiókjukból.

Ha érzékeny vagy korlátozott hatóköröket adunk hozzá, például olyan hatóköröket, amelyek lehetővé teszik a felhasználó e-mailjeinek vagy névjegyeinek elérését, akkor az alkalmazást ellenőrzésre be kell nyújtanunk.

Ezt az „Add or remove scopes” lehetőséggel tehetjük meg.

Alapvetően a következő hatókörökre lesz szükségünk ahhoz, hogy a felhasználói fiók létrejöhessen a webáruházunkban:

Ha ezeket kiválasztottuk, kattintsunk a „Save and continue” lehetőségre.

A következő pontban van lehetőségünk teszt felhasználók hozzáadásásra. Amíg az alkalmazás közzétételének állapota "testing", csak a tesztfelhasználók férhetnek hozzá az alkalmazáshoz. Ennek megadása nem feltétlenül szükséges, ha nem adunk meg teszt felhasználókat, tovább léphetünk a „Save and continue”-ra kattintva.

Summary:

Ennél a lehetőségnél az összegzés láthatók azok a beállítások, amelyeken az előző pontokban végig mentünk. Az itt lévő adatokat még az „Edit” gomb megnyomásával tudjuk módosítani.

Amennyiben mindent rendben találtunk és a Google verikációt kér, akkor nyomjunk a „Prepare for verification” gombra.

Ezután menjünk végig az adatokon még egyszer, míg el nem jutunk a „Final review” lehetőséghez.

Ezután az oldal aljára letekerve pipáljuk ki a „My usage of OAuth Scopes complies with the Google API Services: User Data Policy” lehetőséget és nyomjunk a „Submit for Verification” gombra.

Ha elvégeztük a verifikációt, a dashboardunkra lépve válasszuk ki a Credentials menüpontot, majd kattintsunk a Create credentials gombra, majd válasszuk ki az OAuth client ID lehetőséget.

Az Applikációnk típusa Web application lesz.

Itt két címet kell megadnunk az „Authorized redirect URI” részben, amellyel megmondjuk a Google-nek, hogy bejelentkezés után a felhasználó milyen oldalra kerüljön.
Fontos! Mind a két átszerkesztett cím az Authorized redirect URls rubrikába kerüljön, amennyiben a felette lévő Authorized Javascript origins rubrikába másoljuk bármelyiket, hibaüzenetet fogunk kapni, és nem tudjuk menteni a módosításokat.

A linkeket a következő formátumban szükséges megadnunk:

{boltcím}/index.php?route=module/sociallogin/callback&platform=google_plus

{boltcím}/index.php?route=module/sociallogin/callback&platform=google_plus&go_checkout=true

Hasonlóan, mint a Facebook bejelentkezésnél, a {boltcím} részt szintén a saját boltunk url-jével cseréljük ki.

Fontos! A Google 2021.09.13-tól kezdve csak olyan URl-eket fogad el, amelyek "https://" előtaggal kezdődnek. Amennyiben korábban történt a Google bejelentkezés beállítása és a linkek elején még "http://" szerepel, a további zavartalan működés érdekében ezeket "https://" előtagra szükséges cserélni.

Ha elhelyeztük a linkeket és megadtuk az appunk nevét, kattintsunk a Create gombra, hogy a következő oldalon megkapjuk a bejelentkezés beállításához szükséges kódokat.

Utolsó lépésként nincs más dolgunk, mint a webáruházunk admin felületén belépni a Megjelenés> Modulok> Közösségi bejelentkezés modulba, és a Google fülön megadni a Client ID és Client Secret kódokat.

Sikeres beállítások után így kell működnie a bejelentkezésnek:

Tipp: Ha a beállítást követően a rendszer átdob minket a bejelentkezési felületekre (Facebook és Google bejelentkezésnél egyaránt), de egy piros hibaüzenet fogad minket, a hibát valószínűleg az okozza majd, hogy az url-eket rosszul adtuk meg. Ellenőrizzük, hogy nem került-e a címekbe plusz karakter, akár szóköz is, vagy azt, hogy http-vel vagy https-sel hivatkoztunk-e, esetleg az elsődleges domainünk helyett más domaint használtunk-e. Ezek esetében ugyanis az átirányítás nem lesz sikeres, így hibaüzenetet fogunk kapni a bejelentkezés megkísérlésekor.

GoodID bejelentkezés beállítása

A funkció beállításához lépjünk be a Megjelenés > Modulok menüponton belül a Közösségi bejelentkezés modulba, és válasszuk a GoodID fület.

Itt az engedélyezés után egy logó feltöltésére van szükség, mely a GoodID applikáción belül a Szolgáltatók felületén fog megjelenni.

Fontos: A logónak az alábbi feltételeknek kell megfelelnie:

• A logó minimum 512x512 pixel, maximum 1024x1024 pixel és legfeljebb 2 Mb méretű lehet.
• Maximum 20%-os eltérés lehetséges a szélesség és magasság között.
• Érdemes arra törekedni, hogy kicsiben is jól felismerhető legyen a logó. Azaz, ha egy széltében hosszú logónk van, akkor ne azt kicsinyítsük le és tegyünk köré fehér hátteret, hogy megfeleljen az első két követelménynek, hanem ebben az esetben próbáljunk meg a logónkból jellemző betűt/képet kivágni és azt használni a megfelelő méretben.

Ha az utolsó követelmény nem teljesül, akkor sajnos a GoodID-nek nem áll módjában a logót feltüntetni a „Szolgáltatók” képernyőn (ez az a felület, ahol az összes GoodID-val elérhető webshop és más szolgáltató, pl. bank, fesztivál megtalálható).

A Shoprenter admin felületén hibaüzenettel is találkozhatunk, ha a fenti feltételeknek nem felel meg a logó kép.

Az aktiválás után még szükség van a webáruházban megjelenő logó kiválasztására, ami kék vagy fehér színű lehet:

Amennyiben kérdésünk merülne fel a beállítással kapcsolatban, ezt a support@goodid.net e-mail címen tudjuk feltenni.

A beállítások elvégzése után a közösségi bejelentkezés működése a következő:
Ha a vevő már korábban regisztrált a boltunkban, akkor csak egyszerűen beléptetjük a vevőt a webshopban. Az összekötő kapocs az email cím, tehát a webshopban a vevő email címének meg kell egyeznie a használt közösségi fiók email címével.
Ha nincs ilyen egyezés webáruházunkban, akkor a rendszer létrehozza a vevő fiókját egy legenerált jelszóval, és ide lép be a vevő a közösségi fiókján keresztül. A vevő ezután belépésre használhatja a közösségi fiókját vagy a webshopos fiókját új jelszó igénylése után.