OAuth 2.0 je standard, který aplikacím třetích stran umožňuje bezpečný přístup k datům z webových aplikací. Můžete jej použít k načtení dat včetně informací o profilu, plánů atd. který je hostován na jiných webových aplikacích, jako je Facebook, Google a GitHub. Služba to může provést jménem uživatele, aniž by byla vystavena jeho přihlašovací údaje aplikaci třetí strany.

V několika krocích se dozvíte, jak implementovat OAuth v aplikaci Express pomocí GitHubu jako poskytovatele OAuth.

Tok OAuth

V typickém toku OAuth poskytuje váš web uživatelům možnost přihlásit se pomocí účtu třetí strany od poskytovatele, jako je GitHub nebo Facebook. Uživatel může tento proces spustit kliknutím na příslušné přihlašovací tlačítko OAuth.

To je přesměruje z vaší aplikace na web poskytovatele OAuth a předloží jim formulář souhlasu. Formulář souhlasu obsahuje všechny informace, které chcete od uživatele získat, což mohou být jeho e-maily, obrázky, plány atd.

Pokud uživatel autorizuje vaši aplikaci, třetí strana je přesměruje zpět do vaší aplikace pomocí kódu. Vaše aplikace pak může přijatý kód vyměnit za přístupový token, který pak může použít pro přístup k dostupným uživatelským datům.

instagram viewer

Implementace tohoto toku v aplikaci Express zahrnuje několik kroků.

Krok 1: Nastavení vývojového prostředí

Nejprve vytvořte prázdný adresář projektu a CD do vytvořeného adresáře.

Například:

mkdir github-app
CD aplikace github

Dále inicializujte npm ve svém projektu spuštěním:

npm init -y

Tento příkaz vytvoří a package.json soubor, který obsahuje podrobnosti o vašem projektu, jako je název, verze atd.

Tento tutoriál bude představovat použití systému modulů ES6. Nastavte to otevřením svého package.json soubor a specifikaci "typ": "modul" v objektu JSON.

Krok 2: Instalace závislostí

Aby váš server fungoval správně, budete muset nainstalovat několik závislostí:

  • ExpressJS: ExpressJS je framework NodeJS, který poskytuje robustní sadu funkcí pro webové a mobilní aplikace. Použití Express zjednoduší proces vytváření serveru.
  • Axios: Axios je klient HTTP založený na slibech. Tento balíček budete potřebovat k odeslání požadavku POST na přístupový token na GitHub.
  • dotenv: dotenv je balíček, který načítá proměnné prostředí ze souboru .env do objektu process.env. Budete jej potřebovat ke skrytí důležitých informací o vaší aplikaci.

Nainstalujte je spuštěním:

npm Nainstalujte expresní axios dotenv

Krok 3: Vytvoření expresní aplikace

Musíš vytvořit základní expresní server zpracovávat a podávat požadavky poskytovateli OAuth.

Nejprve vytvořte index.js soubor v kořenovém adresáři vašeho projektu obsahující následující:

// index.js
import vyjádřit z "vyjádřit";
import axios z "axios";
import * tak jako dotenv z "dotenv";
dotenv.config();
konst app = express();
konst port = proces.env. PORT || 3000
app.listen (port, () => {
řídicí panel.log(`Aplikace běží na portu ${port}`);
});

Tento kód importuje expresní knihovnu, vytvoří instanci expresní instance a začne naslouchat provozu na portu 3000.

Krok 4: Vytvoření obslužných rutin tras

Pro zpracování toku OAuth budete muset vytvořit dva obslužné nástroje směrování. První přesměruje uživatele na GitHub a požádá o autorizaci. Druhý zpracuje přesměrování zpět do vaší aplikace a požádá o přístupový token, když uživatel autorizuje vaši aplikaci.

První obslužný program trasy by měl uživatele přesměrovat https://github.com/login/oauth/authorize? parametry.

Na adresu URL OAuth GitHubu budete muset předat sadu požadovaných parametrů, které zahrnují:

  • Client Id: Toto se týká ID, které vaše aplikace OAuth obdrží při registraci na GitHubu.
  • Rozsah: Jedná se o řetězec, který určuje rozsah přístupu, který má aplikace OAuth k informacím o uživateli. Seznam dostupných rozsahů naleznete v Dokumentace GitHub OAuth. Zde budete používat „číst: uživatel” rozsah, který uděluje přístup ke čtení dat profilu uživatele.

Přidejte následující kód do svého index.js soubor:

// index.js
app.get("/auth", (req, res) => {
// Uložení parametrů do objektu
konst parametry = {
 rozsah: "číst: uživatel",
client_id: proces.env.CLIENT_ID,
 };
// Převod parametrů na řetězec zakódovaný v URL
konst urlEncodedParams = Nový URLSearchParams (params).toString();
 res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Tento kód implementuje první obslužnou rutinu trasy. Ukládá požadované parametry do objektu a převádí je do formátu zakódovaného v URL pomocí URLSearchParams API. Poté přidá tyto parametry do adresy URL OAuth GitHubu a přesměruje uživatele na stránku souhlasu GitHubu.

Přidejte následující kód do svého index.js soubor pro druhý obslužný program trasy:

// index.js
app.get("/github-callback", (req, res) => {
konst { kód } = req.query;
konst tělo = {
client_id: proces.env.CLIENT_ID,
klient_tajemství: proces.env.CLIENT_SECRET,
 kód,
 };


nechat accessToken;
 const options = { headers: { accept: "aplikace/json" } };
axios
 .pošta("https://github.com/login/oauth/access_token", tělo, možnosti)
 .pak((odpověď) => response.data.access_token)
 .pak((token) => {
 accessToken = token;
 res.redirect(`/?token=${token}`);
 })
 .úlovek((chyba) => res.status(500.json({ err: err.message }));
});

Druhý obslužný program trasy extrahuje soubor kód se vrátil z GitHubu v req.query objekt. Poté vytvoří POST žádost pomocí Axios do " https://github.com/login/oauth/access_token" s kódem, client_id, a klient_tajemství.

The klient_tajemství je soukromý řetězec, který vygenerujete při vytváření aplikace GitHub OAuth. Když přístupový_token je úspěšně načten, je uložen do proměnné pro pozdější použití. Uživatel je nakonec přesměrován do vaší aplikace pomocí přístupový_token.

Krok 5: Vytvoření aplikace GitHub

Dále budete muset vytvořit aplikaci OAuth na GitHubu.

Nejprve se přihlaste ke svému účtu GitHub a poté přejděte na Nastavení, přejděte dolů na Nastavení vývojářea vyberte Aplikace OAuth. Nakonec klikněte na „Zaregistrujte novou aplikaci.”

GitHub vám poskytne nový formulář žádosti OAuth, jako je tento:

Vyplňte požadovaná pole požadovanými údaji. "Adresa URL domovské stránky" mělo by " http://localhost: 3000”. Vaše "Adresa URL zpětného volání autorizace" mělo by " http://localhost: 3000/github-callback“. Volitelně můžete také povolit tok zařízení, což vám umožní autorizovat uživatele pro aplikaci bez hlavy, jako je např nástroj CLI nebo správce pověření Git.

Tok zařízení je ve veřejné beta verzi a může se změnit.

Nakonec klepněte na Registrovat aplikaci knoflík.

GitHub vás přesměruje na stránku s vaším client_id a možnost generovat vaše klient_tajemství. Zkopírujte svůj client_id, vygenerujte si svůj klient_tajemstvía zkopírujte jej také.

Vytvořte soubor .env a uložit client_id a klient_tajemství uvnitř toho. Tyto proměnné pojmenujte CLIENT_ID a CLIENT_SECRET.

Váš postup OAuth je nyní dokončen a nyní můžete pomocí přístupového tokenu zadávat požadavky na čtení uživatelských dat ( rozsah jste uvedli dříve).

Význam OAuth 2.0

Použití OAuth 2.0 ve vaší aplikaci výrazně zjednodušuje úlohu implementace toku ověřování. Zabezpečuje uživatelská data vašich zákazníků pomocí standardu Secure Sockets Layer (SSL) a zajišťuje, že zůstanou soukromá.