Otvorená autorizácia, tiež známa ako OAuth, je protokol používaný na autorizáciu používateľa na vašom webe pomocou služieb tretích strán, ako sú Google, Github, Facebook atď. Služba tretej strany zdieľa niektoré údaje (meno, e-mail, profilový obrázok atď.).) na vašom webe a potom autorizuje používateľa v jeho mene bez toho, aby spravoval heslá a používateľské mená pre váš web, a používateľom tak ušetrí veľa ďalších problémov.

Ako funguje OAuth

Keď používateľ klikne na „Prihlásiť sa pomocou Google“, presmeruje ho na stránku súhlasu s Google OAuth. Keď používateľ súhlasí so súhlasom a overí svoju totožnosť na Googli, Google kontaktuje váš web ako službu tretej strany a autorizuje ho v jeho mene a bude s ním zdieľať niektoré údaje. Týmto spôsobom môže byť používateľ autorizovaný bez toho, aby musel osobitne spravovať prihlasovacie údaje pre svoj web.

Implementácia protokolu Google OAuth pomocou uzla.js

Takmer všetky programovacie jazyky poskytujú rôzne knižnice na implementáciu protokolu google oauth na autorizáciu používateľov. Uzol.js poskytuje knižnice „passport“ a „passport-google-oauth20“ na implementáciu google oauth. V tomto článku implementujeme protokol oauth, ktorý používateľom autorizuje použitie uzla.js.

Vytvorte projekt na Googli

Prvým krokom k implementácii protokolu Google OAuth je vytvorenie projektu v konzole pre vývojárov Google pre váš web. Tento projekt sa používa na získanie kľúčov API, ktoré sa používajú na zadávanie žiadostí spoločnosti Google o otvorené overenie. Choďte na nasledujúci odkaz a vytvorte si projekt.

https: // konzola.vývojári.google.com

Konfigurácia projektu Google

Po vytvorení projektu choďte do projektu a z ľavej ponuky vyberte možnosť „Obrazovka súhlasu s protokolom OAuth“.

Kliknite na tlačidlo „vytvoriť“ a poskytnite všetky podrobnosti o svojom projekte. Pokračujte kliknutím na tlačidlo „Uložiť a pokračovať“.

Teraz uveďte rozsah vášho projektu. Rozsahy sú typy povolení na prístup k údajom používateľa z účtu Google. Musíte nastaviť oprávnenie, aby ste mohli získať konkrétne údaje o používateľoch zo svojho účtu Google. Kliknite na tlačidlo „Uložiť a pokračovať.“

Teraz podľa potreby pridajte do projektu testovacích používateľov. Testovací používatelia sú jedinými povolenými používateľmi, ktorí majú prístup k vašej webovej aplikácii v testovacom režime. Zatiaľ nezadáme žiadneho testovacieho používateľa a kliknutím na tlačidlo „Uložiť a pokračovať“ prejdeme na stránku súhrnu projektu.

Skontrolujte svoj projekt na súhrnnej stránke a uložte konfiguráciu. Teraz vygenerujeme poverenia pre náš projekt. Vyberte kartu „Poverenia“ v ľavej bočnej ponuke a kliknutím na tlačidlo „Vytvoriť poverenia“ v hornej časti vygenerujte OAuth 2.0 ID klientov.

V rozbaľovacej ponuke vyberte možnosť „ID klienta OAuth“ a zadajte typ aplikácie ako „Webová aplikácia“ a názov vašej aplikácie.

Na tej istej stránke musíme uviesť dva URI, „Authorized Javascript Origins“ a „Authorized redirect URIs“. „Autorizovaný pôvod javascriptov“ je pôvod HTTP vašej webovej aplikácie a nemôže mať žiadnu cestu. „Autorizované presmerovanie URI“ je presný URI s cestou, na ktorú bude používateľ po autentifikácii google presmerovaný.

Po zadaní všetkých požadovaných položiek kliknite na „vytvoriť“, čím vytvoríte poverenia OAuth.

Inicializačný uzol.js projekt

Doteraz sme vytvorili projekt google, ktorý pomocou aplikácie google autorizuje používateľov našej aplikácie. Teraz ideme iniciovať uzol.js projekt na implementáciu protokolu oauth. Vytvorte adresár s názvom „auth“ a spustite expresný projekt.

[chránené e-mailom]: ~ $ mkdir auth
[chránené e-mailom]: ~ $ cd auth
[chránené e-mailom]: ~ $ npm init -y

Inštalácia požadovaných balíkov npm

Implementovať Google OAuth pomocou uzla.js, musíme si nainštalovať nejaké balíčky npm. Použijeme výrazy „pas“, „expres“, „cesta“ a „pas-google-oauth20“. Nainštalujte tieto balíčky pomocou npm.

[chránené e-mailom]: ~ $ npm inštalácia expresného pasu cesta pas-google-oauth20

Písací uzol.js kód

Najskôr napíšeme dve jednoduché html webové stránky, jednu s tlačidlom a po kliknutí na tlačidlo autorizujeme používateľa. Druhá stránka bude autorizovaná a používateľ bude po autorizácii presmerovaný na autorizovanú stránku. Vytvorte súbor 'public / index.html '.

Autorizovať tu

Teraz vytvorte súbor 'public / success.html 's nasledujúcim obsahom.

Autorizovaný

Po vytvorení webových stránok teraz napíšeme kód, ktorý používateľom umožní používať google oauth. Vytvorte index súborov.js '.

// import požadovaných balíkov
const express = require ('express');
const passport = require ('pas');
const path = require ('cesta');
const GoogleStrategy = require ('passport-google-oauth20').Stratégia;
const app = express ();
// definovanie parametrov
// ID klienta je parameter, ktorý získame z konzoly pre vývojárov Google
CLIENT_ID = ”xxxxxxx”;
// tajný kód klienta bude prevzatý aj z konzoly pre vývojárov Google
CLIENT_SECRET = ”xxxxx”;
// užívateľ bude po autorizácii presmerovaný na CALLBACK_URL
CALLBACK_URL = ”http: // localhost: 8000 / authorized”;
// číslo portu musí byť rovnaké ako číslo definované v konzole pre vývojárov
PORT = 8000;
// konfigurácia middlewaru pasu
aplikácia.použitie (pas.initialize ());
aplikácia.použitie (pas.session ());
cestovný pas.serializeUser (funkcia (id, hotovo)
hotovo (null, id);
);
cestovný pas.deserializeUser (function (id, done)
hotovo (null, id);
);
// nasledujúci middleware bude spustený vždy, keď bude vydaný pas. Zavolá sa metóda autentifikácie a vráti rôzne parametre definované v rozsahu.
cestovný pas.použitie (nová GoogleStrategy (
clientID: CLIENT_ID,
clientSecret: CLIENT_SECRET,
callbackURL: CALLBACK_URL
,
asynchronná funkcia (accessToken, refreshToken, profil, e-mail, CB)
return cb (null, email.id);

));
// poskytovanie domovskej stránky aplikácie
aplikácia.get ('/', (požiadavka, res) =>

res.sendFile (cesta.pripojiť sa (__ dirname + '/ public / index.html '));
);
// stránka poskytujúca úspech pre aplikáciu
aplikácia.get ('/ success', (požiadavka, res) =>

res.sendFile (cesta.pripojiť sa (__ dirname + '/ public / success.html '));
);
// užívateľ bude presmerovaný na stránku google auth vždy, keď klikne na cestu „/ google / auth“.
aplikácia.get ('/ google / auth',
cestovný pas.autentifikácia ('google', scope: ['profil', 'e-mail'])
);
// presmerovanie zlyhania autentifikácie je definované v nasledujúcej trase
aplikácia.získať („/ autorizované“,
cestovný pas.autentifikovať ('google', failureRedirect: '/'),
(požiadavka, res) =>

res.presmerovanie („/ uspech“);

);
// bežiaci server
aplikácia.počúvať (PORT, () =>

konzola.denník („Server beží na porte“ + PORT)
)

Testuje sa Google OAuth

Teraz je naša aplikácia pripravená a môžeme vyskúšať, či autorizuje používateľov pomocou služby google oauth. Prejdite do koreňového adresára a spustite aplikáciu.

[chránené e-mailom]: ~ $ index uzlov.js

Teraz zadajte adresu URL svojej aplikácie do prehliadača.

http: // localhost: 8000

Zobrazuje domovskú stránku s ukotvenou značkou.

Keď klikneme na položku „Autorizovať tu“, dôjde k presmerovaniu na stránku google oauth.

Názov vašej aplikácie „Test“ sa zobrazuje na stránke overenia Google. Keď autorizujete svoj účet, dostanete sa na autorizovanú stránku.

Záver

Správa používateľských mien a hesiel pre rôzne webové aplikácie nie je pre používateľov šťastnou úlohou. Mnoho používateľov opustí vašu webovú aplikáciu bez registrácie svojho účtu len preto, že nechcú spravovať poverenia. Proces autorizácie vo vašej webovej aplikácii alebo na webovej stránke je možné zjednodušiť pomocou služieb tretích strán, ako sú Google, Facebook atď. Tieto služby autorizujú používateľov v ich mene a používateľ nemusí spravovať poverenia osobitne. V tomto článku sme implementovali protokol google oauth, ktorý oprávňuje používateľov na používanie uzla.js.