A legtöbb webáruház tulajdonos számára fejtörést okoz, hogy legyen-e kötelező a regisztráció a webáruházában vagy sem. A regisztráció nélkülözése ugyanis egyszerűbb vásárlást jelent, hiszen kevesebb adatot kell megadniuk a látogatóknak, gyorsabb a vásárlási folyamat. A másik oldalról viszont a megfelelő adatok hiányában sokkal nehezebb feléjük utólag marketingezni, és visszatérő vevőkké konvertálni az egyszeri vásárlókat. Némileg a kettő közötti átmenetet jelent a közösségi bejelentkezé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 ehhez először telepítenünk kell a Közösségi bejelentkezés modult 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ó.
Az Általános fülön megjeleníthetjük, illetve megadhatjuk a modul nevét, engedélyezhetjük állapotát.
Fontos! Ha a Beállítások > Webshop beállítások > Belépés és regisztráció beállítások menüpontban 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.
A Facebook bejelentkezés beállítása
Beállítások a Facebook felületén
Beállítások a webáruházunk admin felületén
A Google bejelentkezés beállítása
Beállítások a Google felületén
Beállítások a webáruházunk admin felületén
GoodID bejelentkezés beállítása
A közösségi bejelentkezés működése
A Facebook bejelentkezés beállítása
A modul 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.
Beállítások a Facebook felületén
A Facebook bejelentkezés beállításához elsőként létre kell hoznunk egy Meta Developers appot, melyet ezen az oldalon tudunk megtenni.
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 mezőbe beírhatjuk a boltunk nevét, App contact email mezőbe 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 adjuk meg a boltunk URL címét (az elsődleges domain nevünket).
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.
Fontos! Amennyiben már van egyedi domain irányítva az áruházunkra, használjuk az elsődlegesnek beállított domain nevünket.
Például:
https://www.webaruhazamneve.hu/index.php?route=module%2Fsociallogin%2Fcallback&platform=facebook
A példáknál www-s az elsődleges domain, de ha a boltunkban nem ezt állítottuk be elsődlegesnek, akkor elhagyható a www. Ezt a Beállítások > Webshop beállítások > Domain átirányítás menüpontban lehet leellenőrizni.
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é, másrészt 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én 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 linkjé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 lehetőségre lesz szükségünk. A menüponton belül a Get advanced access opció akkor érhető el, ha elvégzünk egy ún. "business verificationt", azaz igazoljuk vállalkozásunkat. Ezt a business.facebook.com oldalon tudjuk megtenni, viszont a Meta for developers oldal is átirányít minket, amennyiben az igazolási folyamat 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 kell állítanunk.
Beállítások a webáruházunk admin felületén
Ha az appunk kész és engedélyeztük, szükségünk lesz innen két adatra: az App ID és App Secret kódokra.
Ehhez lépjünk az App settings > Basic menübe, és másoljuk ki a két azonosítót.
Ezeket a kódokat helyezzük el a webáruházunk admin felületén a Megjelenés > Modulok > Közösségi bejelentkezés > Facebook fülön a megfelelő rubrikákba.
Amennyiben a modul státuszát is engedélyezettre állítjuk és elmentjük a beállításokat, webáruházunk bejelentkező felületén meg fog jelenni az új Facebook bejelentkezési lehetőség.
A Google bejelentkezés beállítása
Beállítások a Google felületén
Ahhoz, hogy használni tudjuk a Google bejelentkezést, létre kell hoznunk 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 erre az oldalra.
Először fogadjuk el a felhasználási feltételeket, ha a Google ezt kéri tőlünk.
Utána 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, amit a következő lépésekkel tehetünk 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
- App Name: a beleegyezést kérő alkalmazás neve.
- User Support email: a felhasználók ezen az e-mail címen fogják tudni feltenni a kérdéseiket.
- 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,
- 120 px széles és 120 px magas legyen a legjobb eredmények érdekében.
App Domain
- Application home page: egy linket szolgáltat a felhasználóknak a főoldalunkra.
- Application privacy policy link: link az adatvédelmi szabályzatunkhoz.
- Application terms of service link: link az általános szerződési feltételeinkhez.
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ő adataink 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 nekünk a változásokról/projektekről.
Ha megadtuk a fenti adatokat, akkor 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: userinfo.email és userinfo.profile.
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ára. Amíg az alkalmazás közzétételének állapota "testing", csak a teszt felhaszná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 gombra kattintva.
Summary: ennél a lehetőségnél az összegzés láthatók azokkal a beállításokkal, amelyeken az előző pontokban végigmentü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 verifikációt kér, akkor kattintsunk 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.
Utána 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 kattintsunk 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, és 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 ugyanis 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 elsődleges domainjé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.
Beállítások a webáruházunk admin felületén
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 azonosítókat.
Ha a beállításaink megfelelőek, mentés után meg kell jelennie az új bejelentkezési lehetőségnek a bejelentkező oldalunkon.
Erre kattintva a látogató kiválaszthatja, hogy mely Google fiókjával szeretne belépni webáruházunkba.
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 Authorized redirect URI-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 kezdődik-e a hivatkozás, 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 aloldalon (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:
vagy
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 közösségi bejelentkezés működése
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.