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

Consumiendo recursos seguros desde React Native

En este artículo integraremos el ejemplo básico que comenzamos en la Parte 1 con los servicios que creamos en la Parte 2 de esta serie.

Puedes encontrar el código completo de este ejemplo en el repositorio de Github. Además puedes ver el código inicial que escribimos en la Parte 1.

Introducción

Si seguiste correctamente los pasos anteriores, ya está casi listo. Simplemente nos resta hacer algunas modificaciones al código inicial para poder registrar realmente a un usuario en nuestra base de datos e identificarlo cuando solicite información.

Integrando los servicios en nuestra aplicación de ejemplo

En nuestra aplicación de React Native haremos los siguientes cambios:

1. Asignamos a la constante API_URL la dirección url donde escuchará nuestro servidor, en este caso: http://localhost:3000. En Android deberás reemplazar localhost por tu dirección IP local.
2. Configuramos el estado inicial de nuestra aplicación con los campos jwt y me en null.
3. Creamos un método getJWT para solicitarle un JWT al servidor en base al code que obtuvimos con Account Kit, utilizamos fetch para realizar la petición y guardamos en el estado el resultado en el campo jwt.
4. Modificamos el render del componente para que muestre el JWT obtenido, oculte el botón de Login y habilite los botones Obtener Perfil y Salir cuando el valor jwt haya sido asignado.
5. Creamos un método handleGetMePress para obtener perfil del usuario enviando el JWT obtenido previamente como cabecera en la petición. Al obtener el resultado lo guardamos en el estado como me.
6. Por último modificaremos el método render para mostrar el número de teléfono obtenido en el paso anterior.

El código quedará de la siguiente manera:

¡Listo! Ya deberías poder ejecutar el ejemplo y obtener el siguiente resultado:

Flujo de autenticación y solicitud de perfil

Si te gustó esta serie de posts no dudes en comentar y compartir. Si tienes dudas, escríbenos, estamos para ayudar a los miembros de la comunidad de React Native en el mundo.

Autenticación sin contraseñas con Facebook Account Kit

• Parte 1: Integrando React Native Facebook Account Kit
• Parte 2: Accediendo a recursos seguros con JSON Web Tokens

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