NodeJS Google-Authentifizierung mit Passport und Express

Wenn Sie sich jemals mit Ihrem Google-Konto bei einer Anwendung angemeldet haben, ist Ihnen vielleicht aufgefallen, wie einfach es ist. Sie müssen nur auf eine Schaltfläche klicken und müssen weder Ihre E-Mail-Adresse noch Ihr Passwort eingeben. Während dies einfach erscheint, ist das, was unter der Haube passiert, ziemlich komplex. Tools wie Passport machen es jedoch einfacher.

In diesem Tutorial erfahren Sie, wie Sie die Google-Authentifizierung in Node mit Passport und Express implementieren.

Was ist ein Reisepass?

Reisepass (oder Passport.js) ist eine Node-Authentifizierungs-Middleware, die mehr als 500 Strategien zur Authentifizierung von Benutzern bereitstellt, einschließlich sozialer Authentifizierung über Plattformen wie Google und Twitter.

Du wirst benutzen pass-google-oauth2 Strategie zur Authentifizierung von Benutzern bei Google.

Erstellen eines Google-Authentifizierungssystems in Node

Dies ist eine Übersicht über das Authentifizierungssystem, das Sie erstellen werden:

• Wenn ein Benutzer auf die Anmeldeschaltfläche klickt, wird er zur Google-Anmeldeseite weitergeleitet, auf der er sich anmeldet.
  instagram viewer
• Google leitet den Benutzer mit einem Zugriffstoken zu Ihrer Anwendung weiter. Das Zugriffstoken erteilt Ihnen die Berechtigung, auf die Profilinformationen dieses Benutzers zuzugreifen.
• Senden Sie das Zugriffstoken an Google, um die Profildaten zu erhalten.
• Erstellen Sie einen neuen Benutzer oder rufen Sie den vorhandenen Benutzer aus der Datenbank ab.
• Verwenden Sie JWTs, um sensible Routen zu schützen.

So richten Sie die Google-Authentifizierung in NodeJS mit Passport ein

Führen Sie die folgenden Schritte aus, um Benutzer mit Google OAuth zu autorisieren.

Schritt 1: Erstellen Sie eine Google-Client-ID und ein Client-Secret

Bevor Sie Google verwenden, um Benutzer bei Ihrer App anzumelden, müssen Sie Ihre Anwendung bei Google registrieren, um die Client-ID und das geheime Client-Geheimnis zu erhalten, die beim Konfigurieren von Passport verwendet werden sollen.

Melden Sie sich an Google Cloud-Konsole und befolgen Sie die folgenden Schritte, um Ihre App zu registrieren.

Erstellen Sie ein neues Projekt. Wählen Sie in der Menüleiste aus Referenzen und wählen Sie in der Dropdown-Liste aus OAuth-Client-ID.

Wählen Sie als Anwendungstyp aus Internetanwendung. Fügen Sie den bevorzugten Namen für Ihre Anwendung im Feld Name hinzu.

Verwenden Sie unter autorisierten Umleitungs-URIs http://localhost: 3000 und http://localhost: 3000/auth/google/callback für autorisierte Weiterleitungs-URIs.

Klicken schaffen um den OAuth-Client zu erstellen. Da die App-Anmeldeinformationen vertraulich sind, müssen Sie eine erstellen .env -Datei und fügen Sie die Client-ID und das Client-Geheimnis hinzu.

CLIENT_ID = 
CLIENT_SECRET = 

Schritt 2: Knotenserver einrichten

Erstellen Sie einen Ordner, user-google-auth, und navigieren Sie dorthin.

mkdir user-google-auth
cd user-google-auth

Initialisieren npm erschaffen Paket.json.

npm init -y

Da Sie Express to verwenden werden erstellen Sie den Server, installieren Sie es, indem Sie den folgenden Befehl ausführen.

npm install express

Öffnen Sie den Ordner mit Ihrem bevorzugten Texteditor und erstellen Sie eine neue Datei app.js. Es dient als Einstiegspunkt für Ihre Bewerbung.

Erstellen Sie den NodeJS-Server in app.js.

const express = require("express");
const app = ausdrücken ();
const PORT = 3000;
app.listen (PORT, () => {
 console.log(`Hört auf Port ${PORT}`);
});

Schritt 2: MongoDB einrichten

Sie speichern die von Google erhaltenen Nutzerdaten in einem MongoDB-Datenbank. Bevor Sie die Benutzerinformationen speichern, müssen Sie die Struktur definieren, in der die Daten gespeichert werden. Mungo ist dafür perfekt. Es bietet eine ziemlich einfache Möglichkeit, Datenmodelle zu erstellen.

Installieren Mungo.

npm installiert Mungo

Erstellen Sie eine neue Datei userModel.js, und erstellen Sie das Benutzerschema.

const Mungo = require("Mungo");
const {Schema} = mongoose.model;
const UserSchema = neues Schema({
 Google: {
 Ich würde: {
 Typ: Zeichenkette,
 },
 Name: {
 Typ: Zeichenkette,
 },
 Email: {
 Typ: Zeichenkette,
 },
 },
});
const User = mongoose.model("User", UserSchema);
module.exports = Benutzer;

Im userModel.jshaben Sie Mongoose importiert und ein neues Schema erstellt.

Beachten Sie, dass Sie die Informationen von Google gruppieren. Dies ist besonders nützlich, wenn Sie auch andere Authentifizierungsmethoden verwenden und ein Benutzer mehr als eine verwendet. Es erleichtert die Vermeidung von Doppelregistrierungen.

Als nächstes erstellen db.js.

const Mungo = require("Mungo");
Mungo. Versprechen = global. Versprechen;
const dbUrl = "mongodb://localhost/user";
const connect = async () => {
 mongoose.connect (dbUrl, { useNewUrlParser: true, useUnifiedTopology: true });
 const db = mongoose.connection;
 db.on("Fehler", () => {
 console.log("Konnte keine Verbindung herstellen");
 });
 db.once("öffnen", () => {
 console.log("> Erfolgreich mit Datenbank verbunden");
 });
};
module.exports = { verbinden };

Verbinden Sie sich mit der Datenbank in app.js.

const express = require("express");
const app = ausdrücken ();
const PORT = 3000;
const db = require(./db");
db.connect();
app.listen (PORT, () => {
 console.log(`Hört auf Port ${PORT}`);
});

Schritt 3: Passport einrichten

Installieren Reisepass und pass-google-oauth2.

npm i pass pass-google-oauth2

Erstellen Sie eine neue Datei, PassportConfig.js, und importieren Sie die Google-Strategie aus pass-google-oauth2 und userModel.js.

const GoogleStrategy = require("passport-google-oauth2").Strategy;
const User = require(./userModel");

Verwenden Sie zum Konfigurieren Ihre App-Anmeldeinformationen Reisepass mit Google OAuth.

module.exports = (Pass) => {
 Passport.use (neue GoogleStrategy({
 clientID: process.env. KUNDEN ID,
 clientSecret: process.env. CLIENT_SECRET,
 Rückruf-URL: " http://localhost: 3000/auth/google/callback",
 passReqToCallback: wahr
 },
 async (Anfrage, Zugriffstoken, Aktualisierungstoken, Profil, fertig) => {
 Versuchen {
 let existUser = await User.findOne({ 'google.id': profile.id });
// wenn der Benutzer existiert, den Benutzer zurückgeben
 if (vorhandener Benutzer) {
 return done (null, bestehender Benutzer);
 }
// Wenn der Benutzer nicht existiert, erstellen Sie einen neuen Benutzer
 console.log('Neuen Benutzer erstellen...');
 const newUser = neuer Benutzer ({
 Methode: 'google',
 Google: {
 id: profile.id,
 name: profile.displayName,
 E-Mail: Profil.E-Mails[0].Wert
 }
 });
 warte auf newUser.save();
 return done (null, newUser);
 } Fang (Fehler) {
 Rückgabe erledigt (Fehler, falsch)
 }
 }
 ));
}

Nachdem Sie die Profilinformationen von Google erhalten haben, überprüfen Sie, ob der Benutzer in der Datenbank vorhanden ist. Wenn dies der Fall ist, geben Sie einfach den gefundenen Benutzer zurück. Wenn der Benutzer neu ist, erstellen Sie ein neues Dokument in der Datenbank und geben Sie den erstellten Benutzer zurück.

Beachten Sie, dass Sie mit arbeiten env Variablen verwenden Sie also die npm Paket dotenv um in Ihrer Anwendung darauf zuzugreifen.

Installieren dotenv.

npm installiere dotenv

Verwenden dotenv in app.js.

require("dotenv").config()

Im app.js,passieren Reisepass zu PassportConfig.js

const Reisepass = require("Reisepass");
require(./passportConfig")(passport);

Schritt 4: Erstellen Sie Authentifizierungsrouten

Sie benötigen drei Routen zu:

• Leiten Sie den Benutzer auf die Google-Anmeldeseite weiter, um das Zugriffstoken abzurufen.
• Rufen Sie Benutzerdaten mit dem erhaltenen Zugriffstoken ab.
• Leiten Sie den Benutzer danach auf die Profilseite weiter erfolgreiche Authentifizierung.

// Den Benutzer auf die Google-Anmeldeseite umleiten
app.get(
 "/auth/google",
 Passport.Authenticate("Google", {Geltungsbereich: ["E-Mail", "Profil"] })
);
// Benutzerdaten mit dem erhaltenen Zugriffstoken abrufen
app.get(
 "/auth/google/callback",
 Passport.Authenticate("Google", { Sitzung: Falsch }),
 (req, res) => {
 res.redirect("/profil/");
 }
);
// Profilroute nach erfolgreicher Anmeldung
app.get("/profile", (req, res) => {
 console.log (erforderlich);
 res.send("Willkommen");
});

Schritt 5: Private Routen schützen

Wie können Sie nun, nachdem Sie sich als Benutzer angemeldet haben, einige Teile Ihrer Anwendung nur auf authentifizierte Benutzer beschränken? Eine Möglichkeit, dies zu tun, ist die Verwendung von JSON Web Tokens (JWTs). JWTs bieten eine sichere Möglichkeit zur Übertragung der Informationen. Zu Benutzer autorisieren Mit JWTs wird Ihre Anwendung:

• Generieren Sie anhand der Benutzerdaten ein Token.
• Übergeben Sie das Token an den Benutzer (der Benutzer sendet das Token mit Anforderungen zurück, die einer Autorisierung bedürfen).
• Überprüfen Sie das zurückgesendete Token.
• Gewähren Sie dem Benutzer Zugriff, wenn das präsentierte Token gültig ist.

Installieren jsonwebtoken mit JWTs zu arbeiten.

npm installiert jsonwebtoken

Im app.js, importieren jsonwebtoken.

const jwt = require("jsonwebtoken")

Ändern Sie die Google-Callback-URL, um den Benutzer zu signieren und ein Token zu generieren.

app.get(
 "/auth/google/callback",
 Passport.Authenticate("Google", { Sitzung: Falsch }),
 (req, res) => {
 jwt.sign(
 { Benutzer: angeforderter Benutzer },
 "geheimer Schlüssel",
 { läuft ab: "1h" },
 (ähm, Token) => {
 wenn (fehler) {
 Rückgabe res.json({
 Token: null,
 });
 }
 res.json({
 Zeichen,
 });
 }
 );
 }
);

Wenn Sie sich anmelden, erhalten Sie den Token.

Als nächstes verwenden Pass-jwt, eine von Passport bereitgestellte JWT-Strategie zum Überprüfen des Tokens und Autorisieren von Benutzern.

npm installiere passwort-jwt

Im PassportConfig.js, fügen Sie die JWT-Strategie hinzu.

const JwtStrategy = require("passport-jwt").Strategie;
const {ExtractJwt} = require("passport-jwt");
module.exports = (Pass) => {
 Passport.use (neue GoogleStrategy(
// Google-Strategie
 );
 Pass.use(
 neue JwtStrategy(
 {
 jwtFromRequest: ExtractJwt.fromHeader("Autorisierung"),
 secretOrKey: "secretKey",
 },
 async (jwtPayload, fertig) => {
 Versuchen {
// Benutzer extrahieren
 const user = jwtPayload.user;
 erledigt (null, Benutzer); 
 } Fang (Fehler) {
 fertig (Fehler, falsch);
 }
 }
 )
 );
}

Hier extrahieren Sie das Token aus dem Autorisierungsheader, in dem es gespeichert ist – was viel sicherer ist, als es im Anforderungstext zu speichern.

Sobald das Token verifiziert ist, wird das Benutzerobjekt an den Anfragetext zurückgesendet. Um Benutzer zu autorisieren, fügen Sie geschützten Routen die Passport-JWT-Authentifizierungsmiddleware hinzu.

app.get(
 "/Profil",
 Passport.Authenticate("jwt", { Sitzung: falsch }),
 (req, res, next) => {
 res.send("Willkommen");
 }
);

Jetzt erhalten nur Anfragen, die ein gültiges Token bereitstellen, Zugriff.

Nächste Schritte

Dieses Tutorial hat Ihnen gezeigt, wie Sie Passport verwenden können, um Benutzer mit ihrem Google-Konto bei Ihrer Anwendung anzumelden. Die Verwendung von Passport ist viel einfacher als andere Formulare, und Sie werden durch die Verwendung viel Zeit sparen.

Passport bietet auch andere Authentifizierungsstrategien zur Verwendung mit anderen Identitätsanbietern wie Twitter und Facebook. Es lohnt sich also, auch diese zu prüfen.

Benutzerauthentifizierung in NodeJS mit Passport und MongoDB

Lesen Sie weiter

Über den Autor