OAuth 2.0 je štandard, ktorý umožňuje aplikáciám tretích strán bezpečne pristupovať k údajom z webových aplikácií. Môžete ho použiť na načítanie údajov vrátane informácií o profile, plánov atď. ktoré sú hosťované v iných webových aplikáciách, ako sú Facebook, Google a GitHub. Služba to môže urobiť v mene používateľa bez vystavenia jeho poverení aplikácii tretej strany.

V niekoľkých krokoch sa dozviete, ako implementovať OAuth v aplikácii Express pomocou GitHubu ako poskytovateľa OAuth.

Tok OAuth

V typickom postupe OAuth poskytuje váš web používateľom možnosť prihlásiť sa pomocou účtu tretej strany od poskytovateľa, ako je GitHub alebo Facebook. Používateľ môže tento proces spustiť kliknutím na príslušné prihlasovacie tlačidlo OAuth.

Toto ich presmeruje z vašej aplikácie na webovú stránku poskytovateľa OAuth a predloží im formulár súhlasu. Formulár súhlasu obsahuje všetky informácie, ktoré chcete od používateľa získať, čo môžu byť jeho e-maily, obrázky, plány atď.

Ak používateľ autorizuje vašu aplikáciu, tretia strana ho presmeruje späť do vašej aplikácie pomocou kódu. Vaša aplikácia potom môže vymeniť prijatý kód za prístupový token, ktorý potom môže použiť na prístup k dostupným užívateľským údajom.

instagram viewer

Implementácia tohto toku v expresnej aplikácii zahŕňa niekoľko krokov.

Krok 1: Nastavenie vývojového prostredia

Najprv vytvorte prázdny adresár projektu a cd do vytvoreného adresára.

Napríklad:

mkdir github-app
cd github-app

Ďalej inicializujte npm vo svojom projekte spustením:

npm init -y

Tento príkaz vytvorí a package.json súbor, ktorý obsahuje podrobnosti o vašom projekte, ako je názov, verzia atď.

Tento tutoriál bude predstavovať použitie systému modulov ES6. Nastavte to otvorením svojho package.json súbor a špecifikácia "typ": "modul" v objekte JSON.

Krok 2: Inštalácia závislostí

Aby váš server správne fungoval, budete musieť nainštalovať niekoľko závislostí:

  • ExpressJS: ExpressJS je rámec NodeJS, ktorý poskytuje robustnú sadu funkcií pre webové a mobilné aplikácie. Použitie Express zjednoduší proces vytvárania servera.
  • Axios: Axios je klient HTTP založený na sľuboch. Tento balík budete potrebovať na odoslanie žiadosti POST o prístupový token na GitHub.
  • dotenv: dotenv je balík, ktorý načíta premenné prostredia zo súboru .env do objektu process.env. Budete ho potrebovať na skrytie dôležitých informácií o vašej aplikácii.

Nainštalujte ich spustením:

npm Inštalácia vyjadriť axios dotenv

Krok 3: Vytvorenie expresnej aplikácie

Musíte vytvorte základný expresný server spracovávať a odosielať požiadavky poskytovateľovi OAuth.

Najprv vytvorte index.js súbor v koreňovom adresári vášho projektu, ktorý obsahuje nasledovné:

// index.js
importovať expresné od "expresné";
importovať axios od "axios";
importovať * ako dotenv od "dotenv";
dotenv.config();
konšt app = express();
konšt port = process.env. PORT || 3000
app.listen (port, () => {
konzoly.log(`Aplikácia beží na porte ${port}`);
});

Tento kód importuje expresnú knižnicu, vytvorí inštanciu expresnej inštancie a začne počúvať prevádzku na porte 3000.

Krok 4: Vytvorenie obslužných programov trasy

Na spracovanie toku OAuth budete musieť vytvoriť dva obslužné nástroje smerovania. Prvý presmeruje používateľa na GitHub a požiada o autorizáciu. Druhý spracuje presmerovanie späť do vašej aplikácie a požiada o prístupový token, keď používateľ autorizuje vašu aplikáciu.

Prvý obslužný program trasy by mal používateľa presmerovať https://github.com/login/oauth/authorize? parametre.

Na adresu URL OAuth GitHub budete musieť odovzdať sadu požadovaných parametrov, ktoré zahŕňajú:

  • Client Id: Ide o ID, ktoré dostane vaša aplikácia OAuth pri registrácii na GitHub.
  • Rozsah: Ide o reťazec, ktorý určuje rozsah prístupu, ktorý má aplikácia OAuth k informáciám používateľa. Zoznam dostupných rozsahov nájdete v Dokumentácia OAuth GitHub. Tu budete používať „čítaj: užívateľ” rozsah, ktorý poskytuje prístup na čítanie údajov profilu používateľa.

Pridajte nasledujúci kód do svojho index.js súbor:

// index.js
app.get("/auth", (req, res) => {
// Uloženie parametrov do objektu
konšt parametre = {
 rozsah: "čítaj: užívateľ",
client_id: proces.env.CLIENT_ID,
 };
// Prevod parametrov na reťazec zakódovaný v adrese URL
konšt urlEncodedParams = Nový URLSearchParams (params).toString();
 res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Tento kód implementuje prvý obslužný program trasy. Ukladá požadované parametre do objektu a konvertuje ich do formátu kódovaného URL pomocou API URLSearchParams. Potom pridá tieto parametre do adresy URL OAuth GitHub a presmeruje používateľa na stránku súhlasu GitHub.

Pridajte nasledujúci kód do svojho index.js súbor pre druhý obslužný program trasy:

// index.js
app.get("/github-callback", (req, res) => {
konšt { kód } = req.query;
konšt telo = {
client_id: proces.env.CLIENT_ID,
client_secret: proces.env.CLIENT_SECRET,
 kód,
 };


nech prístupový token;
 const options = { headers: { accept: "application/json" } };
axios
 .post("https://github.com/login/oauth/access_token", telo, možnosti)
 .potom((odpoveď) => response.data.access_token)
 .potom((token) => {
 accessToken = token;
 res.redirect(`/?token=${token}`);
 })
 .chytiť((chyba) => res.status(500).json({ err: err.message }));
});

Druhý obslužný program trasy extrahuje súbor kód sa vrátil z GitHubu v req.query objekt. Potom vytvorí POST žiadosť pomocou Axios do " https://github.com/login/oauth/access_token" s kódom, client_id, a client_secret.

The client_secret je súkromný reťazec, ktorý vygenerujete pri vytváraní aplikácie GitHub OAuth. Keď prístupový token sa úspešne načíta, uloží sa do premennej na neskoršie použitie. Používateľ je nakoniec presmerovaný do vašej aplikácie s prístupový token.

Krok 5: Vytvorenie aplikácie GitHub

Ďalej budete musieť vytvoriť aplikáciu OAuth na GitHub.

Najprv sa prihláste do svojho účtu GitHub a potom prejdite na nastavenie, prejdite nadol na Nastavenia vývojáraa vyberte Aplikácie OAuth. Nakoniec kliknite na „Zaregistrujte novú aplikáciu.”

GitHub vám poskytne nový formulár žiadosti OAuth, ako je tento:

Vyplňte požadované polia požadovanými údajmi. "Adresa URL domovskej stránky" by mala byť " http://localhost: 3000”. Váš "Adresa URL spätného volania autorizácie" by mala byť " http://localhost: 3000/github-callback“. Môžete tiež voliteľne povoliť tok zariadení, čo vám umožní autorizovať používateľov pre aplikáciu bez hlavy, ako je napr nástroj CLI alebo Git Credential Manager.

Tok zariadení je vo verejnej beta verzii a môže sa zmeniť.

Nakoniec zasiahnite Registrácia aplikácie tlačidlo.

GitHub vás presmeruje na stránku s vaším client_id a možnosť vygenerovať si svoj client_secret. Skopírujte svoje client_id, vygenerujte si svoj client_secreta skopírujte ho tiež.

Vytvorte súbor .env a uložiť client_id a client_secret vnútri. Pomenujte tieto premenné CLIENT_ID a CLIENT_SECRET.

Váš postup OAuth je teraz dokončený a teraz môžete pomocou prístupového tokenu zadávať požiadavky na čítanie údajov používateľa (t rozsah ste špecifikovali skôr).

Dôležitosť protokolu OAuth 2.0

Použitie OAuth 2.0 vo vašej aplikácii výrazne zjednodušuje úlohu implementácie toku autentifikácie. Zabezpečuje používateľské údaje vašich zákazníkov pomocou štandardu Secure Sockets Layer (SSL), čím zaisťuje, že zostanú súkromné.