OAuth 2.0 är en standard som låter tredjepartsapplikationer komma åt data från webbappar på ett säkert sätt. Du kan använda den för att hämta data inklusive profilinformation, scheman, etc. som finns på andra webbappar som Facebook, Google och GitHub. En tjänst kan göra detta på uppdrag av en användare utan att exponera deras autentiseringsuppgifter för tredjepartsapplikationen.

Lär dig hur du implementerar OAuth i en Express-app med hjälp av GitHub som en OAuth-leverantör i några steg.

OAuth-flödet

I ett typiskt OAuth-flöde ger din webbplats ett alternativ för användare att logga in med sitt tredjepartskonto från en leverantör som GitHub eller Facebook. En användare kan starta denna process genom att klicka på en relevant OAuth-inloggningsknapp.

Detta omdirigerar dem från din applikation till OAuth-leverantörens webbplats och ger dem ett samtyckesformulär. Samtyckesformuläret innehåller all information du vill komma åt från användaren, vilket kan vara deras e-postmeddelanden, bilder, scheman, etc.

instagram viewer

Om användaren godkänner din applikation kommer den tredje parten att omdirigera dem tillbaka till din applikation med en kod. Din applikation kan sedan byta ut den mottagna koden mot en åtkomsttoken som den sedan kan använda för att komma åt tillgänglig användardata.

Att implementera detta flöde i en Express-applikation kräver några steg.

Steg 1: Konfigurera utvecklingsmiljön

Skapa först en tom projektkatalog och CD i den skapade katalogen.

Till exempel:

mkdir github-app
CD github-app

Initiera sedan npm i ditt projekt genom att köra:

npm init -y

Detta kommando skapar en package.json fil som innehåller information om ditt projekt som namn, version, etc.

Denna handledning kommer att innehålla användningen av ES6-modulsystemet. Ställ in detta genom att öppna din package.json fil och ange "type": "modul" i JSON-objektet.

Steg 2: Installera beroenden

Du måste installera några beroenden för att din server ska fungera korrekt:

  • ExpressJS: ExpressJS är ett NodeJS-ramverk som tillhandahåller en robust uppsättning funktioner för webb- och mobilapplikationer. Att använda Express kommer att förenkla din serverskapandeprocess.
  • Axios: Axios är en löftesbaserad HTTP-klient. Du behöver detta paket för att göra en POST-begäran om en åtkomsttoken till GitHub.
  • dotenv: dotenv är ett paket som laddar miljövariabler från en .env-fil till process.env-objektet. Du behöver den för att dölja viktig information om din ansökan.

Installera dem genom att köra:

npm Installera uttrycka axios dotenv

Steg 3: Skapa en Express-app

Du behöver skapa en grundläggande Express-server att hantera och göra förfrågningar till OAuth-leverantören.

Skapa först en index.js fil i ditt projekts rotkatalog som innehåller följande:

// index.js
importera uttrycka från "uttrycka";
importera axios från "axios";
importera * som dotenv från "dotenv";
dotenv.config();
konst app = express();
konst port = process.env. PORT || 3000
app.listen (port, () => {
trösta.logga(`Appen körs på port ${port}`);
});

Den här koden importerar expressbiblioteket, instansierar en expressinstans och börjar lyssna efter trafik på porten 3000.

Steg 4: Skapa rutthanterare

Du måste skapa två rutthanterare för att hantera OAuth-flödet. Den första omdirigerar användaren till GitHub och begär auktorisering. Den andra hanterar omdirigeringen tillbaka till din app och gör en begäran om åtkomsttoken när en användare auktoriserar din applikation.

Den första rutthanteraren bör omdirigera användaren till https://github.com/login/oauth/authorize? parametrar.

Du måste skicka en uppsättning nödvändiga parametrar till GitHubs OAuth-URL, som inkluderar:

  • Klient-ID: Detta hänvisar till det ID som din OAuth-applikation får när den registreras på GitHub.
  • Omfattning: Detta hänvisar till en sträng som anger mängden åtkomst en OAuth-app har till en användares information. Du kan hitta en lista över tillgängliga omfattningar i GitHubs OAuth-dokumentation. Här kommer du att använda en "läs: användare” scope, som ger åtkomst att läsa en användares profildata.

Lägg till följande kod till din index.js fil:

// index.js
app.get("/auth", (req, res) => {
// Lagra parametrar i ett objekt
konst params = {
 omfattning: "läs: användare",
Klient ID: bearbeta.env.KLIENT ID,
 };
// Konvertera parametrar till en URL-kodad sträng
konst urlEncodedParams = ny URLSearchParams (params).toString();
 res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Denna kod implementerar den första rutthanteraren. Den lagrar de nödvändiga parametrarna i ett objekt och konverterar dem till ett URL-kodat format med URLSearchParams API. Den lägger sedan till dessa parametrar till GitHubs OAuth-URL och omdirigerar användaren till GitHubs samtyckessida.

Lägg till följande kod till din index.js fil för den andra rutthanteraren:

// index.js
app.get("/github-callback", (req, res) => {
konst { code } = req.query;
konst kropp = {
Klient ID: bearbeta.env.KLIENT ID,
client_secret: bearbeta.env.CLIENT_SECRET,
 koda,
 };


låta accessToken;
 const options = { headers: { accept: "applikation/json" } };
axios
 .posta("https://github.com/login/oauth/access_token", kropp, alternativ)
 .then((svar) => response.data.access_token)
 .then((token) => {
 accessToken = token;
 res.redirect(`/?token=${token}`);
 })
 .fånga((fel) => res.status(500).json({ err: err.meddelande }));
});

Den andra rutthanteraren kommer att extrahera koda återvände från GitHub i req.query objekt. Det gör sedan ett POST begära att använda Axios till " https://github.com/login/oauth/access_token" med koden, Klient ID, och client_secret.

De client_secret är en privat sträng som du genererar när du skapar en GitHub OAuth-applikation. När access_token har hämtats, sparas den i en variabel för senare användning. Användaren omdirigeras slutligen till din applikation med access_token.

Steg 5: Skapa en GitHub-applikation

Därefter måste du skapa en OAuth-applikation på GitHub.

Logga först in på ditt GitHub-konto och gå sedan till inställningar, scrolla ner till Utvecklarinställningaroch välj OAuth-appar. Klicka slutligen på "Registrera en ny ansökan.”

GitHub kommer att förse dig med ett nytt OAuth-ansökningsformulär så här:

Fyll i de obligatoriska fälten med dina önskade uppgifter. den "Hemsidans URL" borde vara " http://localhost: 3000”. Din "URL för återuppringning av auktorisering" borde vara " http://localhost: 3000/github-återuppringning”. Du kan också valfritt aktivera enhetsflöde, så att du kan auktorisera användare för en huvudlös app, som t.ex ett CLI-verktyg eller Git credential manager.

Enhetsflödet är i offentlig betaversion och kan komma att ändras.

Slutligen, tryck på Registrera ansökan knapp.

GitHub leder dig till en sida med din Klient ID och ett alternativ för att generera din client_secret. Kopiera din Klient ID, generera din client_secret, och kopiera det också.

Skapa en .env-fil och lagra Klient ID och client_secret innuti. Namnge dessa variabler CLIENT_ID respektive CLIENT_SECRET.

Ditt OAuth-flöde är nu klart och du kan nu göra förfrågningar med åtkomsttoken för att läsa användardata (den omfattning du angav tidigare).

Vikten av OAuth 2.0

Att använda OAuth 2.0 i din applikation förenklar avsevärt uppgiften att implementera ett autentiseringsflöde. Det säkrar dina kunders användardata med standarden Secure Sockets Layer (SSL), vilket säkerställer att de förblir privata.