Autenticación sin contraseñas en React Native con Facebook Account Kit (Parte 2)

Accediendo a recursos seguros con JSON Web Tokens

En este artículo crearemos los servicios que citamos en la introducción de la Parte 1 para posteriormente consumirlos en la Parte 3 de esta serie.

Introducción

Crearemos una simple API con dos servicios:

1. /auth: nos permitirá verificar el código de Facebook Account Kit que se obtiene en la aplicación e identificar o crear al usuario en nuestra base de datos para futuros inicios de sesión. Además este servicio retornará un JWT (JSON Web Token) para identificar el usuario en las sucesivas peticiones que requieran seguridad.
2. /me: en base a las credenciales de usuario provistas en el JWT, consultará la base de datos y retornará los datos del usuario en cuestión.

Configurando el proyecto

En nuestro caso utilizaremos NodeJS con el framework Hapijs, pero puedes utilizar otro lenguaje / framework con el que estés familiarizado.

Comenzamos creando un nuevo proyecto e instalamos las siguientes dependencias:

yarn init
yarn add hapi hapi-auth-jwt2 jsonwebtoken lowdb node-fetch qs
yarn add -D nodemon

Abrimos el archivo package.json y agregamos la siguiente línea en la sección de scripts. Esto nos permitirá refrescar el servidor a medida que introduzcamos cambios:

"start": "nodemon ./index.js -e js"

Por último creamos el archivo index.js y comenzamos a programar.

Puedes encontrar el código completo de este ejemplo en el repositorio de Github.

Configurando el servidor

En este paso agregamos las librerías que vamos a utilizar y programamos una simple ruta para comprobar que todo funciona correctamente.

Cabe destacar dos puntos importantes en el código que incluimos a continuación:

1. La creación e inicialización de una base de datos para guardar los usuarios que vayan registrándose. Por simplicidad en este ejemplo elegimos lowdb que es una base de datos simple que almacena los datos en disco.
2. La configuración de una estrategia de Hapijs usando hapi-auth-jwt2 que nos permitirá interceptar las peticiones que vengan con un JWT en la cabecera Authorization, verificar que dicho JWT sea válido, incluir los datos como parte de la petición y acceder a ellos fácilmente llamando a request.credentials desde cualquier ruta que aseguremos, como vamos a ver más adelante.

La constante JWT_SECRET se incluye como parte del ejemplo por simplicidad pero en un escenario real sugerimos obtenerla de una variable de entorno.
Además, te aconsejamos que sea una clave generada de forma aleatoria (por ejemplo, usando la herramienta openssl).

Para verificar, ejecutamos el comando yarn start y desde un navegador solicitamos la página http://localhost:3000, la cual debería retornar el texto OK.

Programando el servicio de autenticación /auth

Primero que nada creamos las siguientes variables de entorno y constantes.

Si quieres utilizar la aplicación en Facebook que hemos creado en la Parte 1, tendrás que reemplazar los valores.

La constante FACEBOOK_APP_SECRET se incluye como parte del ejemplo por simplicidad pero en un escenario real sugerimos obtenerla de una variable de entorno.

Luego reemplazamos la ruta que creamos en el punto anterior por algo que tenga un poco más de sentido:

1. Cambiamos el método GET por POST y configuramos la strategy usando { auth: false }para que no intercepte la petición en búsqueda de un JWT.
2. Creamos la función getFacebookToken que será la encargada de verificar el code provisto por el usuario de la aplicación en conjunto con el id y secret de nuestra aplicación de Facebook. Además utilizaremos el access_token para consultar más información del usuario en Facebook. En este caso su número telefónico.
3. Creamos la función getFacebookMe para consultar los datos del usuario con su access_token.
4. Por último programamos el método handleAuth con la lógica de la ruta en cuestión. Guardamos en la base de datos al usuario si no existía, generamos y retornamos el JWT firmado.

Programando el servicio asegurado /me

Para que el punto anterior tenga sentido, crearemos ahora una ruta que requiera que el usuario esté registrado. En este caso la ruta devolverá el perfil del usuario en la base de datos:

1. Agregamos la ruta e incluimos en la configuración el parámetro { auth: 'jwt' }para que la estrategia que definimos previamente nos devuelva las credenciales del cliente en la variable request.auth.
2. Creamos el método handleMe con la lógica que buscará al usuario por medio de su identificador en la base de datos y retornará el perfil completo.

¡Listo! Solo nos queda integrar la aplicación con los servicios como se describe en la Parte 3.

Autenticación sin contraseñas con Facebook Account Kit

• Parte 1: Integrando React Native Facebook Account Kit
• Parte 3: Consumiendo recursos seguros desde React Native

Si estás buscando expertos en React Native, ¡no dudes en contactarnos! Escríbenos desde nuestra web o por e-mail a newbiz@underscope.io