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

Integrando React Native Facebook Account Kit

Published in

Underscope

7 min readOct 1, 2018

Una de las primeras funcionalidades a la hora de desarrollar una app es la de registrar usuarios e iniciar sesión sin que tengan que recordar sus contraseñas, de manera sencilla y sin fricción.

Una opción muy interesante es el producto Account Kit creado por Facebook que permite la validación del número telefónico por medio del envío de un SMS de forma gratuita.

Account Kit permite que las personas se registren en tu aplicación e inicien sesión en ella únicamente usando un número de teléfono o una dirección de correo electrónico, sin necesidad de una contraseña. Es confiable, fácil de usar y permite elegir la manera en que se realiza el registro en la aplicación.
ref.: https://developers.facebook.com/docs/accountkit/

Utilizando este método, además, reducimos el riesgo de registros masivos ya que cada usuario necesita contar con un número de teléfono que no es tan sencillo de obtener como crear cuentas de email / password 😏.

Un poquito de arquitectura

A grandes rasgos y como en cualquier arquitectura cliente / servidor necesitamos saber que el usuario que quiere acceder a un recurso es un usuario válido.

Siguiendo las buenas prácticas descriptas en la página (en inglés) de nuestros amigos de Auth0, decidimos armar este ejemplo utilizando JSON Web Tokens (de aquí en adelante JWT) para identificar las peticiones al servidor.

Sin entrar en mucho detalle, la idea es que en cada petición del cliente se incluya una cabecera Authorization para poder identificarlo en el servidor y darle acceso al recurso en cuestión.

Para entender el flujo entre la aplicación y nuestro servidor, armamos este diagrama que describe paso a paso cómo se verifican los datos:

Obteniendo un JWT para acceder a los recursos de la API de Servicios

El usuario valida su número telefónico por medio de un SMS y luego obtiene un código de Facebook (este puede utilizarse solo una vez).
La aplicación envía ese código a la API de Autorización (servicio que crearemos más adelante).
La API de Autorización verifica que el código sea válido y, si lo es, retorna un JWT.
Una vez obtenido el JWT, la Aplicación Móvil consulta la API de Servicios incluyendo el valor de este JWT como una cabecera Authorization para acceder a los recursos.

¡Manos a la obra!

Hace ya un tiempo en Underscope creamos react-native-facebook-account-kit, una librería para integrar fácilmente Account Kit en un proyecto de React Native.

En los siguientes pasos vamos a:

Crear y configurar una aplicación en el portal de desarrolladores de Facebook.
Integrar la librería react-native-facebook-account-kit en un nuevo proyecto de React Native.
Configurar el proyecto con los datos obtenidos al crear la aplicación.
Validar que todo el flujo funcione correctamente con un ejemplo muy simple.

Creando la aplicación en Facebook

Antes que nada tenemos que crear una aplicación en Facebook y obtener los datos necesarios para configurar nuestra aplicación posteriormente.

Desde la página de Facebook https://developers.facebook.com/apps/ hacemos click en el botón Agregar una nueva aplicación:

Ingresamos el nombre de la nuestra aplicación y un e-mail de contacto:

Creando una nueva aplicación de Facebook

Presionamos en el botón Configurar en Account Kit:

Luego ingresamos a la sección de Configuración Básica:

Vamos al final de la página y hacemos click en el botón + Agregar Plataforma y luego seleccionamos iOS.

Configuramos el identificador de nuestra aplicación de iOS (el identificador que utilizaremos al subir la aplicación al App Store). En nuestro caso es io.underscope.ejemplo.accountkit. Más adelante lo necesitaremos para configurar el proyecto.

Configurando el identificador del paquete de App Store

Luego haremos lo mismo para configurar el identificador de Android:

Configurando el identificador del paquete de Google Play

Luego, guardamos los cambios y vamos a la sección de Configuración de Account Kit:

Habilitamos la opción de Requerir validación del servidor y luego cliqueamos en Empezar:

En la siguiente sección vamos a obtener los datos que necesitaremos más adelante: Clave secreta de Account Kit y Token de cliente de Account Kit, que nos servirán en futuros pasos:

Integrando Facebook Account Kit

Pasos en común (Android / iOS):

Lo primero que tenemos que hacer es integrar el módulo en nuestra aplicación de React Native usando yarn y luego vincular las librerías nativas usando el comando link de la herramienta de línea de comandos react-native:

yarn add react-native-facebook-account-kitreact-native link react-native-facebook-account-kit

iOS

Te aconsejamos que sigas estos pasos utilizando Cocoapods. De todas formas, puedes encontrar cómo hacerlo de forma manual en el repositorio del proyecto en Github.

Descarta los cambios de la carpeta ios que fueron generados por el comando link del punto anterior. Si usas git puedes usar el comando git checkout -- ios
Agrega RNAccountKit a tu archivo Podfile (si aún no has creado este archivo, puedes hacerlo siguiendo las instrucciones de la página de React). Para este ejemplo el Podfile quedaría así:

target 'EjemploAccountKit' do
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket',
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  pod 'RNAccountKit', :path => '../node_modules/react-native-facebook-account-kit/ios'
end

Desde la carpeta ios ejecuta el comando pod install para descargar las dependencias nativas y vincular el módulo a tu proyecto
Agregamos las siguientes exclusiones al archivo de .gitignore:

# CocoaPodsPods/

Android

¡Listo! No necesitas hacer ningún paso extra 😃.

Configurando Facebook Account Kit

Por último nos queda modificar la configuración en Android y IOS con las claves que obtuvimos al crear la aplicación en la página de Facebook for Developers.

iOS

Modificamos el archivo Info.plist localizado en la carpeta ios del proyecto de React Native.

Es muy importante que reemplacemos el campo CFBundleIdentifier con el identificador de paquete (en este caso) que configuramos al crear la aplicación de Facebook:

<plist version="1.0">
    <dict>
        ...
        <key>CFBundleIdentifier</key>
        <string>io.underscope.ejemplo.accountkit</string>
        
        <key>FacebookAppID</key>
        <string>695473890820467</string>
        
        <key>AccountKitClientToken</key>
        <string>a53ba37c0b33286fa701de5afeb404b2</string>
        
        <key>CFBundleURLTypes</key>
        <array>
            <dict>
                <key>CFBundleURLSchemes</key>
                <array>
                <string>ak695473890820467</string>
                </array>
            </dict>
        </array>
    </dict>
</plist>

Android

En este caso necesitamos modificar tres archivos:

Configuramos el identificador de la aplicación en la sección defaultConfig del archivo android/app/build.gradle:

...
defaultConfig {
    applicationId "io.underscope.ejemplo.accountkit"
    ...
}
...

En android/app/src/main/res/values/strings.xml:

...
<string name="fb_app_id">695473890820467</string>
<string name="ak_client_token">a53ba37c0b33286fa701de5afeb404b2</string>
...

En android/app/src/main/AndroidManifest.xmlagregamos las siguientes líneas dentro del nodo application:

...
<application>

    ...
    <meta-data
        android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/fb_app_id" />
    <meta-data
        android:name="com.facebook.accountkit.ApplicationName"
        android:value="@string/app_name" />
    <meta-data
        android:name="com.facebook.accountkit.ClientToken"
        android:value="@string/ak_client_token" />
 </application>
 ...

Validando que la integración funciona

Una vez integrado el módulo solo nos resta escribir unas líneas de código para verificar que todo funciona. Para eso vamos a editar el archivo App.js y reemplazamos por el siguiente código.

Ejemplo simple para obtener los datos de autenticación enviando un SMS

Configuramos la librería en el componentDidMount indicando el tipo de responseType que utilizaremos para validar en nuestro servidor y algunos valores por defecto como el código de país y prefijo. Puedes encontrar más información sobre el método RNAccountKit.configure en la documentación.

Ejecutamos la aplicación con react-native run-ios o react-native run-androidy deberíamos poder realizar los siguientes pasos:

Obteniendo el valor code luego de validar el número de teléfono

¡Listo! Si todo va bien, Facebook debería retornar dos valores en un objeto plano (state y code) y deberíamos visualizarlo en amarillo como se muestra en la imagen. Si por alguna razón no puedes completar esta serie de pasos, déjanos un comentario así podemos ayudarte.

Autenticación sin contraseñas con Facebook Account Kit

Parte 2: Accediendo a recursos seguros con JSON Web Tokens
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