OAuth 2.0 is een standaard waarmee toepassingen van derden veilig toegang hebben tot gegevens van web-apps. U kunt het gebruiken om gegevens op te halen, waaronder profielinformatie, schema's, enz. die wordt gehost op andere web-apps zoals Facebook, Google en GitHub. Een service kan dit namens een gebruiker doen zonder hun inloggegevens bloot te stellen aan de toepassing van derden.

Leer in een paar stappen hoe u OAuth implementeert in een Express-app met GitHub als OAuth-provider.

De OAuth-stroom

In een typische OAuth-stroom biedt uw site een optie voor gebruikers om in te loggen met hun externe account van een provider zoals GitHub of Facebook. Een gebruiker kan dit proces starten door op een relevante OAuth-aanmeldingsknop te klikken.

Hierdoor worden ze doorgestuurd van uw applicatie naar de website van de OAuth-provider en wordt er een toestemmingsformulier aan hen gepresenteerd. Het toestemmingsformulier bevat alle informatie waartoe u toegang wilt van de gebruiker, zoals hun e-mails, foto's, schema's, enz.

instagram viewer

Als de gebruiker uw applicatie autoriseert, zal de derde partij ze terugsturen naar uw applicatie met een code. Uw applicatie kan de ontvangen code vervolgens inwisselen voor een toegangstoken waarmee het vervolgens toegang kan krijgen tot beschikbare gebruikersgegevens.

Het implementeren van deze stroom in een Express-toepassing omvat een paar stappen.

Stap 1: Ontwikkelomgeving opzetten

Maak eerst een lege projectdirectory aan en CD in de aangemaakte directory.

Bijvoorbeeld:

mkdir github-app
CD github-app

Initialiseer vervolgens npm in uw project door het volgende uit te voeren:

npm init -y

Dit commando creëert een pakket.json bestand dat details over uw project bevat, zoals de naam, versie, enz.

In deze zelfstudie wordt het gebruik van het ES6-modulesysteem behandeld. Stel dit in door uw. te openen pakket.json bestand en specificeert "type": "module" in het JSON-object.

Stap 2: Afhankelijkheden installeren

U moet een aantal afhankelijkheden installeren om uw server goed te laten werken:

  • ExpressJS: ExpressJS is een NodeJS-framework dat een robuuste set functies biedt voor web- en mobiele applicaties. Het gebruik van Express vereenvoudigt het aanmaakproces van uw server.
  • Axios: Axios is een op beloften gebaseerde HTTP-client. Je hebt dit pakket nodig om een ​​POST-verzoek in te dienen voor een toegangstoken voor GitHub.
  • dotenv: dotenv is een pakket dat omgevingsvariabelen laadt van een .env-bestand in het process.env-object. Je hebt het nodig om belangrijke informatie over je aanvraag te verbergen.

Installeer ze door het volgende uit te voeren:

npm installeren express axios dotenv

Stap 3: Een Express-app maken

Je moet een standaard Express-server maken om verzoeken af ​​te handelen en in te dienen bij de OAuth-provider.

Maak eerst een index.js bestand in de hoofdmap van uw project met het volgende:

// index.js
importeren uitdrukken van "uitdrukken";
importeren axios van "axios";
importeren * net zo dotenv van "dotenv";
dotenv.config();
const app = express();
const poort = proces.env. HAVEN || 3000
app.luisteren (poort, () => {
troosten.log('App draait op poort' ${poort}`);
});

Deze code importeert de expresbibliotheek, start een expresinstantie en begint te luisteren naar verkeer op de poort 3000.

Stap 4: Routehandlers maken

U moet twee routehandlers maken om de OAuth-stroom af te handelen. De eerste leidt de gebruiker om naar GitHub en vraagt ​​om autorisatie. De tweede regelt de omleiding terug naar uw app en doet het verzoek om het toegangstoken wanneer een gebruiker uw toepassing autoriseert.

De eerste route-handler moet de gebruiker omleiden naar: https://github.com/login/oauth/authorize? parameters.

U moet een reeks vereiste parameters doorgeven aan de OAuth-URL van GitHub, waaronder:

  • Client-ID: dit verwijst naar de ID die uw OAuth-toepassing ontvangt wanneer deze wordt geregistreerd op GitHub.
  • Bereik: dit verwijst naar een tekenreeks die aangeeft hoeveel toegang een OAuth-app heeft tot de informatie van een gebruiker. U vindt een lijst met beschikbare bereiken in: GitHub's OAuth-documentatie. Hier gebruik je een "lees: gebruiker” bereik, dat toegang verleent tot het lezen van de profielgegevens van een gebruiker.

Voeg de volgende code toe aan je index.js het dossier:

// index.js
app.get("/auth", (req, res) => {
// Bewaar parameters in een object
const parameters = {
 domein: "lees: gebruiker",
klant identificatie: werkwijze.env.KLANT IDENTIFICATIE,
 };
// Converteer parameters naar een URL-gecodeerde string
const urlEncodedParams = nieuwe URLSearchParams (params).toString();
 doorverwijzen.omleiding(` https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Deze code implementeert de eerste route-handler. Het slaat de vereiste parameters op in een object en converteert ze naar een URL-gecodeerd formaat met behulp van de URLSearchParams API. Vervolgens worden deze parameters toegevoegd aan de OAuth-URL van GitHub en wordt de gebruiker omgeleid naar de toestemmingspagina van GitHub.

Voeg de volgende code toe aan je index.js bestand voor de tweede routebehandelaar:

// index.js
app.get("/github-callback", (req, res) => {
const { code } = verzoek.query;
const lichaam = {
klant identificatie: werkwijze.env.KLANT IDENTIFICATIE,
client_secret: werkwijze.env.CLIENT_SECRET,
 code,
 };


laten toegangstoken;
 const options = { headers: { accept: "applicatie/json" } };
axios
 .na("https://github.com/login/oauth/access_token", carrosserie, opties)
 .then((antwoord) => response.data.access_token)
 .then((token) => {
 accessToken = token;
 doorverwijzen.omleiding(`/?token=${token}`);
 })
 .vangst((err) => res.status(500).json({ err: err.bericht }));
});

De tweede routebehandelaar extraheert de code terug van GitHub in de req.query object. Het maakt dan een POST verzoek met behulp van Axios tot " https://github.com/login/oauth/access_token" met de code, klant identificatie, en client_secret.

De client_secret is een privéreeks die u genereert wanneer u een GitHub OAuth-toepassing maakt. Wanneer de toegangstoken succesvol is opgehaald, wordt het opgeslagen in een variabele voor later gebruik. De gebruiker wordt uiteindelijk doorgestuurd naar uw applicatie met de toegangstoken.

Stap 5: Een GitHub-toepassing maken

Vervolgens moet u een OAuth-toepassing op GitHub maken.

Log eerst in op uw GitHub-account en ga vervolgens naar Instellingen, scrol omlaag naar Ontwikkelaarsinstellingenen selecteer OAuth-apps. Klik ten slotte op “Een nieuwe aanvraag registreren.”

GitHub zal u voorzien van een nieuw OAuth-aanvraagformulier zoals dit:

Vul de verplichte velden in met uw gewenste gegevens. De "Startpagina URL" zou moeten zijn " http://localhost: 3000”. Uw "Autorisatie callback-URL" zou moeten zijn " http://localhost: 3000/github-callback”. U kunt optioneel ook de apparaatstroom inschakelen, zodat u gebruikers kunt autoriseren voor een headless-app, zoals: een CLI-tool of Git-referentiebeheerder.

De apparaatstroom bevindt zich in de openbare bètaversie en kan worden gewijzigd.

Raak ten slotte de Aanvraag registreren knop.

GitHub leidt je naar een pagina met je klant identificatie en een optie om uw. te genereren client_secret. Kopieer je klant identificatie, genereer uw client_secret, en kopieer het ook.

Maak een .env-bestand en bewaar de klant identificatie en client_secret in het. Noem deze variabelen respectievelijk CLIENT_ID en CLIENT_SECRET.

Uw OAuth-stroom is nu voltooid en u kunt nu verzoeken doen met het toegangstoken om gebruikersgegevens te lezen (de domein u eerder hebt opgegeven).

Het belang van OAuth 2.0

Het gebruik van OAuth 2.0 in uw toepassing vereenvoudigt de taak van het implementeren van een authenticatiestroom aanzienlijk. Het beveiligt de gebruikersgegevens van uw klanten met behulp van de Secure Sockets Layer (SSL)-standaard, zodat ze privé blijven.