So implementieren Sie OAuth in einer Express-App mit GitHub

OAuth 2.0 ist ein Standard, der Anwendungen von Drittanbietern den sicheren Zugriff auf Daten von Web-Apps ermöglicht. Sie können es verwenden, um Daten wie Profilinformationen, Zeitpläne usw. abzurufen, die auf anderen Web-Apps wie Facebook gehostet werden. Google, und GitHub. Ein Dienst kann dies im Namen eines Benutzers tun, ohne seine Anmeldeinformationen für die Drittanbieteranwendung offenzulegen.

Erfahren Sie, wie Sie OAuth in einer Express-App mit GitHub als OAuth-Anbieter in wenigen Schritten implementieren.

Der OAuth-Fluss

In einem typischen OAuth-Flow bietet Ihre Website Benutzern die Möglichkeit, sich mit ihrem Drittanbieterkonto von einem Anbieter wie GitHub oder Facebook anzumelden. Ein Benutzer kann diesen Prozess starten, indem er auf eine entsprechende OAuth-Anmeldeschaltfläche klickt.

Dadurch werden sie von Ihrer Anwendung auf die Website des OAuth-Anbieters weitergeleitet und erhalten eine Einwilligungserklärung. Das Einwilligungsformular enthält alle Informationen, auf die Sie vom Benutzer zugreifen möchten, z. B. seine E-Mails, Bilder, Zeitpläne usw.

Wenn der Benutzer Ihre Anwendung autorisiert, leitet der Drittanbieter ihn mit einem Code zurück zu Ihrer Anwendung. Ihre Anwendung kann dann den erhaltenen Code gegen ein Zugriffstoken austauschen, mit dem sie dann auf verfügbare Benutzerdaten zugreifen kann.

Die Implementierung dieses Ablaufs in einer Express-Anwendung umfasst einige Schritte.

Schritt 1: Entwicklungsumgebung einrichten

Erstellen Sie zunächst ein leeres Projektverzeichnis und CD in das erstellte Verzeichnis.

Zum Beispiel:

mkdir github-app
cd github-app

Als nächstes initialisieren Sie npm in Ihrem Projekt, indem Sie Folgendes ausführen:

npm init -y

Dieser Befehl erstellt eine Paket.json Datei, die Details zu Ihrem Projekt wie Name, Version usw. enthält.

In diesem Tutorial wird die Verwendung des ES6-Modulsystems vorgestellt. Richten Sie dies ein, indem Sie Ihre öffnen Paket.json Datei und Angabe von “Typ: “Modul” im JSON-Objekt.

Schritt 2: Installieren von Abhängigkeiten

Sie müssen einige Abhängigkeiten installieren, damit Ihr Server ordnungsgemäß funktioniert:

• ExpressJS: ExpressJS ist ein NodeJS-Framework, das eine robuste Reihe von Funktionen für Web- und mobile Anwendungen bietet. Die Verwendung von Express vereinfacht Ihren Servererstellungsprozess.
• Axios: Axios ist ein Promise-basierter HTTP-Client. Sie benötigen dieses Paket, um eine POST-Anforderung für ein Zugriffstoken an GitHub zu senden.
• dotenv: dotenv ist ein Paket, das Umgebungsvariablen aus einer .env-Datei in das Objekt process.env lädt. Sie benötigen es, um wichtige Informationen zu Ihrer Bewerbung zu verbergen.

Installieren Sie sie, indem Sie Folgendes ausführen:

npm install express axios dotenv

Schritt 3: Erstellen einer Express-App

Sie müssen einen einfachen Express-Server erstellen, um Anfragen an den OAuth-Anbieter zu verarbeiten und zu senden.

Erstellen Sie zunächst eine index.js Datei im Stammverzeichnis Ihres Projekts, die Folgendes enthält:

import express from "express";
import axios from "axios";
import * as dotenv from "dotenv";
dotenv.config();
const app = express();
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log(`App is running on port ${port}`);
});

Dieser Code importiert die Express-Bibliothek, instanziiert eine Express-Instanz und beginnt, den Port auf Datenverkehr zu überwachen 3000.

Schritt 4: Routen-Handler erstellen

Sie müssen zwei Routenhandler erstellen, um den OAuth-Fluss zu verarbeiten. Die erste leitet den Benutzer zu GitHub um und fordert die Autorisierung an. Die zweite verarbeitet die Umleitung zurück zu Ihrer App und stellt die Anforderung für das Zugriffstoken, wenn ein Benutzer Ihre Anwendung autorisiert.

Der erste Routenhandler sollte den Benutzer umleiten https://github.com/login/oauth/authorize?parameters.

Sie müssen eine Reihe erforderlicher Parameter an die OAuth-URL von GitHub übergeben, darunter:

• Client-ID: Dies bezieht sich auf die ID, die Ihre OAuth-Anwendung erhält, wenn sie auf GitHub registriert ist.
• Bereich: Dies bezieht sich auf eine Zeichenfolge, die den Umfang des Zugriffs angibt, den eine OAuth-App auf die Informationen eines Benutzers hat. Eine Liste der verfügbaren Bereiche finden Sie in OAuth-Dokumentation von GitHub. Hier verwenden Sie ein „lesen: Benutzer”-Bereich, der Zugriff gewährt, um die Profildaten eines Benutzers zu lesen.

Fügen Sie den folgenden Code zu Ihrer hinzu index.js Datei:

app.get("/auth", (req, res) => {
const params = {
scope: "read:user",
client_id: process.env.CLIENT_ID,
};

const urlEncodedParams = new URLSearchParams(params).toString();
res.redirect(`https://github.com/login/oauth/authorize?${urlEncodedParams}`);
});

Dieser Code implementiert den ersten Routenhandler. Es speichert die erforderlichen Parameter in einem Objekt und konvertiert sie mithilfe der URLSearchParams-API in ein URL-codiertes Format. Anschließend fügt es diese Parameter zur OAuth-URL von GitHub hinzu und leitet den Benutzer auf die Zustimmungsseite von GitHub um.

Fügen Sie den folgenden Code zu Ihrer hinzu index.js Datei für den zweiten Routenhandler:

app.get("/github-callback", (req, res) => {
const { code } = req.query;
const body = {
client_id: process.env.CLIENT_ID,
client_secret: process.env.CLIENT_SECRET,
code,
};
let accessToken;
const options = { headers: { accept: "application/json" } };
axios
.post("https://github.com/login/oauth/access_token", body, options)
.then((response) => response.data.access_token)
.then((token) => {
accessToken = token;
res.redirect(`/?token=${token}`);
})
.catch((err) => res.status(500).json({ err: err.message }));
});

Der zweite Routenhandler extrahiert die Code zurückgegeben von GitHub in der erf.Abfrage Objekt. Es macht dann eine POST-Anforderung mit Axios zu “https://github.com/login/oauth/access_token” mit dem Code, Kunden IDund client_secret.

Das client_secret ist eine private Zeichenfolge, die Sie generieren, wenn Sie eine GitHub-OAuth-Anwendung erstellen. Wenn der Zugangstoken erfolgreich abgerufen wurde, wird es zur späteren Verwendung in einer Variablen gespeichert. Der Benutzer wird schließlich mit der zu Ihrer Anwendung weitergeleitet Zugangstoken.

Schritt 5: Erstellen einer GitHub-Anwendung

Als Nächstes müssen Sie eine OAuth-Anwendung auf GitHub erstellen.

Melden Sie sich zuerst bei Ihrem GitHub-Konto an und gehen Sie dann zu Einstellungenscrollen Sie nach unten zu Entwicklereinstellungenund wählen Sie aus OAuth-Apps. Klicken Sie abschließend auf „Registrieren Sie eine neue Anwendung.“

GitHub stellt Ihnen ein neues OAuth-Antragsformular wie dieses zur Verfügung:

Füllen Sie die erforderlichen Felder mit Ihren gewünschten Details aus. Das “Homepage-URL“ sollte „http://localhost:3000“ lauten. Dein “Autorisierungs-Callback-URL“ sollte „http://localhost:3000/github-callback“ lauten. Sie können optional auch den Gerätefluss aktivieren, sodass Sie Benutzer für eine Headless-App autorisieren können, z. B. ein CLI-Tool oder einen Git-Anmeldeinformationsmanager.

Schließlich drücken Sie die Anwendung registrieren Taste.

GitHub leitet Sie zu einer Seite mit Ihrer Kunden ID und eine Option zum Generieren Ihrer client_secret. Kopieren Sie Ihre Kunden IDgenerieren Sie Ihre client_secretund kopieren Sie es auch.

Erstellen Sie eine .env-Datei und speichern Sie die Kunden ID und client_secret im Inneren. Nennen Sie diese Variablen CLIENT_ID bzw. CLIENT_SECRET.

Ihr OAuth-Fluss ist jetzt abgeschlossen und Sie können jetzt mit dem Zugriffstoken Anfragen stellen, um Benutzerdaten (die Umfang du vorher angegeben hast).

Die Bedeutung von OAuth 2.0

Die Verwendung von OAuth 2.0 in Ihrer Anwendung vereinfacht die Aufgabe der Implementierung eines Authentifizierungsflusses erheblich. Es sichert die Benutzerdaten Ihrer Kunden mit dem Secure Sockets Layer (SSL)-Standard und stellt sicher, dass sie privat bleiben.