Die offene Autorisierung, auch als OAuth bekannt, ist ein Protokoll, mit dem ein Benutzer auf Ihrer Website mit einem Drittanbieterdienst wie Google, Github, Facebook usw. autorisiert wird. Der Drittanbieterdienst teilt einige Daten (Name, E-Mail, Profilbild usw.) mit Ihrer Website und autorisiert dann den Benutzer in seinem Namen, ohne die Kennwörter und Benutzernamen für Ihre Website zu verwalten und den Benutzern eine Menge zusätzlicher Ärger zu speichern.

Wie OAuth funktioniert

Wenn ein Benutzer auf „Mit Google anmelden“ klickt, führt der Benutzer zur Seite der Google OAuth -Einverständniser. Wenn der Benutzer der Zustimmung zustimmt und seine Identität bei Google authentifiziert, kontaktiert Google Ihre Website als Drittanbieter -Dienst und autorisiert den Benutzer in seinem Namen und teilen Sie einige Daten mit Ihrer Website. Auf diese Weise kann der Benutzer autorisiert werden, ohne die Anmeldeinformationen für Ihre Website separat zu verwalten.

Implementierung von Google OAuth mit dem Knoten.JS

Fast alle Programmiersprachen bieten verschiedene Bibliotheken, um Google OAuth zu implementieren, um Benutzer zu autorisieren. Knoten.JS bietet Bibliotheken "Passport" und "Passport-Google-oauth20" zur Implementierung von Google OAuth. In diesem Artikel werden wir ein OAuth -Protokoll implementieren, um die Benutzer zur Verwendung von Knoten zu autorisieren.JS.

Erstellen Sie ein Projekt bei Google

Der erste Schritt zur Implementierung von Google OAuth besteht darin, ein Projekt auf der Google Developer -Konsole für Ihre Website zu erstellen. Dieses Projekt wird verwendet, um die API -Tasten zu erhalten. Gehen Sie in den folgenden Link und erstellen Sie Ihr Projekt:

https: // Konsole.Entwickler.Google.com

.

Konfigurieren von Google Project

Gehen Sie nach dem Erstellen des Projekts in das Projekt ein und wählen.

Klicken Sie auf die Schaltfläche "Erstellen" und geben Sie alle Details Ihres Projekts an. Klicken Sie auf "Speichern und weiter", um weiterzumachen.

Geben Sie nun den Umfang Ihres Projekts an. Scopes sind die Arten von Berechtigungen, um auf die Daten des Benutzers aus einem Google -Konto zugreifen zu können. Sie müssen die Berechtigungen einrichten, um bestimmte Benutzerdaten von Ihrem Google -Konto zu erhalten. Klicken Sie auf „Speichern und fahren Sie fort.”

Fügen Sie nun die Testbenutzer dem Projekt hinzu, wenn Sie möchten. Testbenutzer sind die einzigen zulässigen Benutzer, die im Testmodus auf Ihre Webanwendung zugreifen können. Im Moment geben wir keinen Testbenutzer ein und klicken auf "Speichern und fortfahren", um zur Zusammenfassung des Projekts überzugehen.

Überprüfen Sie Ihr Projekt auf der Zusammenfassung und speichern Sie die Konfiguration. Jetzt werden wir Anmeldeinformationen für unser Projekt generieren. Wählen Sie im Menü "links" die Registerkarte "Anmeldeinformationen" und klicken.0 Client -IDs.

Wählen Sie im Dropdown -Menü "OAuth -Client -ID" aus und geben Sie die Art der Anwendung als "Webanwendung" und den Namen Ihrer Anwendung an.

Auf derselben Seite müssen wir zwei URIs bereitstellen, die "autorisierten JavaScript -Ursprünge" und die "autorisierte Umleitung uris". Die 'autorisierte JavaScript -Herkunft' ist der HTTP -Ursprung Ihrer Webanwendung und kann keinen Weg haben. Die "autorisierte Umleitunguris" ist die genaue URI mit einem Pfad, in dem der Benutzer nach der Google -Authentifizierung umgeleitet wird.

Klicken Sie nach Eingabe aller erforderlichen Einträge auf "Erstellen", um OAuth -Anmeldeinformationen zu erstellen.

Knoten einleiten.JS -Projekt

Bisher haben wir ein Google -Projekt erstellt, um Benutzer für unsere Anwendung mit Google zu autorisieren. Jetzt werden wir den Knoten einleiten.JS -Projekt zur Implementierung von OAuth. Erstellen Sie ein Verzeichnis namens "Auth" und initiieren Sie das Express -Projekt.

Ubuntu@Ubuntu: ~ $ mkdir auth
Ubuntu@Ubuntu: ~ $ CD Auth
Ubuntu@Ubuntu: ~ $ npm init -y

Installation der erforderlichen NPM -Pakete

So implementieren Sie Google OAuth mit dem Knoten.JS, wir müssen einige NPM -Pakete installieren. Wir werden 'Pass', 'Express', 'Path' und 'Passport-Google-Oauth20' verwenden. Installieren Sie diese Pakete mit NPM.

Ubuntu@Ubuntu: ~ $ NPM Installieren Sie Expresspasspasspass-Google-OAUTH20-Pfad

Knoten schreiben.JS -Code

Zunächst schreiben wir zwei einfache HTML -Webseiten mit einer Schaltfläche und autorisieren den Benutzer, wenn Sie auf die Schaltfläche klicken. Die zweite Seite wird autorisiert und der Benutzer wird nach der Autorisierung auf die autorisierte Seite umgeleitet. Erstellen Sie eine Datei 'Public/Index.html '.

Erstellen Sie nun eine Datei öffentlich/Erfolg.HTML 'mit dem folgenden Inhalt.

Autorisiert

Nach dem Erstellen von Webseiten schreiben wir jetzt Code, um die Benutzer zur Verwendung von Google OAuth zu autorisieren. Erstellen Sie eine Datei 'Index.JS '.

// erforderliche Pakete importieren
const express = forderung ('express');
const passport = fordert ('passport');
const path = fordern ('path');
const googlestrategy = fordert ('passport-Google-oauth20').Strategie;
const App = express ();
// Parameter definieren
// Client -ID ist der Parameter, den wir von der Google Developer -Konsole erhalten
Client_id = ”xxxxxxx”;
// Client -Geheimnis wird auch von der Google Developer Console entnommen
Client_secret = ”xxxxx”;
// Der Benutzer wird nach der Autorisierung zum Callback_url umgeleitet
Callback_url = ”http: // localhost: 8000/autorisiert”;
// Die Portnummer muss die gleiche sein wie in der Entwicklerkonsole definiert
Port = 8000;
// Passport Middleware konfigurieren
App.Verwendung (Pass.initialisieren());
App.Verwendung (Pass.Sitzung());
Reisepass.serializEeuser (function (id, erledigt)
fertig (null, id);
);
Reisepass.DeserializeUser (Funktion (ID, Done)
fertig (null, id);
);
// Die folgende Middleware wird ausgeführt, wann immer der Reisepass. Die authentifizierende Methode wird aufgerufen und gibt verschiedene im Bereich definierte Parameter zurück.
Reisepass.Verwendung (neuer Googlestrategy (
clientID: client_id,
clientecret: client_secret,
CALLBACKURL: CALLBACK_URL
,
ASYNC -Funktion (AccessToken, Refreshtoken, Profil, E -Mail, CB)
CB zurückgeben (Null, E -Mail.Ausweis);

));
// Homepage für die Anwendung servieren
App.get ('/', (req, res) =>

res.SendFile (Pfad.Join (__ Dirname + '/public/Index.html '));
);
// Erfolgsseite für die Anwendung servieren
App.get ('/erfolgreich', (req, res) =>

res.SendFile (Pfad.Machen Sie mit (__ Dirname + '/öffentlich/Erfolg.html '));
);
// Der Benutzer wird auf die Seite von Google Auth.
App.get ('/google/auth',
Reisepass.Authenticate ('Google', Scope: ['Profil', 'E -Mail'])
);
// Authentifizierungsfehler Die Umleitung ist in der folgenden Route definiert
App.Get ('/autorisiert',
Reisepass.authenticate ('google', failureedirect: '/'),
(req, res) =>

res.Umleitung ('/Erfolg');

);
// Server laufen
App.Hören Sie (Port, () =>

Konsole.Protokoll ("Server wird auf Port" + Port ausgeführt)
)

Testen von Google OAuth

Jetzt ist unsere Anwendung bereit und wir können testen, ob sie die Benutzer mit Google OAuth autorisiert. Gehen Sie zum Stammverzeichnis und führen Sie die Anwendung aus.

Ubuntu@Ubuntu: ~ $ Node Index.JS

Geben Sie nun die URL Ihrer Anwendung in den Browser ein.

http: // localhost: 8000

Es zeigt die Startseite mit einem Anker -Tag.

Wenn wir auf die "Autorisierung hier" klicken, wird es auf die Google OAuth -Seite weitergeleitet.

Ihr Anwendungsname "Test" wird auf der Google -Authentifizierungsseite angezeigt. Wenn Sie Ihr Konto autorisieren, führt Sie zur autorisierten Seite.

Abschluss

Das Verwalten von Benutzernamen und Passwörtern für verschiedene Webanwendungen ist für Benutzer keine glückliche Aufgabe. Viele Benutzer lassen Ihre Webanwendung, ohne ihr Konto zu registrieren, nur weil sie keine Anmeldeinformationen verwalten möchten. Der Autorisierungsprozess auf Ihrer Webanwendung oder Website kann durch die Verwendung von Diensten von Drittanbietern wie Google, Facebook usw. vereinfacht werden. Diese Dienste genehmigen die Benutzer in ihrem Namen, und der Benutzer muss keine Anmeldeinformationen separat verwalten. In diesem Artikel haben wir das Google OAuth -Protokoll implementiert, um die Benutzer zur Verwendung von Knoten zu autorisieren.JS.