Code Monkey home page Code Monkey logo

googleauth_passport_demo's Introduction

Google Auth demo con Passport.js y jsonwebtoken

img

Demostración de autenticación con Google hecha en Node.js con express, passport.js y almacenando un jsonwebtoken(jwt) en las cookies. Cuenta con login y logout.

Dependencias

  • Dotenv
  • Express
  • Express-session
  • Jsonwebtoken
  • Passport
  • Passport-google-oauth20
  • Nodemon

Instalación

npm i 
npm i --save-dev nodemon

Para iniciar el proyecto en localhost:3000 debemos modificar scripts de package.json

  "scripts": {
    "start": "nodemon index.js"
  },

Y después iniciar

  npm start

Contenido del archivo .env

Primero creamos el .env que luego añadiremos a .gitignore

  CLIENT_ID
  CLIENT_SECRET

Pasos en la cuenta de Google

Ahora que ya tenemos el proyecto listo para ser lanzado, antes debemos crear unas credenciales de Google. Para ello, escribiremos en google: google credentials:

img

Nos dirigimos a este enlace. Una vez dentro nos aparecerá una opción de crear proyecto, lo creamos y le ponemos el nombre que queramos.

El siguiente paso es crear un ID de cliente OAuth, para ello iremos aquí:

img

Nos aparecerá un mensaje de configurar pantalla de consentimiento, vamos a él.

img

Elegimos externo

img

Aquí solo necesitamos marcar los campos obligatorios

img

Vamos a guardar y continuar

img

Guardar y continuar

img

Volvemos al panel y con esto ya tenemos configurado la pantalla de consentimiento.

Ahora sí, vamos a credenciales y pulsamos de nuevo en Crear ID de cliente de OAuth. Escogemos aplicación web, y aquí llegan los pasos más importantes:

img

Debemos poner en URI de redireccionamiento autorizado, nuestra ruta

/google/callBack

Como vamos a correr la app en localhost:3000, simplemente concatenamos la url. En el caso de desplegar la app con otro dominio, hacer lo mismo.

Pulsamos en guardar y nos aparecerán nuestro ID de cliente y secreto de Cliente. Debemos guardarlos y escribirlos en el archivo .env definido anteriormente

img

Esto es todo por la parte de la cuenta de Google

Una vez añadidas las credenciales a nuestro .env, el proyecto debería funcionar tal que así:

img

Como vemos, la autenticación de google nos crea un jsonwebtoken en las cookies que podemos tratar para manejar sesiones. Este token desaparece al hacer logout.

Este sería el funcionamiento del proyecto con autenticación de google. Las funciones están detalladas en el código con comentarios.

googleauth_passport_demo's People

Contributors

alenriquez96 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.