Az OAuth 2.0 egy olyan szabvány, amely lehetővé teszi, hogy harmadik féltől származó alkalmazások biztonságosan hozzáférjenek a webalkalmazásokból származó adatokhoz. Használhatja adatok lekérésére, beleértve a profiladatokat, ütemezéseket stb. amelyet más internetes alkalmazások, például a Facebook, a Google és a GitHub tárolnak. A szolgáltatás megteheti ezt a felhasználó nevében anélkül, hogy feltenné a hitelesítő adatait a harmadik féltől származó alkalmazás számára.

Néhány lépésben megtudhatja, hogyan implementálhatja az OAuth-ot egy Express-alkalmazásban a GitHub használatával OAuth-szolgáltatóként.

Az OAuth Flow

Egy tipikus OAuth-folyamatban a webhely lehetőséget biztosít a felhasználók számára, hogy bejelentkezzenek harmadik féltől származó fiókjukkal egy olyan szolgáltatótól, mint a GitHub vagy a Facebook. A felhasználó elindíthatja ezt a folyamatot egy megfelelő OAuth bejelentkezési gombra kattintva.

Ez átirányítja őket az Ön alkalmazásából az OAuth-szolgáltató webhelyére, és bemutatja nekik a beleegyezési űrlapot. A beleegyezési űrlap tartalmazza az összes olyan információt, amelyet a felhasználótól szeretne elérni, beleértve az e-mailjeit, képeit, menetrendjét stb.

instagram viewer

Ha a felhasználó engedélyezi az Ön alkalmazását, a harmadik fél egy kóddal visszairányítja őket az Ön alkalmazásához. Az alkalmazás ezután kicserélheti a kapott kódot egy hozzáférési tokenre, amelyet azután használhat az elérhető felhasználói adatokhoz.

Ennek a folyamatnak az Express alkalmazásokban való megvalósítása néhány lépésből áll.

1. lépés: Fejlesztési környezet beállítása

Először hozzon létre egy üres projektkönyvtárat és CD a létrehozott könyvtárba.

Például:

mkdir github-app
CD github-app

Ezután inicializálja az npm-et a projektben a következő futtatással:

npm init -y

Ez a parancs létrehozza a package.json fájl, amely részleteket tartalmaz a projektről, például a nevet, a verziót stb.

Ez az oktatóanyag az ES6 modulrendszer használatát mutatja be. Állítsa be a saját megnyitásával package.json fájlt és megadja a "típus": "modul" a JSON objektumban.

2. lépés: Függőségek telepítése

A szerver megfelelő működéséhez telepítenie kell néhány függőséget:

  • ExpressJS: Az ExpressJS egy NodeJS keretrendszer, amely robusztus szolgáltatáskészletet biztosít webes és mobilalkalmazásokhoz. Az Express használata leegyszerűsíti a szerver létrehozási folyamatát.
  • Axios: Az Axios egy ígéret alapú HTTP-kliens. Erre a csomagra szüksége lesz ahhoz, hogy POST-kérést küldjön egy hozzáférési jogkivonathoz a GitHubhoz.
  • dotenv: a dotenv egy olyan csomag, amely környezeti változókat tölt be egy .env fájlból a process.env objektumba. Szüksége lesz rá az alkalmazással kapcsolatos fontos információk elrejtéséhez.

Telepítse őket a következő futtatással:

npm telepítés express axios dotenv

3. lépés: Express alkalmazás létrehozása

Neked kell hozzon létre egy alapszintű Express szervert kezelni és kéréseket intézni az OAuth-szolgáltatóhoz.

Először hozzon létre egy index.js fájl a projekt gyökérkönyvtárában, amely a következőket tartalmazza:

// index.js
import Expressz tól től "Expressz";
import axiók tól től „axiók”;
import * mint dotenv tól től "dotenv";
dotenv.config();
const app = express();
const port = process.env. PORT || 3000
app.listen (port, () => {
konzol.log(`Az alkalmazás porton fut ${port}`);
});

Ez a kód importálja az expressz könyvtárat, példányosít egy expressz példányt, és elkezdi figyelni a porton lévő forgalmat 3000.

4. lépés: Útvonalkezelők létrehozása

Az OAuth-folyamat kezeléséhez két útvonalkezelőt kell létrehoznia. Az első átirányítja a felhasználót a GitHubhoz, és engedélyt kér. A második kezeli az alkalmazásba való visszairányítást, és kéri a hozzáférési jogkivonatot, amikor egy felhasználó engedélyezi az alkalmazást.

Az első útvonalkezelőnek át kell irányítania a felhasználót ide https://github.com/login/oauth/authorize? paramétereket.

Szükséges paramétereket kell átadnia a GitHub OAuth URL-jének, amelyek a következőket tartalmazzák:

  • Ügyfélazonosító: Ez arra az azonosítóra vonatkozik, amelyet az OAuth-alkalmazás kap, amikor regisztrált a GitHubon.
  • Hatókör: Ez egy karakterláncra utal, amely meghatározza, hogy az OAuth-alkalmazás mennyi hozzáféréssel rendelkezik a felhasználó adataihoz. Az elérhető hatókörök listáját itt találja A GitHub OAuth-dokumentációja. Itt egy "olvasható: felhasználó” hatókör, amely hozzáférést biztosít a felhasználó profiladatainak olvasásához.

Adja hozzá a következő kódot a sajátjához index.js fájl:

// index.js
app.get("/auth", (req, res) => {
// Paraméterek tárolása egy objektumban
const params = {
 hatálya: "olvasható: felhasználó",
Ügyfélazonosító: folyamat.env.ÜGYFÉLAZONOSÍTÓ,
 };
// Paraméterek konvertálása URL-kódolású karakterláncokká
const urlEncodedParams = új URLSearchParams (params).toString();
 res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Ez a kód megvalósítja az első útvonalkezelőt. Tárolja a szükséges paramétereket egy objektumban, és az URLSearchParams API segítségével URL-kódolt formátumba konvertálja őket. Ezután hozzáadja ezeket a paramétereket a GitHub OAuth URL-jéhez, és átirányítja a felhasználót a GitHub hozzájárulási oldalára.

Adja hozzá a következő kódot a sajátjához index.js fájl a második útvonalkezelőhöz:

// index.js
app.get("/github-callback", (req, res) => {
const { kód } = req.query;
const body = {
Ügyfélazonosító: folyamat.env.ÜGYFÉLAZONOSÍTÓ,
client_secret: folyamat.env.CLIENT_SECRET,
 kód,
 };


hagyja accessToken;
 const options = { headers: { elfogadja: "alkalmazás/json" } };
axiók
 .post("https://github.com/login/oauth/access_token", test, opciók)
 .then((válasz) => response.data.access_token)
 .then((token) => {
 accessToken = token;
 res.redirect(`/?token=${token}`);
 })
 .fogás((err) => res.status(500).json({ err: err.message }));
});

A második útvonalkezelő kibontja a kód tért vissza a GitHubról a req.query tárgy. Ezután POST-ot készít használatával kérjen Axios nak nek " https://github.com/login/oauth/access_token" kóddal, Ügyfélazonosító, és client_secret.

Az client_secret egy privát karakterlánc, amelyet a GitHub OAuth-alkalmazás létrehozásakor generál. Amikor az hozzáférési_token sikeresen lekérve, akkor a rendszer elmenti egy változóba későbbi használatra. A felhasználó végül átirányítja az alkalmazásához a következővel: hozzáférési_token.

5. lépés: GitHub alkalmazás létrehozása

Ezután létre kell hoznia egy OAuth-alkalmazást a GitHubon.

Először jelentkezzen be GitHub-fiókjába, majd lépjen a következőre Beállítások, görgessen le a lehetőséghez Fejlesztői beállítások, és válassza ki OAuth-alkalmazások. Végül kattintson a „Új alkalmazás regisztrálása.”

A GitHub egy új OAuth-jelentkezési űrlapot biztosít Önnek:

Töltse ki a szükséges mezőket a kívánt adatokkal. Az "Kezdőlap URL-je" kellene " http://localhost: 3000”. A te "Engedélyezési visszahívási URL" kellene " http://localhost: 3000/github-visszahívás”. Opcionálisan engedélyezheti az eszközáramlást is, így engedélyezheti a felhasználókat egy fej nélküli alkalmazáshoz, mint pl egy CLI eszköz vagy Git hitelesítési adatkezelő.

Az eszközfolyam nyilvános bétaverzióban van, és változhat.

Végül nyomja meg a Jelentkezés regisztrálása gomb.

A GitHub egy olyan oldalra irányítja Önt, amelyen az Ön Ügyfélazonosító és egy lehetőség a saját létrehozására client_secret. Másolja ki a sajátját Ügyfélazonosító, generálja az Ön client_secret, és azt is másolja.

Hozzon létre egy .env fájlt és tárolja a Ügyfélazonosító és client_secret benne. Nevezze el ezeket a változókat CLIENT_ID és CLIENT_SECRET.

Az OAuth folyamat befejeződött, és a hozzáférési jogkivonattal kérelmezheti a felhasználói adatok (a hatálya korábban megadtad).

Az OAuth 2.0 jelentősége

Az OAuth 2.0 alkalmazása az alkalmazásban nagymértékben leegyszerűsíti a hitelesítési folyamat végrehajtásának feladatát. A Secure Sockets Layer (SSL) szabvány segítségével védi ügyfelei felhasználói adatait, biztosítva, hogy azok privátak maradjanak.