NodeJS Autenticación de Google usando Passport y Express

Si alguna vez ha utilizado su cuenta de Google para iniciar sesión en una aplicación, es posible que haya notado lo fácil que es. Solo necesita hacer clic en un botón y no tiene que escribir su correo electrónico o contraseña. Si bien esto parece simple, lo que sucede debajo del capó es bastante complejo. Sin embargo, herramientas como Passport lo hacen más fácil.

En este tutorial, aprenderá cómo implementar la autenticación de Google en Node usando Passport y Express.

¿Qué es el pasaporte?

Pasaporte (o Passport.js) es un middleware de autenticación de Node que proporciona más de 500 estrategias para autenticar a los usuarios, incluida la autenticación social mediante plataformas como Google y Twitter.

Usarás pasaporte-google-oauth2 estrategia para autenticar usuarios en Google.

Creación de un sistema de autenticación de Google en Node

Esta es una descripción general del sistema de autenticación que creará:

• Cuando un usuario hace clic en el botón de inicio de sesión, será enviado a la página de inicio de sesión de Google donde iniciará sesión.
instagram viewer
• Google redirigirá al usuario a su aplicación con un token de acceso. El token de acceso le da permiso para acceder a la información del perfil de ese usuario.
• Envíe el token de acceso a Google para obtener los datos del perfil.
• Cree un nuevo usuario o recupere el usuario existente de la base de datos.
• Use JWT para proteger rutas confidenciales.

Cómo configurar la autenticación de Google en NodeJS usando Passport

Siga los pasos a continuación para autorizar a los usuarios con Google OAuth,

Paso 1: cree un ID de cliente de Google y un secreto de cliente

Antes de usar Google para que los usuarios inicien sesión en su aplicación, debe registrar su aplicación con Google para obtener la identificación del cliente y el secreto del cliente para usar al configurar Passport.

Inicie sesión en el Consola de Google Cloud y sigue los siguientes pasos para registrar tu aplicación.

Crear un nuevo proyecto. En la barra de menú, seleccione Cartas credenciales y en la lista desplegable, seleccione ID de cliente de OAuth.

Para el tipo de aplicación, seleccione Aplicación web. Agregue el nombre preferido para su aplicación en el campo Nombre.

En los URI de redirección autorizados, utilice http://localhost: 3000 y http://localhost: 3000/autorización/google/devolución de llamada para URI de redirección autorizados.

Hacer clic crear para crear el cliente OAuth. Dado que las credenciales de la aplicación son confidenciales, deberá crear una .env archivo y agregue la identificación del cliente y el secreto del cliente.

ID_CLIENTE = 
CLIENTE_SECRETO = 

Paso 2: configurar el servidor de nodos

Crear una carpeta, usuario-google-autorización, y navegue hasta él.

mkdir usuario-google-autorización
cd usuario-google-autorización

Inicializar npm crear paquete.json.

npm inicializar -y

Ya que usará express para crear el servidor, instálelo ejecutando el siguiente comando.

npm instalar express

Abra la carpeta con su editor de texto preferido y cree un nuevo archivo aplicación.js. Servirá como el punto de entrada de su aplicación.

Cree el servidor NodeJS en aplicación.js.

const expreso = require("expreso");
const aplicación = express();
constante PUERTO = 3000;
app.escuchar (PORT, () => {
 console.log(`Escuchando en el puerto ${PORT}`);
});

Paso 2: Configurar MongoDB

Almacenarás los datos de usuario recibidos de Google en un Base de datos MongoDB. Antes de guardar la información del usuario, debe definir la estructura en la que se almacenarán los datos. La mangosta es perfecta para esto. Proporciona una forma bastante sencilla de crear modelos de datos.

Instalar en pc mangosta.

npm instalar mangosta

Crear un nuevo archivo modelo de usuario.jsy cree el esquema de usuario.

const mangosta = require("mangosta");
const { Esquema } = mangosta.modelo;
const UserSchema = nuevo esquema ({
 Google: {
 identificación: {
 tipo: Cadena,
 },
 nombre: {
 tipo: Cadena,
 },
 Email: {
 tipo: Cadena,
 },
 },
});
const Usuario = mongoose.model("Usuario", UserSchema);
módulo.exportaciones = Usuario;

En modelo de usuario.js, importó mongoose y creó un nuevo esquema.

Fíjate que estás agrupando la información de Google. Esto es especialmente útil cuando también usa otros métodos de autenticación y un usuario usa más de uno. Facilita la prevención del doble registro.

A continuación, crea db.js.

const mangosta = require("mangosta");
mangosta. Promesa = mundial. Promesa;
const dbUrl = "mongodb://localhost/usuario";
const conectar = asíncrono () => {
 mongoose.connect (dbUrl, { useNewUrlParser: true, useUnifiedTopology: true });
 const db = mangosta.conexión;
 db.on("error", () => {
 console.log("no se pudo conectar");
 });
 db.once("abrir", () => {
 console.log("> Conexión exitosa a la base de datos");
 });
};
módulo.exportaciones = {conectar};

Conéctese a la base de datos en aplicación.js.

const expreso = require("expreso");
const aplicación = express();
constante PUERTO = 3000;
const db = require("./db");
db.conectar();
app.escuchar (PORT, () => {
 console.log(`Escuchando en el puerto ${PORT}`);
});

Paso 3: configurar el pasaporte

Instalar en pc pasaporte y pasaporte-google-oauth2.

npm i pasaporte pasaporte-google-oauth2

Crear un nuevo archivo, pasaporteConfig.jse importar la estrategia de Google desde pasaporte-google-oauth2 y modelo de usuario.js.

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

Utilice las credenciales de su aplicación para configurar pasaporte con Google OAuth.

módulo.exportaciones = (pasaporte) => {
 pasaporte.use (nueva GoogleStrategy({
 ID de cliente: proceso.env. IDENTIFICACIÓN DEL CLIENTE,
 clientSecret: proceso.env. CLIENTE_SECRETO,
 URL de devolución de llamada: " http://localhost: 3000/autorización/google/devolución de llamada",
 passReqToCallback: verdadero
 },
 asíncrono (solicitud, accessToken, refreshToken, perfil, hecho) => {
 tratar {
 dejar usuario existente = esperar usuario.findOne({ 'google.id': perfil.id });
// si el usuario existe devuelve el usuario
 si (usuario existente) {
 volver hecho (nulo, usuario existente);
 }
// si el usuario no existe crea un nuevo usuario
 console.log('Creando nuevo usuario...');
 const nuevoUsuario = nuevo Usuario({
 método: 'googlear',
 Google: {
 id: perfil.id,
 nombre: perfil.displayName,
 correo electrónico: perfil.emails[0].valor
 }
 });
 esperar nuevoUsuario.guardar();
 volver hecho (null, newUser);
 } atrapar (error) {
 retorno hecho (error, falso)
 }
 }
 ));
}

Una vez que reciba la información del perfil de Google, verifique si el usuario existe en la base de datos. Si lo hacen, simplemente devuelva el usuario encontrado. Si el usuario es nuevo, cree un nuevo documento en la base de datos y devuelva el usuario creado.

Tenga en cuenta que está trabajando con env variables así que usa el npm paquete dotenv para acceder a ellos en su aplicación.

Instalar en pc dotenv.

npm instalar dotenv

Utilizar dotenv en aplicación.js.

require("dotenv").config()

En aplicación.js,pasar pasaporte para pasaporteConfig.js

const pasaporte = require("pasaporte");
require("./passportConfig") (pasaporte);

Paso 4: crear rutas de autenticación

Necesitas tres rutas para:

• Redirija al usuario a la página de inicio de sesión de Google para obtener el token de acceso.
• Recupere los datos del usuario utilizando el token de acceso recibido.
• Redirigir al usuario a la página de perfil después autenticación exitosa.

// Redirigir al usuario a la página de inicio de sesión de Google
aplicación.obtener(
 "/autorización/google",
 pasaporte.authenticate("google", { alcance: ["correo electrónico", "perfil"] })
);
// Recuperar datos de usuario utilizando el token de acceso recibido
aplicación.obtener(
 "/autorización/google/devolución de llamada",
 pasaporte.authenticate("google", { sesión: falso }),
 (requerido, res) => {
 res.redirect("/perfil/");
 }
);
// ruta de perfil después de iniciar sesión correctamente
app.get("/perfil", (req, res) => {
 consola.log (requerido);
 res.send("Bienvenido");
});

Paso 5: Proteja las rutas privadas

Ahora que ha iniciado sesión como usuario, ¿cómo puede restringir algunas partes de su aplicación solo a usuarios autenticados? Una forma de hacerlo es utilizando JSON Web Tokens (JWT). Los JWT ofrecen una forma segura de transmitir la información. Para autorizar usuarios usando JWT, su aplicación:

• Genere un token utilizando los datos del usuario.
• Pase el token al usuario (el usuario devolverá el token con las solicitudes que necesitan autorización).
• Verifique el token devuelto.
• Otorgue acceso al usuario si el token presentado es válido.

Instalar en pc jsonwebtoken para trabajar con JWT.

npm instalar jsonwebtoken

En aplicación.js, importar jsonwebtoken.

const jwt = require("jsonwebtoken")

Modifique la URL de devolución de llamada de Google para firmar al usuario y generar un token.

aplicación.obtener(
 "/autorización/google/devolución de llamada",
 pasaporte.authenticate("google", { sesión: falso }),
 (requerido, res) => {
 jwt.signo(
 { usuario: req.usuario },
 "llave secreta",
 { expiraIn: "1h" },
 (err, token) => {
 si (err) {
 devuelve res.json({
 token: nulo,
 });
 }
 res.json({
 simbólico,
 });
 }
 );
 }
);

Si inicia sesión, recibirá el token.

A continuación, utilice pasaporte-jwt, una estrategia JWT proporcionada por Passport para verificar el token y autorizar a los usuarios.

npm instalar pasaporte-jwt

En pasaporteConfig.js, agregue la estrategia JWT.

const JwtStrategy = require("passport-jwt").Strategy;
const {ExtractJwt} = require("pasaporte-jwt");
módulo.exportaciones = (pasaporte) => {
 pasaporte.use (nueva GoogleStrategy(
// estrategia de Google
 );
 pasaporte.use(
 nueva estrategia Jwt(
 {
 jwtFromRequest: ExtractJwt.fromHeader("autorización"),
 secretoOrClave: "clavesecreta",
 },
 asíncrono (jwtPayload, hecho) => {
 tratar {
// Extraer usuario
 const usuario = jwtPayload.user;
 hecho (nulo, usuario); 
 } atrapar (error) {
 hecho (error, falso);
 }
 }
 )
 );
}

Aquí, está extrayendo el token del encabezado de autorización donde está almacenado, lo cual es mucho más seguro que almacenarlo en el cuerpo de la solicitud.

Una vez que se verifica el token, el objeto de usuario se envía de vuelta al cuerpo de la solicitud. Para autorizar a los usuarios, agregue el middleware de autenticación JWT del pasaporte a las rutas protegidas.

aplicación.obtener(
 "/perfil",
 pasaporte.authenticate("jwt", { sesión: falso }),
 (requerido, res, siguiente) => {
 res.send("Bienvenido");
 }
);

Ahora, solo tendrán acceso las solicitudes que proporcionen un token válido.

Próximos pasos

Este tutorial le mostró cómo puede usar Passport para que los usuarios inicien sesión en su aplicación usando su cuenta de Google. Usar Passport es mucho más simple que otras formas y ahorrará mucho tiempo al usarlo.

Passport también proporciona otras estrategias de autenticación para usar con otros proveedores de identidad, como Twitter y Facebook. Por lo tanto, vale la pena echarles un vistazo también.

Autenticación de usuarios en NodeJS usando Passport y MongoDB

Leer siguiente

Sobre el Autor