logo

Pojďme vytvořit šablonu Redux + Material UI + OAuth Starter! Pt 1. Co je OAuth?

V této 4dílné sérii tutoriálů nastavíme výchozí šablonu pomocí Material UI , Redux a Google OAuth 2.0. Jak je vidět na obrázku na obálce, tato šablona pomůže zavést front-endové projekty a zároveň se postará o některé obtížnější věci implementované do front-endového světa, konkrétně...

1) Nastavení systému výstrah/oznámení prostřednictvím obchodu Redux
2) Snadno přizpůsobitelný systém témat se zabudovaným řešením CSS-in-JS, které nabízí Material-UI
3) OAuth na straně klienta a navigační panel reagující na mobilní zařízení, který je po přihlášení vyplněn informacemi o uživateli

Živý příklad pro zájemce

Předpoklady

  • Znalost háčků React a Redux
  • Mějte nainstalovaný NPM/Node
  • Znáte koncept knihovny komponent v Reactu (je v pořádku, pokud jste ji nikdy nepoužívali!)
  • Znáte koncepty CSS v JS (také v pořádku, pokud se nikdy předtím nepoužívaly)
  • Účet Google Cloud Platform (zdarma) a ID klienta OAuth 2.0 (také zdarma, může vyžadovat účet Gmail)

Co je OAuth?

V posledních letech se tato tlačítka, která vám umožňují přihlásit se pomocí nějakého jiného účtu sociálních médií, na webu stále častěji objevují.
Jako uživatelé všichni známe výhody; méně hesel ke sledování a lepší pocit důvěry, pokud se můžete přihlásit do neznámé aplikace pomocí již vytvořeného účtu.

Viděli jste to už?

Jako vývojáři poskytuje OAuth vašim uživatelům všechny výše uvedené výhody PLUS možnost snadno používat veřejné informace uživatelů a přidružit uživatele k ID účtu Google (nebo Twitter atd...).

Aniž bych se příliš zabýval plevelem, myslím, že tento Digital Ocean Post odvádí skvělou práci při vysvětlování konceptu

😵

Zpočátku to vypadá složitě, ale tento proces je z velké části abstrahován knihovnou React, která se zde používá, nazvaná reagovat-google-login. Pomáhá vizualizovat si tyto kroky v kontextu aplikace, takže se podívejme, jak to vypadá...

1) Naše aplikace odešle uživateli žádost o povolení, což se spustí po kliknutí na naše tlačítko

2) Uživatel se přihlásí a udělí oprávnění
3) reagovat-google-login (pokud byl krok 2 úspěšný) zahájí krok 3 a požádá o přístup k informacím uživatelů z jejich serverů
4) Token pro přístup OAuth a některé informace o veřejném profilu uživatele jsou odeslány zpět na stranu klienta a uloženy v obchodě redux.

V této šabloně s tokenem nikdy nic neděláme, takže 5 a 6 jsou ponechány k implementaci později.

Získání nastavení prostřednictvím platformy Google Cloud Platform

První věc, kterou potřebujete, aby vaše webová aplikace komunikovala s klientem OAuth společnosti Google, je účet Google Cloud Platform, k tomu potřebujete bezplatný účet Gmail.

Kroky

  • Přejděte na https://console.cloud.google.com/ a zaregistrujte si individuální účet. Ano, pro bezplatnou zkušební verzi musíte zadat kreditní kartu, ale platforma vám nikdy nebude účtovat poplatky poté, co vyčerpáte svůj kredit a navíc získání ID klienta OAuth k použití je také zdarma
  • Jakmile na řídicím panelu (pokud je to poprvé), měla by se v navigační liště zobrazit karta „Můj první projekt“. Toto je výchozí projekt, který se vám spouští automaticky; pro jednoduchost použijeme toto.
  • Na levé straně byste měli vidět nabídku hamburgerů, po rozbalení byste měli vidět kartu „API a služby“, která má podsekci s názvem „Přihlašovací údaje“


Měli byste tu být

  • Poté musíme kliknout na „Konfigurovat obrazovku souhlasu“, vybrat typ uživatele „Externí“ a poté kliknout na Vytvořit
  • Dostanete se do formuláře, kde vyplníte informace o aplikaci (váš e-mail, název aplikace atd...). Vyplňte pouze povinná pole a NEPŘIDÁVEJTE žádné autorizované domény, můžete to udělat později při vytváření clientID.
  • Dále se dostaneme na obrazovku rozsahů, na které musíte nakonfigurovat, jaký typ přístupu od Google OAuth chcete;
  • Klikněte na „Přidat nebo odebrat rozsahy“, přičemž mějte na paměti, že výchozí rozsah pro respond-google-login je následující „e-mail profilu“ a přidejte také rozsah openid, abyste získali jejich ID Google. Jen o kousek dál
  • Dále se vás zeptá, kolik testovacích uživatelů ze 100 si přejete zaregistrovat, ALE toto necháme prázdné, protože tímto omezením jste vázáni pouze v případě, že máte klienta OAuth, který požaduje citlivé rozsahy. Požadujeme pouze e-mail, osobní údaje a ID, které jsou považovány za necitlivé rozsahy, takže se o to nemusíme starat. Váš skutečný limit s tímto OAuth je 10 000 udělených tokenů za den.
  • Konečně přejděte k uložení/pokračujte, nyní se můžeme konečně vrátit k "API &Services" na Credentials.

  • V horní části stránky klikněte na „+ vytvořit přihlašovací údaje“, vyberte „ID klienta OAuth“, vyberte webovou aplikaci, znovu aplikaci pojmenujte (používá se pouze interně) a nyní můžeme přidat autorizované zdroje JavaScriptu. Zatím to uděláme tak, aby to fungovalo na http://localhost:3000 a klikněte na vytvořit.

    Hotovo!

  • Měla by se objevit obrazovka s ID klienta a tajným kódem klienta. Tajný klíč klienta se používá na straně serveru, takže ho zde nepotřebujeme, ale vezmeme ID klienta a někam ho zkopírujeme.

    Poznámka! :Nemusíte skrývat své clientID v .env! Omezili jsme adresy URL, které k němu mají přístup, takže by to mělo být v pořádku na otevřeném prostranství.

V příštím článku provedeme Přihlášení a Odhlásit se komponenty pomocí vašeho clientID, uložte načtené informace o uživateli v úložišti redux a prozkoumejte, jak knihovna zachovává stav přihlášených uživatelů prostřednictvím úložiště na straně klienta!