Autentificare Google NodeJS folosind Passport și Express

Dacă v-ați folosit vreodată contul Google pentru a vă conecta la o aplicație, atunci este posibil să fi observat cât de ușor este. Trebuie doar să faceți clic pe un buton și nu trebuie să vă introduceți adresa de e-mail sau parola. Deși acest lucru pare simplu, ceea ce se întâmplă sub capotă este destul de complex. Cu toate acestea, instrumente precum Passport fac acest lucru mai ușor.

În acest tutorial, veți învăța cum să implementați autentificarea Google în Node folosind Passport și Express.

Ce este pașaportul?

Pașaport (sau Passport.js) este un middleware de autentificare Node care oferă peste 500 de strategii pentru autentificarea utilizatorilor, inclusiv autentificarea socială folosind platforme precum Google și Twitter.

Vei folosi pasaport-google-oauth2 strategie de autentificare a utilizatorilor pe Google.

Crearea unui sistem de autentificare Google în Node

Aceasta este o prezentare generală a sistemului de autentificare pe care îl veți crea:

• Când un utilizator face clic pe butonul de conectare, acesta va fi trimis la pagina de conectare Google unde se va conecta.
instagram viewer
• Google va redirecționa utilizatorul către aplicația dvs. cu un token de acces. Indicatorul de acces vă oferă permisiunea de a accesa informațiile de profil ale utilizatorului respectiv.
• Trimiteți tokenul de acces la Google pentru a obține datele profilului.
• Creați un utilizator nou sau preluați utilizatorul existent din baza de date.
• Utilizați JWT-uri pentru a proteja rutele sensibile.

Cum să configurați autentificarea Google în NodeJS folosind Passport

Urmați pașii de mai jos pentru a autoriza utilizatorii cu Google OAuth,

Pasul 1: creați un ID de client Google și un secret de client

Înainte de a utiliza Google pentru a conecta utilizatorii la aplicația dvs., trebuie să vă înregistrați aplicația la Google pentru a obține ID-ul clientului și secretul clientului de utilizat la configurarea Passport.

Conectați-vă la Consola Google Cloud și urmați pașii următori pentru a vă înregistra aplicația.

Creați un nou proiect. În bara de meniu, selectați Acreditări iar în lista derulantă, selectați ID client OAuth.

Pentru tipul de aplicație, selectați aplicatie web. Adăugați numele preferat pentru aplicația dvs. în câmpul Nume.

Sub URI de redirecționare autorizate, utilizați http://localhost: 3000 și http://localhost: 3000/auth/google/callback pentru URI-uri de redirecționare autorizate.

Clic crea pentru a crea clientul OAuth. Deoarece acreditările aplicației sunt sensibile, va trebui să creați un .env fișier și adăugați ID-ul clientului și secretul clientului la acesta.

CLIENT_ID = 
CLIENT_SECRET = 

Pasul 2: Configurați Node Server

Creați un folder, user-google-auth, și navigați la el.

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

Inițializați npm a crea pachet.json.

npm init -y

Deoarece vei folosi expres pentru creați serverul, instalați-l rulând următoarea comandă.

npm install express

Deschideți folderul cu editorul de text preferat și creați un fișier nou app.js. Acesta va servi drept punct de intrare al aplicației dvs.

Creați serverul NodeJS în app.js.

const express = require("express");
const app = expres();
const PORT = 3000;
app.listen (PORT, () => {
 console.log(`Ascultare pe portul ${PORT}`);
});

Pasul 2: Configurați MongoDB

Veți stoca datele utilizatorului primite de la Google într-un Baza de date MongoDB. Înainte de a salva informațiile utilizatorului, trebuie să definiți structura în care vor fi stocate datele. Mangusta este perfectă pentru asta. Oferă o modalitate destul de simplă de a crea modele de date.

Instalare mangustă.

npm instalează mangusta

Creați un fișier nou userModel.jsși creați schema utilizatorului.

const mangusta = require("mangusta");
const { Schema } = mangusta.model;
const UserSchema = noua Schema({
 Google: {
 id: {
 tip: șir,
 },
 Nume: {
 tip: șir,
 },
 e-mail: {
 tip: șir,
 },
 },
});
const User = mongoose.model("Utilizator", UserSchema);
module.exports = Utilizator;

În userModel.js, ați importat mangusta și ați creat o nouă schemă.

Observați că grupați informațiile de la Google. Acest lucru este util mai ales atunci când utilizați și alte metode de autentificare și un utilizator folosește mai multe. Face mai ușoară prevenirea dublei înregistrări.

Apoi, creează db.js.

const mangusta = require("mangusta");
mangustă. Promisiune = global. Promisiune;
const dbUrl = "mongodb://localhost/user";
const connect = async () => {
 mongoose.connect (dbUrl, { useNewUrlParser: true, useUnifiedTopology: true });
 const db = mangoose.connection;
 db.on(„eroare”, () => {
 console.log("nu s-a putut conecta");
 });
 db.once("deschis", () => {
 console.log("> Conectat cu succes la baza de date");
 });
};
module.exports = { conecta };

Conectați-vă la baza de date în app.js.

const express = require("express");
const app = expres();
const PORT = 3000;
const db = cere("./db");
db.connect();
app.listen (PORT, () => {
 console.log(`Ascultare pe portul ${PORT}`);
});

Pasul 3: Configurați Passport

Instalare pașaport și pasaport-google-oauth2.

npm i pasaport pasaport-google-oauth2

Creați un fișier nou, passportConfig.jsși importați strategia Google din pasaport-google-oauth2 și userModel.js.

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

Utilizați acreditările aplicației pentru a configura pașaport cu Google OAuth.

module.exports = (pașaport) => {
 passport.use (noul GoogleStrategy({
 ID client: process.env. CLIENT_ID,
 clientSecret: process.env. CLIENT_SECRET,
 apel invers URL: " http://localhost: 3000/auth/google/callback",
 passReqToCallback: adevărat
 },
 asincron (cerere, accessToken, refreshToken, profil, terminat) => {
 încerca {
 let existingUser = await User.findOne({ 'google.id': profile.id });
// dacă utilizatorul există returnează utilizatorul
 if (existingUser) {
 return done (null, existentUser);
 }
// dacă utilizatorul nu există, creează un utilizator nou
 console.log('Se creează un utilizator nou...');
 const newUser = utilizator nou ({
 metoda: „google”,
 Google: {
 id: profile.id,
 nume: profile.displayName,
 e-mail: profile.emails[0].value
 }
 });
 așteaptă newUser.save();
 return done (null, newUser);
 } captură (eroare) {
 returnare făcută (eroare, fals)
 }
 }
 ));
}

După ce primiți informațiile de profil de la Google, verificați dacă utilizatorul există în baza de date. Dacă o fac, pur și simplu returnați utilizatorul găsit. Dacă utilizatorul este nou, creați un nou document în baza de date și returnați utilizatorul creat.

Rețineți că lucrați cu înv variabile, deci folosiți npm pachet dotenv pentru a le accesa în aplicația dvs.

Instalare dotenv.

npm instalează dotenv

Utilizare dotenv în app.js.

require("dotenv").config()

În app.js,trece pașaport la passportConfig.js

const pasaport = require("pașaport");
cere("./passportConfig")(paşaport);

Pasul 4: Creați rute de autentificare

Aveți nevoie de trei rute pentru a:

• Redirecționați utilizatorul către pagina de conectare Google pentru a obține indicativul de acces.
• Preluați datele utilizatorului folosind jetonul de acces primit.
• Redirecționați utilizatorul către pagina de profil după autentificare cu succes.

// Redirecționează utilizatorul către pagina de conectare Google
app.get(
 „/auth/google”,
 passport.authenticate("google", { scope: ["e-mail", "profil"] })
);
// Preluați datele utilizatorului folosind jetonul de acces primit
app.get(
 „/auth/google/callback”,
 passport.authenticate("google", { session: false }),
 (req, res) => {
 res.redirect("/profil/");
 }
);
// traseul profilului după conectarea cu succes
app.get("/profil", (req, res) => {
 console.log (req);
 res.send(„Bine ați venit”);
});

Pasul 5: Protejați rutele private

Acum că v-ați autentificat ca utilizator, cum puteți restricționa anumite părți ale aplicației dvs. numai la utilizatori autentificați? O modalitate de a face acest lucru este utilizarea JSON Web Tokens (JWT). JWT-urile oferă o modalitate sigură de transmitere a informațiilor. La autoriza utilizatorii folosind JWT, aplicația dvs. va:

• Generați un token folosind datele utilizatorului.
• Transmiteți jetonul utilizatorului (utilizatorul va trimite înapoi jetonul cu cereri care necesită autorizare).
• Verificați jetonul trimis înapoi.
• Acordați acces utilizatorului dacă simbolul prezentat este valid.

Instalare jsonwebtoken pentru a lucra cu JWT-uri.

npm instalează jsonwebtoken

În app.js, import jsonwebtoken.

const jwt = require("jsonwebtoken")

Modificați adresa URL de apel invers Google pentru a semna utilizatorul și a genera un simbol.

app.get(
 „/auth/google/callback”,
 passport.authenticate("google", { session: false }),
 (req, res) => {
 jwt.sign(
 { utilizator: req.user },
 "cheie secreta",
 { expiresIn: "1h" },
 (eră, simbol) => {
 dacă (eră) {
 returnează res.json({
 simbol: nul,
 });
 }
 res.json({
 jeton,
 });
 }
 );
 }
);

Dacă vă autentificați, veți primi jetonul.

Apoi, folosește pasaport-jwt, o strategie JWT furnizată de Passport pentru a verifica simbolul și a autoriza utilizatorii.

npm instalează pasaport-jwt

În passportConfig.js, adăugați strategia JWT.

const JwtStrategy = require("passport-jwt").Strategy;
const { ExtractJwt } = require("pașaport-jwt");
module.exports = (pașaport) => {
 passport.use (noua GoogleStrategy(
// Strategia Google
 );
 pasaport.use(
 noua JwtStrategy(
 {
 jwtFromRequest: ExtractJwt.fromHeader ("autorizare"),
 secretOrKey: „secretKey”,
 },
 asincron (jwtPayload, terminat) => {
 încerca {
// Extrage utilizatorul
 utilizator const = jwtPayload.user;
 terminat (null, utilizator); 
 } captură (eroare) {
 făcut (eroare, fals);
 }
 }
 )
 );
}

Aici, extrageți jetonul din antetul de autorizare unde este stocat, ceea ce este mult mai sigur decât stocarea lui în corpul cererii.

Odată ce simbolul este verificat, obiectul utilizator este trimis înapoi la corpul solicitării. Pentru a autoriza utilizatorii, adăugați middleware-ul de autentificare JWT pentru pașaport la rutele protejate.

app.get(
 "/profil",
 passport.authenticate("jwt", { sesiune: fals }),
 (req, res, next) => {
 res.send(„Bine ați venit”);
 }
);

Acum, doar cererile care oferă un simbol valid vor avea acces.

Pasii urmatori

Acest tutorial v-a arătat cum puteți utiliza Passport pentru a conecta utilizatorii la aplicația dvs. folosind contul lor Google. Utilizarea Pașaportului este mult mai simplă decât alte forme și veți economisi mult timp folosindu-l.

Passport oferă, de asemenea, alte strategii de autentificare pentru a le utiliza cu alți furnizori de identitate, cum ar fi Twitter și Facebook. Deci, merită să le verificați și pe acestea.

Autentificarea utilizatorului în NodeJS folosind Passport și MongoDB

Citiți în continuare

Despre autor