OAuth 2.0 ist ein Standard, der Anwendungen von Drittanbietern den sicheren Zugriff auf Daten von Web-Apps ermöglicht. Sie können damit Daten abrufen, einschließlich Profilinformationen, Zeitpläne usw. das auf anderen Web-Apps wie Facebook, Google und GitHub gehostet wird. 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.

instagram viewer

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 stellen.
  • 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 Installieren ausdrücken axios dotenv

Schritt 3: Erstellen einer Express-App

Du musst Erstellen Sie einen einfachen Express-Server um Anfragen an den OAuth-Anbieter zu bearbeiten und zu stellen.

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

// index.js
importieren ausdrücken aus "ausdrücken";
importieren Axios aus "Axios";
importieren * wie dotenv aus "dotenv";
dotenv.config();
konst app = ausdrücken ();
konst port = process.env. HAFEN || 3000
app.listen (Port, () => {
Konsole.Protokoll(`App läuft auf 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? Parameter.

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:

// index.js
app.get("/auth", (req, res) => {
// Parameter in einem Objekt speichern
konst Parameter = {
 Umfang: "lesen: Benutzer",
Kunden ID: Prozess.env.KUNDEN ID,
 };
// Konvertiere Parameter in einen URL-codierten String
konst urlEncodedParams = Neu URLSearchParams (params).toString();
 res.umleitung(` 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 Einwilligungsseite von GitHub um.

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

// index.js
app.get("/github-callback", (req, res) => {
konst {code} = req.query;
konst Körper = {
Kunden ID: Prozess.env.KUNDEN ID,
client_secret: Prozess.env.CLIENT_SECRET,
 Code,
 };


Lassen Zugangstoken;
 const options = { headers: { accept: "Anwendung/json" } };
Axios
 .Post("https://github.com/login/oauth/access_token", Körper, Optionen)
 .dann((Antwort) => response.data.access_token)
 .then((Zeichen) => {
 accessToken = Token;
 res.umleitung(`/?token=${token}`);
 })
 .Fang((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 einen POST Anfrage mit Axios zu " https://github.com/login/oauth/access_token" mit dem Code, Kunden ID, und 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 Einstellungen, scrollen Sie nach unten zu Entwicklereinstellungen, und 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 sein " http://localhost: 3000”. Dein "Autorisierungs-Callback-URL" sollte sein " http://localhost: 3000/github-callback“. Sie können optional auch den Gerätefluss aktivieren, sodass Sie Benutzer für eine Headless-App autorisieren können, z ein CLI-Tool oder Git-Anmeldeinformationsmanager.

Der Gerätefluss befindet sich in der öffentlichen Betaphase und kann sich ändern.

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 ID, generieren Sie Ihre client_secret, und kopieren Sie es auch.

Erstellen Sie eine .env-Datei und speichere 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 mithilfe des Secure Sockets Layer (SSL)-Standards und stellt sicher, dass sie privat bleiben.