OAuth 2.0 er en standard, der giver tredjepartsapplikationer adgang til data fra webapps sikkert. Du kan bruge det til at hente data, herunder profiloplysninger, tidsplaner osv. der er hostet på andre webapps som Facebook, Google og GitHub. En tjeneste kan gøre dette på vegne af en bruger uden at udsætte deres legitimationsoplysninger for tredjepartsapplikationen.

Lær, hvordan du implementerer OAuth i en Express-app ved hjælp af GitHub som OAuth-udbyder i nogle få trin.

OAuth-flowet

I et typisk OAuth-flow giver dit websted en mulighed for, at brugere kan logge ind med deres tredjepartskonto fra en udbyder som GitHub eller Facebook. En bruger kan starte denne proces ved at klikke på en relevant OAuth-login-knap.

Dette omdirigerer dem fra din ansøgning til OAuth-udbyderens websted og præsenterer dem med en samtykkeerklæring. Samtykkeformularen indeholder alle de oplysninger, du ønsker at få adgang til fra brugeren, som kan være deres e-mails, billeder, tidsplaner osv.

Hvis brugeren autoriserer din applikation, vil tredjeparten omdirigere dem tilbage til din applikation med en kode. Din applikation kan derefter udveksle den modtagne kode med et adgangstoken, som den derefter kan bruge til at få adgang til tilgængelige brugerdata.

instagram viewer

Implementering af dette flow i en Express-applikation involverer et par trin.

Trin 1: Opsætning af udviklingsmiljø

Først skal du oprette en tom projektmappe og cd ind i den oprettede mappe.

For eksempel:

mkdir github-app
cd github-app

Start derefter npm i dit projekt ved at køre:

npm init -y

Denne kommando opretter en package.json fil, der indeholder detaljer om dit projekt som navn, version osv.

Denne tutorial vil indeholde brugen af ​​ES6-modulsystemet. Indstil dette ved at åbne din package.json fil og angive "type": "modul" i JSON-objektet.

Trin 2: Installation af afhængigheder

Du skal installere et par afhængigheder for at din server fungerer korrekt:

  • ExpressJS: ExpressJS er en NodeJS-ramme, der giver et robust sæt funktioner til web- og mobilapplikationer. Brug af Express vil forenkle din serveroprettelsesprocessen.
  • Axios: Axios er en løftebaseret HTTP-klient. Du skal bruge denne pakke for at lave en POST-anmodning om et adgangstoken til GitHub.
  • dotenv: dotenv er en pakke, der indlæser miljøvariabler fra en .env-fil til process.env-objektet. Du skal bruge den til at skjule vigtige oplysninger om din ansøgning.

Installer dem ved at køre:

npm installere udtrykke axios dotenv

Trin 3: Oprettelse af en Express-app

Du skal oprette en grundlæggende Express-server at håndtere og fremsætte anmodninger til OAuth-udbyderen.

Først skal du oprette en index.js fil i dit projekts rodmappe, der indeholder følgende:

// index.js
importere udtrykke fra "udtrykke";
importere axios fra "aksios";
importere * som dotenv fra "dotenv";
dotenv.config();
konst app = express();
konst port = proces.env. PORT || 3000
app.listen (port, () => {
konsol.log(`Appen kører på port ${port}`);
});

Denne kode importerer ekspresbiblioteket, instansierer en ekspresforekomst og begynder at lytte efter trafik på porten 3000.

Trin 4: Oprettelse af rutebehandlere

Du skal oprette to rutehandlere for at håndtere OAuth-flowet. Den første omdirigerer brugeren til GitHub og anmoder om autorisation. Den anden håndterer omdirigeringen tilbage til din app og sender anmodningen om adgangstokenet, når en bruger godkender din applikation.

Den første rutehandler skal omdirigere brugeren til https://github.com/login/oauth/authorize? parametre.

Du skal videregive et sæt nødvendige parametre til GitHubs OAuth-URL, som omfatter:

  • Klient-id: Dette refererer til det ID, din OAuth-applikation modtager, når den er registreret på GitHub.
  • Omfang: Dette refererer til en streng, der angiver mængden af ​​adgang, en OAuth-app har til en brugers oplysninger. Du kan finde en liste over tilgængelige scopes i GitHubs OAuth-dokumentation. Her vil du bruge en "læs: bruger” scope, som giver adgang til at læse en brugers profildata.

Tilføj følgende kode til din index.js fil:

// index.js
app.get("/auth", (req, res) => {
// Gem parametre i et objekt
konst params = {
 omfang: "læs: bruger",
klient_id: behandle.env.CLIENT_ID,
 };
// Konverter parametre til en URL-kodet streng
konst urlEncodedParams = ny URLSearchParams (params).toString();
 res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Denne kode implementerer den første rutehandler. Den gemmer de nødvendige parametre i et objekt og konverterer dem til et URL-kodet format ved hjælp af URLSearchParams API. Det tilføjer derefter disse parametre til GitHubs OAuth URL og omdirigerer brugeren til GitHubs samtykkeside.

Tilføj følgende kode til din index.js fil til den anden rutehandler:

// index.js
app.get("/github-callback", (req, res) => {
konst { kode } = req.query;
konst krop = {
klient_id: behandle.env.CLIENT_ID,
klient_hemmelighed: behandle.env.CLIENT_SECRET,
 kode,
 };


lade accessToken;
 const optioner = { headers: { accept: "applikation/json" } };
axios
 .stolpe("https://github.com/login/oauth/access_token", krop, muligheder)
 .then((svar) => response.data.access_token)
 .then((token) => {
 accessToken = token;
 res.redirect(`/?token=${token}`);
 })
 .fangst((fejl) => res.status(500).json({ fejl: fejl.meddelelse }));
});

Den anden rutehandler vil udtrække kode returneret fra GitHub i forespørgsel objekt. Så laver den et POST anmodning ved hjælp af Axios til " https://github.com/login/oauth/access_token" med koden, klient_id, og klient_hemmelighed.

Det klient_hemmelighed er en privat streng, du genererer, når du opretter en GitHub OAuth-applikation. Når adgangstoken er hentet, gemmes den i en variabel til senere brug. Brugeren bliver endelig omdirigeret til din applikation med adgangstoken.

Trin 5: Oprettelse af en GitHub-applikation

Dernæst skal du oprette en OAuth-applikation på GitHub.

Log først ind på din GitHub-konto, og gå derefter til Indstillinger, rul ned til Udviklerindstillinger, og vælg OAuth-apps. Klik til sidst på "Registrer en ny ansøgning.”

GitHub vil give dig en ny OAuth-ansøgningsformular som denne:

Udfyld de påkrævede felter med dine ønskede detaljer. Det "Hjemmeside URL" burde være " http://localhost: 3000”. Din "Autorisations-tilbagekalds-URL" burde være " http://localhost: 3000/github-callback”. Du kan også valgfrit aktivere enhedsflow, så du kan autorisere brugere til en hovedløs app, som f.eks et CLI-værktøj eller Git credential manager.

Enhedsflowet er i offentlig beta og kan ændres.

Til sidst skal du trykke på Registrer ansøgning knap.

GitHub vil dirigere dig til en side med din klient_id og en mulighed for at generere din klient_hemmelighed. Kopier din klient_id, generere din klient_hemmelighed, og kopier det også.

Opret en .env-fil og opbevare klient_id og klient_hemmelighed inde i den. Navngiv disse variabler henholdsvis CLIENT_ID og CLIENT_SECRET.

Dit OAuth-flow er nu afsluttet, og du kan nu fremsætte anmodninger med adgangstokenet for at læse brugerdata (den omfang du har angivet tidligere).

Vigtigheden af ​​OAuth 2.0

Brug af OAuth 2.0 i din applikation forenkler i høj grad opgaven med at implementere et godkendelsesflow. Det sikrer dine kunders brugerdata ved hjælp af Secure Sockets Layer (SSL)-standarden, hvilket sikrer, at de forbliver private.