Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Node.js
Code

Identificación mediante redes sociales usando Passport para aplicaciones Node.js

by
Length:MediumLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Es un hecho bien demostrado que las contraseñas son inherentemente débiles por naturaleza. De manera que pedir a los usuarios finales que creen contraseñas seguras para cada una de las aplicaciones que utilizan simplemente empeora esta cuestión.

Es una solución fácil permitir a los usuarios autenticarse mediante sus cuentas sociales existentes como Facebook, Twitter, Google, etc.. En este artículo, vamos a hacer justamente eso y agregar esta capacidad de acceso social a la aplicación Node de muestra desarrollada en la primera parte de esta serie sobre autenticación, de forma que seamos capaces de autenticarnos a través de nuestras cuentas de Facebook y Twitter utilizando el middleware Passport.

Si no has echado un vistazo al artículo anterior, te recomiendo que lo hagas, puesto que vamos a trabajar sobre la base establecida en dicho artículo y a añadirle nuevas estrategias, rutas y vistas.

Acceso social

Para los no-iniciados, el acceso social es un tipo de identificación única usando información existente de sitios de redes sociales como Facebook, Twitter, etc., donde se espera normalmente que los usuarios tengan ya cuentas creadas.

El acceso social se basa principalmente en un esquema de autenticación como OAuth 2.0. Para obtener más información sobre los diferentes flujos de inicio de sesión que soporta OAuth, lee este artículo. Elegimos Passport para manejar el acceso social por nosotros, ya que proporciona diferentes módulos para una variedad de proveedores de OAuth, ya sea Facebook, Twitter, Google, GitHub, etc.. En este artículo usaremos los módulos passport-facebook y passport-witter para proporcionar funcionalidad de inicio de sesión a través de las cuentas existentes de Facebook o Twitter.

Autenticación a través de Facebook

Para habilitar la autenticación a través de Facebook, primero tenemos que crear una Facebook App utilizando el Facebook Developer Portal. Anota el App ID (identificador de la aplicación) y el App Secret (secreto de la aplicación), y especifica la URL de callback yendo a Ajustes (Settings) y especificando la URL del sitio (Site URL) en la sección Website para la aplicación. También asegúrate de introducir una dirección válida de correo electrónico para el campo Contact Email (correo electrónico de contacto). Es un requisito para poder realizar esta aplicación pública y accesible por el público.

A continuación, vaya a la sección Estado y revisión y gire el control deslizante a para que la aplicación sea pública. Creamos un archivo de configuración, fb.js, para mantener esta información de configuración que será necesaria para conectarse a Facebook.

Estrategia de acceso al Facebook

De nuevo en nuestra aplicación de nodo, ahora definimos una Estrategia de Pasaporte para autenticar con Facebook usando el módulo FacebookStrategy, utilizando las configuraciones anteriores para obtener el perfil de Facebook del usuario y mostrar los detalles en la vista.

Configuración de rutas

Ahora necesitamos agregar ciertas rutas para permitir el inicio de sesión con Facebook y para manejar la devolución de llamada después de que el usuario haya autorizado la aplicación para usar su cuenta de Facebook.

La página de inicio de sesión de nuestra aplicación de demostración se ve así:

Login With Facebook or Twitter

Al hacer clic en el botón Iniciar sesión con Facebook, intentará autenticarse con Facebook. Si ya has iniciado sesión en Facebook, mostrará el cuadro de diálogo siguiente pidiendo tu permiso, o bien te pedirá que inicies sesión en Facebook y luego muestres este diálogo.

Facebook Auth - Grant Permissions

Si permite que la aplicación reciba su perfil público y su dirección de correo electrónico, se llamará a nuestra función de devolución de llamada registrada con los detalles del usuario. Podemos guardarlos para futuras referencias o mostrarlos o simplemente optar por ignorarlos, dependiendo de lo que quiera hacer con la información. Siéntase libre de saltar adelante en el tiempo y echa un vistazo al código completo en este repo git.

Sería bueno tener en cuenta que, aparte de la información básica que ofrece esta aplicación de demostración, podría utilizar el mismo mecanismo de autenticación para extraer más información útil sobre el usuario, como su lista de amigos, utilizando el ámbito apropiado y utilizando las API de Facebook con el token de acceso recibido con el perfil de usuario.

Autenticación de Twitter

Un módulo de autenticación similar necesita estar cableado para gestionar la autenticación a través de Twitter y Passport chips para ayudar con su módulo passport-passport.

En primer lugar, es necesario crear una nueva aplicación de Twitter utilizando su interfaz de administración de aplicaciones. Una cosa a tener en cuenta aquí es que mientras se especifica la URL de devolución de llamada, Twitter no parece funcionar bien si se da "localhost" en el campo de URL de devolución de llamada. Para superar esta limitación durante el desarrollo, puede utilizar la dirección de bucle especial o "127.0.0.1" en lugar de "localhost". Después de crear la aplicación, anote la siguiente clave de la API y la información secreta en un archivo de configuración de la siguiente manera:

Estrategia de acceso de Twitter

La estrategia de inicio de sesión para Twitter es una instancia de TwitterStrategy y se ve así:

Configuración de rutas

Ahora para probar esto, asegúrese de usar http://127.0.0.1: <port> en lugar de usar http://localhost:<port>. Como ya hemos mencionado anteriormente, parece que hay un problema al intercambiar fichas con Twitter con "localhost" como nombre de host. Al hacer clic en el botón Iniciar sesión con Twitter, como se espera, pide el consentimiento del usuario para permitir que esta aplicación utilice Twitter.

Twitter Auth - Grant Permissions

Al permitir que la aplicación acceda a su cuenta de Twitter y la información limitada, se llama al manejador de devolución de llamada que está registrado en la estrategia de inicio de sesión, que se utiliza para almacenar estos detalles en una base de datos de fondo

Conclusión

¡¡Y ahí lo tienes!! Hemos añadido con éxito los inicios de sesión de Facebook y Twitter a nuestra aplicación de ejemplo sin escribir mucho código y manejar las complejidades involucradas con el mecanismo de autenticación permitiendo que Passport haga el trabajo pesado. Se pueden escribir estrategias de inicio de sesión similares para una variedad de proveedores que soporta Passport. El código para toda la aplicación se puede encontrar en este repositorio git. Siéntase libre de extenderlo y usarlo en sus propios proyectos.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.