Jak integrovat službu přihlašování pomocí Google oAuth

1) Přihlašte se přes libovolný Google účet

Ideálně doporučujeme využít ten, na kterém máte registrované i služby jako jsou Google Analytics, Google Search Console či Google Tag Manager. Případně si vytvořte zcela nový Google účet, přes odkaz zde. Po odsouhlasení všech podmínek máte vytvořený Google účet.

2) Přejděte na odkaz

Google Cloud Console je rozhraní ve kterém lze zpravovat různá nastavení. My se zaměříme na sekci Credentials a seznam OAuth 2.0 klientů.

3) Prvotní nastavení

OAuth consent screen

1. UserType - External
2. App name - doporučujeme název Vašeho eshopu
3. user support email - email na dotazy uživatelů v kontextu přihlášení
4. logo file to upload - bez komentáře, není nutno nyní nastavovat
5. Application home page - adresa shopu např. https://www.vaseshop.cz
6. Application private policy link - adresa shopu s odkazem na zpracování osobních údajů např. https://www.vaseshop.cz/gdpr (musí existovat)
7. Application terms of service link - adresa shopu s odkazem na obchodní podmínky např. https://www.vaseshop.cz/obchodni-podminky (musí existovat)
8. Application home page - adresa shopu např. https://www.vaseshop.cz
9. Authorized domains - vložte vaseshop.cz
10. Developer contact information - vložte email na vaše IT, případně zadejte info@aivision.cz

Stiskněte save and continue

Scopes

1. Stiskněte ADD OR REMOVE SCOPES
2. Ze seznamu zaškrtněte pouze .../auth/userinfo.email
3. Potvrďte tlačítkem UPDATE

Stiskněte save and continue

Test users

Stiskněte save and continue

4) Rozhraní Google Cloud Console

Po kliknutí na Credentials v levém menu, se zobrazí seznamy klíčů k jednotlivým službám. Nás zajímá OAuth 2.0 Client IDs. Ať už máte tento seznam prázdný, nebo ne, klikneme v horním menu + Create Credentials.

• a) Levé menu - Credentials
• b) Horní menu - Create Credentials
• Z nabídky vyberte OAuth client ID

5) Průvodce vytvořením OAuth client ID

Předchozím spuštěním
Credentials->Create Credentials->OAuth client ID jste vyvolali průvodce vytvořením klienta, jehož nastavení probereme v následujících bodech:

1. Application type: zvolte Web application
2. Name: zvolte vlastní pojmenování klienta, vhodné je např. mujweb.cz, nebo máte-li více národních domén, mujweb CZ (u dalšího pak zvolíte mujweb SK atd.)
3. Authorized JavaScript origins: zvolte tlačítkoAdd URI a zadejte adresu vaší domény např. https://www.ai-shop.cz. Pozor na konci nesmí být / !
4. Authorized redirect URIs: zde zadejte stejnou hodnotu, jako v předchozím bodě. U obou se jedná vlastně o úvodní adresu vašeho webu.
5. Nakonec klikněte na tlačítko CREATE

6) Zaslání nastavení klienta k propojení s AI-SHOP

Jakmile je klient vytvořen zobrazí se vám dialogové okno s atributy. Pro nás je klíčový JSON soubor, který stáhnete a zašlete nám ho na info@aivision.cz.

My dle těchto atributů propojíme eshop s klientem. Následně by mělo být hotovo, případně si vykomunikujeme úpravu nastavení.

Na obrázku je vyznačen odkaz na stažení souboru JSON, který potřebujeme zaslat.

7) Instalace modulu do AI-SHOP

Po obdržení souboru JSON s nastavením provedeným na vašem google účtu (Goolge Cloud Console), provedeme instalaci podpůrných knihoven a propojíme Google API s vaším eshopem.

Provedeme testy instalace a dostaneme se fáze zobrazené na obrázku. Tento obrázek prokazuje, že vše funguje a chybí poslední krok, tedy přechod z testovacího režimu na publikovaný.

8) Publikování aplikace

1. Přihlásíme se do Google Cloud Console
2. Zvolíme projekt - vpravo vedle loga Google Cloud
3. V levém menu vybereme OAuth consent screen
4. Poslední krok je stisknutí tlačítka PUBLISH APP