1. Hlavní stránka
  2. Aplikace
  3. Přihlašování přes sociální sítě

Přihlašování přes sociální sítě

Nastavení funkcí z tohoto návodu naleznete ve své administraci pouze při aplikovaných šablonách verze 4.0. Na starších šablonách tato funkce není podporována.

Po aktivaci této funkce se budou moci vaši zákazníci do e-shopu registrovat a posléze přihlašovat pomocí svých uživatelských účtů na různých sociálních sítích. Výrazně tak urychlíte nejen přihlašování, ale na pár vteřin zkrátíte i celý registrační proces zákazníka.

Defaultně je v administraci e-shopu aktivováno přihlášení pouze pomocí služby mojeID a pole pro FB atd. jsou prázdná viz. obrázek. Aktivovat můžete přihlašování také přes Facebook, Google a Twitter. V tomto návodu si ukážeme, jak aktivovat Facebook a Google.

Přihlašování přes sociální sítě

Aktivace a nastavení přihlášení přes Facebook

Běžte do administrace e-shopu sekce Aplikace-Přihlašování přes sociální sítě-záložka Faceboook. Zaškrtněte Aktivovat možnost přihlašování zákazníků pomocí Facebook a uložte.

Přihlašování přes sociální sítě

Pro aktivaci funkce Přihlášení přes sociální síť Facebook je nutné získat požadované kódy, které vložíte do pole ID respektive SECRET. Jak a kde kódy získáte?

Pokud již máte běžný Facebook účet, je nutné vytvořit také tzv. developerský účet.

  1. Přihlaste se do svého Facebook účtu
  2. Přejděte na stránku https://developers.facebook.com/  a založte developerský účet kliknutím na Log in.
  3. Vyskočí vám okno, kde propojíte svůj facebookový účet s developerským kliknutím na Next

V aplikace Facebook for developers klikněte na nabídku My Apps a následně vyberte Create App.

V prvním kroku se vás dotazují za jakým účelem chcete vytvářet aplikaci. Zvolte možnost Other a klikněte na tlačítko Další..

Vyberte možnost Spotřebitel a klikněte na tlačítko Další.

Pojmenujte aplikaci např. Podle vašeho e-shopu (nebo jen e-shop login).  Email již bude předvyplněn. Dále pokračujte na Create App.

Nyní přejděte do Setting a zvolte Basic. Do pole Privacy Policy URL vložte adresu stránky vašeho e-shopu, kde máte Zásady ochrany osobních údajů. Do pole Terms of Service URL vložte odkaz na vaše obchodní podmínky a do pole User data deletion vložte opět odkaz na stránku o Ochraně soukromí (viz Privacy Policy URL). Do pole Category doporučujeme vybrat kategorii Shopping. Změny uložte a přejděte zpět na Dashboard.

Na této stránce u možnosti Facebook Login zvolte možnost Set up.

Po levé straně klikněte na tlačítko Settings.

Do pole Valid OAuth Redirect URls vyplňte adresu, kterou najdete v administraci e-shopu Aplikace – Přihlašování přes sociální sítě – Facebook (Valid OAuth redirect URIs). Po vložení URL změny uložte.

Nyní přejděte do App Review a zvolte Permissions and Features. Vyberte public_profile a zvolte Request advanced access.

Na této stránce zvolte svůj Facebookový business účet a pokračujte kliknutím na Start business verification a na další stránce zvolte možnost Spustit ověření. Facebook si po vás vyžádá informace nutné k identifikaci (Název organizace, adresa, kontakty, dokumenty atd.). Poté, co Facebook vaši identitu zkontroluje a schválí, se vraťte do App Review a Permissions and Features, najděte položku Email a postup opakujte.

Nyní přejděte do Settings a Basic kde získáte potžrbné údaje App ID a App Secret. Tyto údaje doplňte do administrace vašeho e-shopu (Aplikace – Přihlašování přes sociální sítě – Facebook) a uložte.

Nyní přejděte do Settings – Advanced, kde naleznete přepínač Allow API Access to app settings přepínač zapněte a změnu uložte.

Poslední krok je zapnutí vašeho nastavení, které provedete přepínačem v horní části obrazovky App mode: Development x Live. Přihlášení oživíte přepnutím do polohy Live. Pokud nastavení provádíte poprvé, zobrazí se vám okno, kde musíte souhlasit s podmínkami služby.

Nyní ověřte, že vše proběhlo v pořádku. Otevřete váš e-shop a najeďte myší na horní lištu do sekce Přihlášení. Pokud vše proběhlo správně, zobrazí se tlačítko Přihlásit přes Facebook a vaši zákazníci se tak mohou na snadno a rychle přihlásit.

Přihlašování přes sociální sítě

Aktivace a nastavení přihlášení přes Google

Stejnou funkcionalitu nabízí také Google. K aktivaci je nutné mít účet na Google a ve službě Google Search Console.

Pokud jste dosud nevyužívali služby v Google Search Console je nejprve nutné získat Google kód na ověření vlastnictví domény a vložit jej do příslušného pole v administraci e-shopu viz. obrázek.

Podrobný návod na verifikaci vaší domény naleznete na: Ověření vlastnictví domény 

Teprve po úspěšném ověření vaší domény lze pokračovat v samotném nastavení funkce Přihlášení přes sociální síť Google!

Dále se již přihlaste do Google cloud console.

Pokud máte Google účet (nebo více účtů), vyberte příslušný Google účet, který požadujete spárovat se službou Google APIs Services. Pokud účet Google prozatím nemáte, účet nejprve založte a poté pokračujte na výše jmenovanou adresu služby.

Po propojení účtů se vám zobrazí rozhraní Google APIs Services pro aktivaci a nastavení požadované funkce.

V levém horním menu vyberte Select a project a po otevření pop up okna vyberte NEW PROJECT. Vyplňte jméno vašeho projektu a zvolte CREATE.

Dále je nutné aktivovat Google API. Zvolte ENABLE APIS AND SERVICES, do vyhledávací pole zadejte Google+, abyste nemuseli hledat příslušnou službu v dlouhém seznamu služeb. Zvolte Google+ API a povolte tlačítkem ENABLE.

Nyní se proklikem APIs & Services Google+ API vrátíte na původní obrazovku.

V dalších krocích získáme tzv. Credentials a příslušné kódy. Pokračujte v menu Credentials v okně zvolte Create credentials a API key.

V následujícím okně se vám objeví váš API klíč. Nyní můžete kliknout na tlačítko Close.

Nyní je nutné nastavení tzv. consent screen. Vyberte Configure consent screen.

V následujícím okně zvolte External a následně potvrďte tlačítkem Create.

Nyní vyplňte pole jako jsou Application name (jméno vaší aplikace – např. Přihlášení Google), dále zvolte Support email (kontakt na který se mohou vaši zákazníci obrátit s žádostí o pomoc), Application Homepage link (domovská stránka vašeho e-shopu). Do pole Application Privacy Policy doplňte adresu, kde se na vašem e-shopu nachází zásady ochrany soukromí uživatele a do políčka Application Terms of Service vložte odkaz vna vaše obchodní podmínky. V políčku Authorized domains uveďte název domény, na které budete tuto aplikaci používat (adresa vašeho e-shopu).

Zvolená doména musí být registrována ve službě Google Search Console viz. úvod tohoto návodu!

Nyní se vraťte na úvodní stránku (Credentials) a zvolte Create Credentials a OAuth client ID.

Nyní se vraťte do administrace e-shopu Aplikace-Přihlašování přes sociální sítě-záložka Google. V poli Valid OAuth redirect URIs vám systém automaticky vygeneruje příslušný kód. Kód zkopírujte a přejděte zpět do Google Cloud Platform.

Zvolte typ aplikace Web Application, doplňte název a do položky Authorised redirect URls vložte zkopírovaný kód z administrace e-shopu. Jako poslední zvolte Create.

POZOR
Po vyplnění pole Authorized redirect URIs je nutné změny aplikovat-tlačítko Create. Pokud vložíte příslušnou URL adresu a ihned přejdete na tlačítko Create a kliknete nedojde k vytvoření-uložení změn! Po vložení speciální URL je nutné kliknout do libovolného prázdného místa vedle pole. Poté dojde k zašednutí pole a je možné kliknout na tlačítko Create. Takto dojde k správnému uložení změn. Jedná se o technologickou komplikaci ve vlastní aplikaci Google APIs. 

Nyní před sebou vidíte vaše Client ID a Client Secret. Tyto údaje zkopírujte a vložte do administrace (Aplikace-Přihlašování přes sociální sítě-záložka Google), zaškrtněte políčko Aktivovat možnost přihlášení zákazníků pomocí Google, změnu uložte a máte hotovo.

Pokračujte do vašeho e-shopu a pokuste se Přihlásit přes Google.

Vyberte účet Google (1), přes který se požadujete přihlásit.

V posledním okně povolte přístup k požadovaným datům pomocí tlačítka ALLOW (1).

Pokud jste prošli všemi kroky návodu přihlášení přes sociální síť Google+ je nyní aktivní.

Poznámka: Rozhraní a nastavení výše popsaných aplikací se často mění a udržovat doprovodné obrázky stále aktuální je prakticky nemožné, omluvte proto možné neaktuálnosti obrázků ve výše uvedených návodech.Funkcionalita však bývá zachována.

Pomohl Vám tento návod? Ano 1 Ne 3