Fácil autenticación de Google para Node.js

5 pasos simples para integrarse con Google - código incluido.

Mis ojos se llenaron de lágrimas cuando me di cuenta de que las últimas 10 horas de codificación no sirvieron de nada ... Passport.js me había dado a mí, y a la gente de este mundo, una falsa esperanza.

No estoy seguro de si alguna vez has mirado el código dentro de la biblioteca Passport.js pero no hay mucho de eso, y tampoco es muy bueno. Básicamente es un pequeño código que asegura que sus credenciales de autenticación se coloquen en el lugar correcto. Pero el principal inconveniente de esto es que mata su flexibilidad. Con el pasaporte, debe redirigir sus solicitudes de devolución de llamada a un servidor. Si no sabes lo que eso significa; básicamente apesta si está creando cualquier tipo de aplicación que no sea una aplicación renderizada por el servidor (como una aplicación de página única o SPA).

Pero no te preocupes! Aquí hay un tutorial rápido que le mostrará cómo agregar Google Auth correctamente.

Antes de comenzar ️

Este tutorial asume que tienes:

  1. Una buena comprensión de JavaScript y Node.js
  2. Una aplicación con un servidor

Impresionante, vamos!

Paso 1: Instalar dependencias 🖥

Solo uno: está en NPM si aún no lo asumiste.

  • googleapis

¡Eso fue fácil!

Paso 2: Configura Google

A continuación, deberá configurar la biblioteca con sus credenciales para que Google sepa quién está haciendo las solicitudes.

Para obtener credenciales, si aún no las tiene, vaya a su Consola de Google y cree un nuevo proyecto. Una vez que tenga un nuevo proyecto, solicite algunas claves API. Aquí hay un buen enlace para obtener más ayuda sobre esto.

Archivo: src / google-util.js

El archivo de arriba; importa la biblioteca, crea un objeto de configuración con nuestros detalles y agrega una función que se conectará a Google cuando lo deseemos.

Paso 3: Obtenga la URL de inicio de sesión de Google

¿Por qué necesitamos esto? ... Bueno, para que podamos iniciar sesión en Google, debemos enviarlo a la página de inicio de sesión de Google. Desde aquí, iniciarán sesión en su cuenta y luego serán redirigidos a nuestra aplicación con sus detalles de inicio de sesión.

Archivo: src / google-util.js

El código anterior hace algunas cosas; determina qué información y permisos queremos del usuario cuando inician sesión, y crea una función que usaremos para generar la URL. Finalmente, creamos una función que genera una URL que deberá enviar al cliente.

Paso 4: Tu turno: redirige a tus usuarios a la URL de Google

Este paso requiere que envíe a sus usuarios a la URL que acabamos de crear. En mi aplicación, genero la URL en la API y la envío a mi front-end donde la convierto en la dirección href de un botón, p.

 Inicie sesión con Google 

Esto llevará al usuario a la página de inicio de sesión.

Solución de problemas: si llega a una página que le dice que no tiene acceso (o algo similar) puede significar que no ha configurado correctamente sus credenciales de proyecto de Google. Asegúrese de configurarlos correctamente en su Consola de Google.

Paso 5: Guarde los detalles de inicio de sesión

Afortunadamente, podría haber iniciado sesión en su cuenta de Google y Google lo habría redirigido a su aplicación (o la dirección de redireccionamiento a la que le dijo que fuera). Ahora todo lo que tenemos que hacer es asegurarnos de que la cuenta con la que iniciaron sesión coincida con un usuario en nuestra base de datos (o crear una).

Para hacer esto, Google nos ha dado un parámetro en la dirección de redireccionamiento llamado "código". Verás esto como:

https://yourwebsite.com/callback?code=a-bunch-of-random-characters

Debe extraer este parámetro de "código" y devolverlo a la biblioteca de API de Google para verificar quién es el usuario conectado. Aquí hay un buen paquete de NPM que puede ayudarlo a extraer el parámetro, pero no importa cómo lo haga.

Una vez que tenga el parámetro "código" y lo haya enviado a su servidor, podemos obtener el correo electrónico y la identificación del usuario para usar en nuestra aplicación.

Archivo: src / google-util.js

Ahora todo lo que tiene que hacer es verificar el correo electrónico o la identificación en su base de datos e iniciar sesión en el usuario o registrarlo, ¡depende de usted!

Versión completa

Aquí hay una versión completa del código sin todos los comentarios. Use esto para una buena visión general. Si se atasca, consulte los ejemplos anteriores con explicaciones.

Yahoooo !!

Su aplicación ahora es compatible con Google. Para obtener acceso a más API de Google, simplemente agréguelas a su matriz de "ámbitos" y cuando el usuario vaya a iniciar sesión, se le pedirá que le dé acceso a esos datos, p. Datos de Google Calendar.

Si te ha gustado este artículo, dale un par de aplausos (puedes dejar hasta 50) o puedes comentar si tienes alguna pregunta, ¡haré todo lo posible para responder!

Sigueme en Twitter.

¡Gracias!

Artículo creado por los fundadores de Authenticator: autenticación simple y rápida para su aplicación.

Más publicaciones de Jack Scott.

  • Cómo lancé una startup en 4 días
  • Cree un servidor GraphQL completo con Node.js
  • Adios Redux