Autenticazione Google NodeJS tramite Passport ed Express

Se hai mai utilizzato il tuo account Google per accedere a un'applicazione, potresti aver notato quanto sia facile. Devi solo fare clic su un pulsante e non devi digitare la tua e-mail o password. Anche se questo sembra semplice, quello che succede sotto il cofano è piuttosto complesso. Tuttavia, strumenti come Passport lo rendono più semplice.

In questo tutorial imparerai come implementare l'autenticazione di Google in Node utilizzando Passport ed Express.

Cos'è il passaporto?

Passaporto (o Passport.js) è un middleware di autenticazione Node che fornisce più di 500 strategie per l'autenticazione degli utenti, inclusa l'autenticazione sociale utilizzando piattaforme come Google e Twitter.

Userai passaporto-google-oauth2 strategia per autenticare gli utenti su Google.

Creazione di un sistema di autenticazione di Google in Node

Questa è una panoramica del sistema di autenticazione che creerai:

• Quando un utente fa clic sul pulsante di accesso, verrà inviato alla pagina di accesso di Google in cui eseguirà l'accesso.
instagram viewer
• Google reindirizzerà l'utente alla tua applicazione con un token di accesso. Il token di accesso ti dà il permesso di accedere alle informazioni del profilo di quell'utente.
• Invia il token di accesso a Google per ottenere i dati del profilo.
• Crea un nuovo utente o recupera l'utente esistente dal database.
• Usa i JWT per proteggere i percorsi sensibili.

Come configurare l'autenticazione di Google in NodeJS utilizzando Passport

Segui i passaggi seguenti per autorizzare gli utenti con Google OAuth,

Passaggio 1: crea un ID client Google e un segreto client

Prima di utilizzare Google per l'accesso degli utenti alla tua app, devi registrare la tua applicazione con Google per ottenere l'ID client e il client secret da utilizzare durante la configurazione di Passport.

Accedi al Console Google Cloud e segui i seguenti passaggi per registrare la tua app.

Crea un nuovo progetto. Nella barra dei menu, seleziona Credenziali e nell'elenco a discesa, selezionare ID cliente OAuth.

Per il tipo di applicazione, selezionare applicazione web. Aggiungi il nome preferito per la tua applicazione nel campo Nome.

In URI di reindirizzamento autorizzati, utilizzare http://localhost: 3000 e http://localhost: 3000/auth/google/richiamata per URI di reindirizzamento autorizzati.

Clic creare per creare il client OAuth. Poiché le credenziali dell'app sono sensibili, dovrai creare un file .env file e aggiungi l'ID client e il client secret.

CLIENT_ID = 
CLIENTE_SEGRETO = 

Passaggio 2: configurare il server del nodo

Crea una cartella, utente-google-auth, e naviga verso di esso.

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

Inizializzare npm creare pacchetto.json.

npm init -y

Dal momento che utilizzerai express to creare il server, installalo eseguendo il comando seguente.

npm install express

Apri la cartella con il tuo editor di testo preferito e crea un nuovo file app.js. Servirà come punto di ingresso della tua domanda.

Crea il server NodeJS in app.js.

const express = require("express");
const app = express();
cost PORT = 3000;
app.ascolta (PORTA, () => {
 console.log(`Ascolto sulla porta ${PORT}`);
});

Passaggio 2: configura MongoDB

Memorizzerai i dati utente ricevuti da Google in a Database MongoDB. Prima di salvare le informazioni sull'utente, è necessario definire la struttura in cui verranno archiviati i dati. La mangusta è perfetta per questo. Fornisce un modo piuttosto semplice per creare modelli di dati.

Installare mangusta.

npm installa mangusta

Crea un nuovo file userModel.jse creare lo schema utente.

const mangusta = require("mangusta");
const { Schema } = mongoose.model;
const UserSchema = nuovo schema({
 Google: {
 ID: {
 tipo: stringa,
 },
 nome: {
 tipo: stringa,
 },
 e-mail: {
 tipo: stringa,
 },
 },
});
const Utente = mongoose.model("Utente", SchemaUtente);
module.exports = Utente;

Nel userModel.js, hai importato mangusta e creato un nuovo schema.

Nota che stai raggruppando le informazioni da Google. Ciò è particolarmente utile quando si utilizzano anche altri metodi di autenticazione e un utente ne utilizza più di uno. Semplifica la prevenzione della doppia registrazione.

Quindi, crea db.js.

const mangusta = require("mangusta");
mangusta. Promessa = globale. Promettere;
const dbUrl = "mongodb://localhost/utente";
const connect = asincrono () => {
 mongoose.connect (dbUrl, { useNewUrlParser: true, useUnifiedTopology: true });
 const db = mongoose.connection;
 db.on("errore", () => {
 console.log("Impossibile connettersi");
 });
 db.once("aperto", () => {
 console.log("> Collegato con successo al database");
 });
};
module.exports = {connetti};

Collegati al database in app.js.

const express = require("express");
const app = express();
cost PORT = 3000;
const db = require("./db");
db.connect();
app.ascolta (PORTA, () => {
 console.log(`Ascolto sulla porta ${PORT}`);
});

Passaggio 3: imposta il passaporto

Installare passaporto e passaporto-google-oauth2.

npm i passaporto passport-google-oauth2

Crea un nuovo file, passaportoConfig.jse importa la strategia di Google da passaporto-google-oauth2 e userModel.js.

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

Usa le credenziali dell'app per la configurazione passaporto con Google OAuth.

module.exports = (passaporto) => {
 passport.use (nuova GoogleStrategy({
 ID cliente: process.env. IDENTIFICATIVO CLIENTE,
 clientSecret: process.env. CLIENT_SECRET,
 callbackURL: " http://localhost: 3000/auth/google/callback",
 passReqToCallback: vero
 },
 asincrono (richiesta, accessToken, refreshToken, profilo, fatto) => {
 Tentativo {
 let esistenteUser = await User.findOne({ 'google.id': profile.id });
// se l'utente esiste restituisce l'utente
 se (utente esistente) {
 ritorno fatto (null, esistenteUser);
 }
// se l'utente non esiste crea un nuovo utente
 console.log('Creazione nuovo utente...');
 const nuovoUtente = nuovo Utente({
 metodo: 'google',
 Google: {
 id: profilo.id,
 nome: profile.displayName,
 email: profile.emails[0].value
 }
 });
 await newUser.save();
 ritorno fatto (null, newUser);
 } cattura (errore) {
 ritorno fatto (errore, falso)
 }
 }
 ));
}

Dopo aver ricevuto le informazioni del profilo da Google, controlla se l'utente esiste nel database. Se lo fanno, restituisci semplicemente l'utente trovato. Se l'utente è nuovo, creare un nuovo documento nel database e restituire l'utente creato.

Nota che stai lavorando con inv variabili quindi usa il npm pacchetto dotenv per accedervi nella tua applicazione.

Installare dotenv.

npm install dotenv

Utilizzo dotenv in app.js.

require("dotenv").config()

Nel app.js,passaggio passaporto a passaportoConfig.js

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

Passaggio 4: crea percorsi di autenticazione

Hai bisogno di tre percorsi per:

• Reindirizza l'utente alla pagina di accesso di Google per ottenere il token di accesso.
• Recupera i dati dell'utente utilizzando il token di accesso ricevuto.
• Reindirizza l'utente alla pagina del profilo dopo autenticazione riuscita.

// Reindirizza l'utente alla pagina di accesso di Google
app.get(
 "/auth/google",
 passport.authenticate("google", { ambito: ["email", "profile"] })
);
// Recupera i dati dell'utente utilizzando il token di accesso ricevuto
app.get(
 "/auth/google/callback",
 passport.authenticate("google", { sessione: false }),
 (richiesto, ris) => {
 res.redirect("/profile/");
 }
);
// percorso del profilo dopo l'accesso
app.get("/profile", (req, res) => {
 console.log (richiesto);
 res.send("Benvenuto");
});

Passaggio 5: proteggi i percorsi privati

Ora che hai effettuato l'accesso come utente, come puoi limitare alcune parti della tua applicazione solo agli utenti autenticati? Un modo per farlo è utilizzare i token Web JSON (JWT). I JWT offrono un modo sicuro per trasmettere le informazioni. a autorizzare gli utenti utilizzando JWT, la tua applicazione:

• Genera un token utilizzando i dati utente.
• Passa il token all'utente (l'utente invierà il token con le richieste che necessitano di autorizzazione).
• Verifica il token restituito.
• Concedi l'accesso all'utente se il token presentato è valido.

Installare jsonwebtoken per lavorare con i JWT.

npm installa jsonwebtoken

Nel app.js, importare jsonwebtoken.

const jwt = require("jsonwebtoken")

Modifica l'URL di richiamata di Google per firmare l'utente e generare un token.

app.get(
 "/auth/google/callback",
 passport.authenticate("google", { sessione: false }),
 (richiesto, ris) => {
 jwt.sign(
 {utente: req.utente},
 "chiave segreta",
 { scadeIn: "1h" },
 (err, token) => {
 se (err) {
 restituisce res.json({
 gettone: nullo,
 });
 }
 res.json({
 gettone,
 });
 }
 );
 }
);

Se accedi, riceverai il token.

Quindi, usa passaporto-jwt, una strategia JWT fornita da Passport per verificare il token e autorizzare gli utenti.

npm installa passaporto-jwt

Nel passaportoConfig.js, aggiungi la strategia JWT.

const JwtStrategy = require("passport-jwt").Strategy;
const { EstraiJwt } = require("passport-jwt");
module.exports = (passaporto) => {
 passport.use (nuovo GoogleStrategy(
// Strategia di Google
 );
 passaporto.usa(
 nuova JwtStrategy(
 {
 jwtFromRequest: ExtractJwt.fromHeader ("autorizzazione"),
 secretOrKey: "secretKey",
 },
 asincrono (jwtPayload, fatto) => {
 Tentativo {
// Estrai utente
 const utente = jwtPayload.user;
 fatto (null, utente); 
 } cattura (errore) {
 fatto (errore, falso);
 }
 }
 )
 );
}

Qui, stai estraendo il token dall'intestazione di autorizzazione in cui è archiviato, il che è molto più sicuro che archiviarlo nel corpo della richiesta.

Una volta verificato il token, l'oggetto utente viene rispedito al corpo della richiesta. Per autorizzare gli utenti, aggiungi il middleware di autenticazione JWT del passaporto alle rotte protette.

app.get(
 "/profilo",
 passport.authenticate("jwt", {session: false }),
 (req, res, successivo) => {
 res.send("Benvenuto");
 }
);

Ora, solo le richieste che forniscono un token valido avranno accesso.

Prossimi passi

Questo tutorial ti ha mostrato come utilizzare Passport per accedere agli utenti alla tua applicazione utilizzando il loro account Google. L'uso di Passport è molto più semplice di altri moduli e risparmierai molto tempo utilizzandolo.

Passport fornisce anche altre strategie di autenticazione da utilizzare con altri provider di identità, come Twitter e Facebook. Quindi, vale la pena dare un'occhiata anche a quelli.

Autenticazione utente in NodeJS utilizzando Passport e MongoDB

Leggi Avanti

Circa l'autore