OAuth 2.0 er en standard som lar tredjepartsapplikasjoner få tilgang til data fra nettapper på en sikker måte. Du kan bruke den til å hente data inkludert profilinformasjon, tidsplaner osv. som er vert på andre nettapper som Facebook, Google og GitHub. En tjeneste kan gjøre dette på vegne av en bruker uten å eksponere deres legitimasjon for tredjepartsapplikasjonen.

Lær hvordan du implementerer OAuth i en Express-app ved å bruke GitHub som en OAuth-leverandør i noen få trinn.

OAuth-flyten

I en typisk OAuth-flyt gir nettstedet ditt et alternativ for brukere å logge på med sin tredjepartskonto fra en leverandør som GitHub eller Facebook. En bruker kan starte denne prosessen ved å klikke på en relevant OAuth-påloggingsknapp.

Dette omdirigerer dem fra applikasjonen din til OAuth-leverandørens nettsted og gir dem et samtykkeskjema. Samtykkeskjemaet inneholder all informasjon du ønsker tilgang til fra brukeren, som kan være e-post, bilder, tidsplaner osv.

Hvis brukeren autoriserer applikasjonen din, vil tredjeparten omdirigere dem tilbake til applikasjonen din med en kode. Applikasjonen din kan deretter bytte den mottatte koden mot et tilgangstoken som den deretter kan bruke for å få tilgang til tilgjengelige brukerdata.

instagram viewer

Implementering av denne flyten i en Express-applikasjon innebærer noen få trinn.

Trinn 1: Sette opp utviklingsmiljø

Først oppretter du en tom prosjektkatalog og cd inn i den opprettede katalogen.

For eksempel:

mkdir github-app
cd github-appen

Deretter initialiser npm i prosjektet ditt ved å kjøre:

npm init -y

Denne kommandoen oppretter en package.json fil som inneholder detaljer om prosjektet ditt som navn, versjon osv.

Denne opplæringen vil inneholde bruk av ES6-modulsystemet. Sett opp dette ved å åpne din package.json fil og spesifisere "type": "modul" i JSON-objektet.

Trinn 2: Installere avhengigheter

Du må installere noen avhengigheter for at serveren din skal fungere ordentlig:

  • ExpressJS: ExpressJS er et NodeJS-rammeverk som gir et robust sett med funksjoner for nett- og mobilapplikasjoner. Bruk av Express vil forenkle serveropprettingsprosessen.
  • Axios: Axios er en løftebasert HTTP-klient. Du trenger denne pakken for å sende en POST-forespørsel om et tilgangstoken til GitHub.
  • dotenv: dotenv er en pakke som laster miljøvariabler fra en .env-fil inn i process.env-objektet. Du trenger den for å skjule viktig informasjon om søknaden din.

Installer dem ved å kjøre:

npm installere uttrykke axios dotenv

Trinn 3: Opprette en Express-app

Du trenger å opprette en grunnleggende Express-server å håndtere og sende forespørsler til OAuth-leverandøren.

Først oppretter du en index.js fil i prosjektets rotkatalog som inneholder følgende:

// index.js
import uttrykke fra "uttrykke";
import aksioer fra "aksios";
import * som dotenv fra "dotenv";
dotenv.config();
konst app = express();
konst port = prosess.env. PORT || 3000
app.listen (port, () => {
konsoll.Logg(`Appen kjører på port ${port}`);
});

Denne koden importerer ekspressbiblioteket, instansierer en ekspressforekomst og begynner å lytte etter trafikk på porten 3000.

Trinn 4: Opprette rutebehandlere

Du må opprette to rutebehandlere for å håndtere OAuth-flyten. Den første omdirigerer brukeren til GitHub og ber om autorisasjon. Den andre håndterer omdirigeringen tilbake til appen din og sender forespørselen om tilgangstoken når en bruker autoriserer applikasjonen din.

Den første rutebehandleren skal omdirigere brukeren til https://github.com/login/oauth/authorize? parametere.

Du må sende et sett med nødvendige parametere til GitHubs OAuth URL, som inkluderer:

  • Klient-ID: Dette refererer til ID-en din OAuth-applikasjon mottar når den er registrert på GitHub.
  • Omfang: Dette refererer til en streng som spesifiserer hvor mye tilgang en OAuth-app har til en brukers informasjon. Du kan finne en liste over tilgjengelige omfang i GitHubs OAuth-dokumentasjon. Her vil du bruke en "les: bruker”-omfang, som gir tilgang til å lese en brukers profildata.

Legg til følgende kode til din index.js fil:

// index.js
app.get("/auth", (req, res) => {
// Lagre parametere i et objekt
konst params = {
 omfang: "les: bruker",
klient-ID: prosess.env.KLIENT-ID,
 };
// Konverter parametere til en URL-kodet streng
konst urlEncodedParams = ny URLSearchParams (params).toString();
 res.redirect(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Denne koden implementerer den første rutebehandleren. Den lagrer de nødvendige parameterne i et objekt, og konverterer dem til et URL-kodet format ved hjelp av URLSearchParams API. Den legger deretter til disse parameterne til GitHubs OAuth URL og omdirigerer brukeren til GitHubs samtykkeside.

Legg til følgende kode til din index.js fil for den andre rutebehandleren:

// index.js
app.get("/github-callback", (req, res) => {
konst { code } = req.query;
konst body = {
klient-ID: prosess.env.KLIENT-ID,
klient_hemmelighet: prosess.env.CLIENT_SECRET,
 kode,
 };


la accessToken;
 const options = { headers: { accept: "applikasjon/json" } };
aksioer
 .post("https://github.com/login/oauth/access_token", kropp, alternativer)
 .then((respons) => response.data.access_token)
 .then((token) => {
 accessToken = token;
 res.redirect(`/?token=${token}`);
 })
 .å fange((feil) => res.status(500).json({ feil: feil.melding }));
});

Den andre rutebehandleren vil trekke ut kode returnerte fra GitHub i forespørsel gjenstand. Deretter lager den et POST be om å bruke Axios til " https://github.com/login/oauth/access_token" med koden, klient-ID, og klient_hemmelighet.

De klient_hemmelighet er en privat streng du vil generere når du oppretter en GitHub OAuth-applikasjon. Når access_token er hentet, lagres den i en variabel for senere bruk. Brukeren blir til slutt omdirigert til applikasjonen din med access_token.

Trinn 5: Opprette en GitHub-applikasjon

Deretter må du opprette en OAuth-applikasjon på GitHub.

Logg først på GitHub-kontoen din, og gå deretter til Innstillinger, rull ned til Utviklerinnstillinger, og velg OAuth-apper. Klikk til slutt på "Registrer en ny søknad.”

GitHub vil gi deg et nytt OAuth-søknadsskjema som dette:

Fyll ut de obligatoriske feltene med dine ønskede detaljer. «Hjemmeside-URL" bør være " http://localhost: 3000”. Din "URL for tilbakeringing av autorisasjon" bør være " http://localhost: 3000/github-callback”. Du kan også valgfritt aktivere enhetsflyt, slik at du kan autorisere brukere for en hodeløs app, for eksempel et CLI-verktøy eller Git legitimasjonsadministrator.

Enhetsflyten er i offentlig betaversjon og kan endres.

Til slutt, trykk på Registrer søknad knapp.

GitHub vil lede deg til en side med din klient-ID og et alternativ for å generere din klient_hemmelighet. Kopier din klient-ID, generere din klient_hemmelighet, og kopier det også.

Opprett en .env-fil og lagre klient-ID og klient_hemmelighet inni det. Navngi disse variablene henholdsvis CLIENT_ID og CLIENT_SECRET.

OAuth-flyten din er nå fullført, og du kan nå sende forespørsler med tilgangstokenet for å lese brukerdata (den omfang du spesifiserte tidligere).

Viktigheten av OAuth 2.0

Å bruke OAuth 2.0 i applikasjonen din forenkler i stor grad oppgaven med å implementere en autentiseringsflyt. Den sikrer kundenes brukerdata ved hjelp av Secure Sockets Layer (SSL)-standarden, og sikrer at de forblir private.