NodeJS Google-verificatie met Passport en Express

Als je ooit je Google-account hebt gebruikt om je aan te melden bij een applicatie, is het je misschien opgevallen hoe gemakkelijk het is. U hoeft maar op één knop te klikken en hoeft uw e-mailadres of wachtwoord niet in te voeren. Hoewel dit eenvoudig lijkt, is wat er onder de motorkap gebeurt behoorlijk complex. Tools zoals Passport maken het echter gemakkelijker.

In deze zelfstudie leert u hoe u Google-authenticatie in Node implementeert met Passport en Express.

Wat is paspoort?

Paspoort (of Passport.js) is een node-authenticatie-middleware die meer dan 500 strategieën biedt voor het authenticeren van gebruikers, inclusief sociale authenticatie met behulp van platforms zoals Google en Twitter.

je gaat gebruiken paspoort-google-oauth2 strategie om gebruikers op Google te authenticeren.

Een Google-authenticatiesysteem maken in Node

Dit is een overzicht van het authenticatiesysteem dat u gaat maken:

• Wanneer een gebruiker op de inlogknop klikt, wordt hij doorgestuurd naar de Google-aanmeldingspagina waar hij zich zal aanmelden.
instagram viewer
• Google zal de gebruiker doorverwijzen naar uw applicatie met een toegangstoken. Het toegangstoken geeft u toestemming om toegang te krijgen tot de profielinformatie van die gebruiker.
• Stuur het toegangstoken naar Google om de profielgegevens op te halen.
• Maak een nieuwe gebruiker aan of haal de bestaande gebruiker op uit de database.
• Gebruik JWT's om gevoelige routes te beschermen.

Hoe Google-verificatie in NodeJS in te stellen met Passport

Volg de onderstaande stappen om gebruikers met Google OAuth te autoriseren,

Stap 1: Maak een Google Client ID en Client Secret aan

Voordat u Google gebruikt om gebruikers bij uw app aan te melden, moet u uw toepassing bij Google registreren om de client-ID en het clientgeheim te krijgen die u kunt gebruiken bij het configureren van Passport.

Log in op de Google Cloud-console en volg de volgende stappen om uw app te registreren.

Maak een nieuw project aan. Selecteer in de menubalk Inloggegevens en selecteer in de vervolgkeuzelijst OAuth-client-ID.

Selecteer voor het toepassingstype web applicatie. Voeg de gewenste naam voor uw toepassing toe in het veld Naam.

Gebruik onder geautoriseerde omleidings-URI's http://localhost: 3000 en http://localhost: 3000/auth/google/callback voor geautoriseerde omleidings-URI's.

Klik creëren om de OAuth-client te maken. Aangezien de app-inloggegevens gevoelig zijn, moet u een .env bestand en voeg de client-ID en het clientgeheim eraan toe.

CLIENT_ID = 
CLIENT_SECRET = 

Stap 2: Node-server instellen

Maak een map, gebruiker-google-auth, en navigeer ernaar.

mkdir gebruiker-google-auth
cd gebruiker-google-auth

Initialiseren npm maken pakket.json.

npm init -y

Aangezien u express gaat gebruiken om maak de server, installeer het door de volgende opdracht uit te voeren.

npm install express

Open de map met uw favoriete teksteditor en maak een nieuw bestand aan app.js. Het zal dienen als het toegangspunt van uw aanvraag.

Maak de NodeJS-server in app.js.

const express = vereisen ("express");
const-app = express();
const POORT = 3000;
app.luister (POORT, () => {
 console.log(`Luisteren op poort ${PORT}`);
});

Stap 2: MongoDB instellen

U slaat de van Google ontvangen gebruikersgegevens op in een MongoDB-database. Voordat u de gebruikersinformatie opslaat, moet u de structuur definiëren waarin de gegevens worden opgeslagen. Mongoose is hier perfect voor. Het biedt een vrij eenvoudige manier om gegevensmodellen te maken.

Installeren mangoest.

npm installeer mangoest

Een nieuw bestand maken userModel.jsen maak het gebruikersschema.

const mangoest = vereisen ("mangoest");
const { Schema } = mangoest.model;
const UserSchema = nieuw Schema({
 google: {
 ID kaart: {
 soort: koord,
 },
 naam: {
 soort: koord,
 },
 e-mail: {
 soort: koord,
 },
 },
});
const Gebruiker = mongoose.model ("Gebruiker", Gebruikersschema);
module.exports = Gebruiker;

In userModel.js, je hebt mangoest geïmporteerd en een nieuw schema gemaakt.

Merk op dat u de informatie van Google groepeert. Dit is vooral handig wanneer u ook andere authenticatiemethoden gebruikt en een gebruiker er meer dan één gebruikt. Het maakt het voorkomen van dubbele registratie eenvoudiger.

Maak vervolgens db.js.

const mangoest = vereisen ("mangoest");
mangoest. Belofte = globaal. Belofte;
const dbUrl = "mongodb://localhost/gebruiker";
const connect = asynchroon () => {
 mongoose.connect (dbUrl, { useNewUrlParser: true, useUnifiedTopology: true });
 const db = mangoest.verbinding;
 db.on("fout", () => {
 console.log("kon geen verbinding maken");
 });
 db.once("open", () => {
 console.log("> Succesvol verbonden met database");
 });
};
module.exports = {verbinden};

Maak verbinding met de database in app.js.

const express = vereisen ("express");
const-app = express();
const POORT = 3000;
const db = vereisen(./db");
db.connect();
app.luister (POORT, () => {
 console.log(`Luisteren op poort ${PORT}`);
});

Stap 3: Paspoort instellen

Installeren paspoort en paspoort-google-oauth2.

npm ik paspoort paspoort-google-oauth2

Maak een nieuw bestand, paspoortConfig.jsen importeer de Google-strategie van paspoort-google-oauth2 en userModel.js.

const GoogleStrategy = required("passport-google-oauth2").Strategy;
const Gebruiker = vereisen("./userModel");

Gebruik uw app-inloggegevens om te configureren paspoort met Google OAuth.

module.exports = (paspoort) => {
 paspoort.use (nieuwe GoogleStrategy({
 cliënt-ID: proces.env. KLANT IDENTIFICATIE,
 clientSecret: proces.env. KLANT_SECRET,
 terugbel-URL: " http://localhost: 3000/auth/google/terugbellen",
 passReqToCallback: true
 },
 async (verzoek, accessToken, refreshToken, profiel, klaar) => {
 poging {
 laat bestaandeUser = wachten op User.findOne({ 'google.id': profile.id });
// als de gebruiker bestaat, retourneer de gebruiker
 if (existingUser) {
 retour gedaan (null, bestaande gebruiker);
 }
// als de gebruiker niet bestaat, maak dan een nieuwe gebruiker aan
 console.log('Nieuwe gebruiker aanmaken...');
 const nieuweGebruiker = nieuwe Gebruiker({
 methode: 'google',
 google: {
 id: profiel.id,
 naam: profiel.displayName,
 e-mail: profiel.emails[0].value
 }
 });
 wacht op newUser.save();
 retour gedaan (null, newUser);
 } vangst (fout) {
 retour gedaan (fout, onwaar)
 }
 }
 ));
}

Nadat u de profielinformatie van Google heeft ontvangen, controleert u of de gebruiker in de database bestaat. Als dit het geval is, stuurt u eenvoudig de gevonden gebruiker terug. Als de gebruiker nieuw is, maakt u een nieuw document in de database en retourneert u de aangemaakte gebruiker.

Merk op dat u werkt met benijden variabelen dus gebruik de npm pakket dotenv om ze in uw toepassing te openen.

Installeren dotenv.

npm installeer dotenv

Gebruiken dotenv in app.js.

vereisen("dotenv").config()

In app.js,voorbij gaan aan paspoort naar paspoortConfig.js

const paspoort = vereisen ("paspoort");
vereisen("./passportConfig")(paspoort);

Stap 4: Maak authenticatieroutes

Je hebt drie routes nodig om:

• Leid de gebruiker om naar de Google-aanmeldingspagina om de toegangstoken op te halen.
• Haal gebruikersgegevens op met behulp van het ontvangen toegangstoken.
• Stuur de gebruiker om naar de profielpagina na succesvolle authenticatie.

// Leid de gebruiker om naar de Google-inlogpagina
app.get(
 "/auth/google",
 paspoort.authenticate("google", { bereik: ["e-mail", "profiel"] })
);
// Haal gebruikersgegevens op met behulp van het ontvangen toegangstoken
app.get(
 "/auth/google/terugbellen",
 paspoort.authenticate("google", { session: false }),
 (req, res) => {
 res.redirect("/profile/");
 }
);
// profielroute na succesvol inloggen
app.get("/profile", (req, res) => {
 console.log (vereist);
 res.send("Welkom");
});

Stap 5: Bescherm privéroutes

Hoe kunt u, nu u bent ingelogd als gebruiker, bepaalde delen van uw toepassing beperken tot alleen geverifieerde gebruikers? Een manier om dit aan te pakken is het gebruik van JSON Web Tokens (JWT's). JWT's bieden een veilige manier om de informatie te verzenden. Naar gebruikers autoriseren met behulp van JWT's, zal uw toepassing:

• Genereer een token met behulp van de gebruikersgegevens.
• Geef het token door aan de gebruiker (de gebruiker stuurt het token terug met verzoeken waarvoor autorisatie nodig is).
• Controleer of het token is teruggestuurd.
• Verleen toegang aan de gebruiker als het gepresenteerde token geldig is.

Installeren jsonwebtoken om met JWT's te werken.

npm installeer jsonwebtoken

In app.js, import jsonwebtoken.

const jwt = vereisen ("jsonwebtoken")

Wijzig de Google-callback-URL om de gebruiker te ondertekenen en een token te genereren.

app.get(
 "/auth/google/terugbellen",
 paspoort.authenticate("google", { session: false }),
 (req, res) => {
 jwt.teken(
 { gebruiker: verzoek.gebruiker },
 "geheime sleutel",
 { verlooptIn: "1u" },
 (err, token) => {
 als (fout) {
 retourneer res.json({
 teken: nul,
 });
 }
 res.json({
 teken,
 });
 }
 );
 }
);

Als u inlogt, ontvangt u de token.

Gebruik vervolgens paspoort-jwt, een JWT-strategie van Passport om het token te verifiëren en gebruikers te autoriseren.

npm installeer paspoort-jwt

In paspoortConfig.js, voeg de JWT-strategie toe.

const JwtStrategy = required("paspoort-jwt").Strategie;
const { ExtractJwt } = vereisen ("paspoort-jwt");
module.exports = (paspoort) => {
 paspoort.use (nieuwe GoogleStrategy(
// Google-strategie
 );
 paspoort.gebruik(
 nieuwe JwtStrategie(
 {
 jwtFromRequest: ExtractJwt.fromHeader ("autorisatie"),
 secretOrKey: "secretKey",
 },
 async (jwtPayload, klaar) => {
 poging {
// Gebruiker extraheren
 const gebruiker = jwtPayload.user;
 klaar (null, gebruiker); 
 } vangst (fout) {
 gedaan (fout, onwaar);
 }
 }
 )
 );
}

Hier extraheer je het token uit de autorisatieheader waar het is opgeslagen, wat veel veiliger is dan het op te slaan in de hoofdtekst van het verzoek.

Nadat het token is geverifieerd, wordt het gebruikersobject teruggestuurd naar de aanvraaginstantie. Om gebruikers te autoriseren, voegt u de paspoort-JWT-verificatie-middleware toe aan beveiligde routes.

app.get(
 "/profiel",
 paspoort.authenticate("jwt", { session: false }),
 (req, res, volgende) => {
 res.send("Welkom");
 }
);

Nu krijgen alleen aanvragen die een geldig token opleveren toegang.

Volgende stappen

Deze tutorial liet zien hoe u Passport kunt gebruiken om gebruikers aan te melden bij uw applicatie met hun Google-account. Het gebruik van Passport is veel eenvoudiger dan andere vormen, en u zult veel tijd besparen door het te gebruiken.

Passport biedt ook andere authenticatiestrategieën voor gebruik met andere identiteitsproviders, zoals Twitter en Facebook. Het is dus de moeite waard om die ook eens te bekijken.

Gebruikersauthenticatie in NodeJS met Passport en MongoDB

Lees volgende

Over de auteur