Közösségi bejelentkezés

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. 

mceclip1.png

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.

fbapp4.PNG

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

faace4.png

Itt adjuk meg a boltunk URL címét (az elsődleges domain nevünket).

mceclip4.png

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 

https://www.webaruhazamneve.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 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.

perms.png

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.

engedelyek.png

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.

appmodeliv.png

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.

mceclip8.png

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.

fbkozossegi.PNG

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.

g_l_01.png

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.

g_l_03.png

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.

g_l_04.png

g_l_05.png

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.

g_l_07.png

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,
    - 120 px 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őoldalunkra.
  2. Application privacy policy link: link az adatvédelmi szabályzatunkhoz.
  3. 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.

g_l_08.png

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.

mceclip9.png

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

mceclip10.png

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.

g_l_06.png

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.

mceclip7.png

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.

mceclip8.png

Erre kattintva a látogató kiválaszthatja, hogy mely Google fiókjával szeretne belépni webáruházunkba.

mceclip9.png

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.

goodid.PNG

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:

k_k_log_.png  vagy  feh_r_log_.png

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.

Van még kérdésed? Kérdés beküldése

Kérdésed van?

  • Böngéssz a Témák között!
  • Keress rá a konkrét kérdésedre!
  • Ha nem találtál megoldást a problémádra, vedd fel a kapcsolatot kollégáinkkal:
  • Írd meg kérdésed a Kérdés beküldése menüpontban!
  • Írj e-mailt az info@shoprenter.hu címre!
  • Írj chat-en webáruházad adminisztrációs felületén!
  • Hívj bennünket a 06-1/234-5011-es számon munkanapokon 9:00-17:00 között!
  • Hétvégén is elérhetők vagyunk e-mailben és chat-en 10:00-14:00 között.

Hibabejelentés