10 min de lectura

¿Qué es AccountKit?

AccountKit 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.

AccountKit usa la infraestructura de envío de correos electrónicos y SMS de Facebook.

Account Kit NO requiere una cuenta de Facebook

AccountKit NO requiere una cuenta de Facebook, por lo que ganas mas usuarios en tu plataforma, todos aquellos que no se sienten cómodos otorgándote los permisos de su red social personal.

¿Cómo funciona?

  1. Accoun Kit crea una base de datos exclusiva para tu aplicación.
  2. Una API de REST te permite acceder a los datos en cualquier momento.
  3. La base de datos se completa con una lista de los números de teléfono o las direcciones de correo electrónico y los identificadores de las cuentas que se pueden usar dentro de la aplicación.

Tokens

  • Token de acceso del cliente
  • Token de código de autorización

Con el token de acceso de cliente, después de un inicio de sesión correcto, la aplicación del cliente puede recibir directamente un token de acceso de larga duración, que a partir de entonces será el responsable de pasar a tu servidor de manera segura para su utilización en las llamadas a la API.

Con el token de código de autorización, después de un inicio de sesión correcto, la aplicación del cliente recibirá un código de autorización de corta duración, que será entonces responsable de pasar de manera segura a tu servidor.

Este proceso se ofrece como un recurso para disminuir riesgos en los casos en los que un atacante intente hacerse pasar por tu aplicación del cliente o interceptar de algún otro modo el token de acceso de larga duración de la API.

AccountKit SDK para JavaScript admite solo autenticación mediante el código de autorización

El AccountKit SDK para JavaScript para web admite solo la autenticación mediante el código de autorización, por lo que al recibir el token, debes realizar el proceso de intercambio de tokens para las siguientes peticiones que realices.

Te recomendamos incluir un token de acceso en cada solicitud del servidor a tu aplicación y verificar el identificador del usuario desde el token y no directamente desde el cliente. Esto ayudará a proteger tu aplicación de usuarios no autorizados.

Implementar AccountKit para Web con NodeJS

Crear aplicación de FB para AccountKit Web

1. Crea tu cuenta de Facebook Developer
Ingresa a https://developers.facebook.com y confirma tener todo en regla con tu cuenta de desarrollador.

2. Crea una aplicación nueva o selecciona alguna ya existente
En el sitio de implementación de AccountKit https://developers.facebook.com/docs/accountkit/webjs selecciona alguna aplicación que ya tengas o crea una nueva

3. Agrega AccountKit como producto de tu aplicación
Da click en agregar producto
AccountKit con NodeJS - Crear aplicación

De entre los diferentes productos, selecciona AccountKit

Selecciona la opción de Web

4. Configura tu aplicación
Ingresa a las opciones de configuración de tu aplicación con AccountKit

Decide que tipo de seguridad deseas y da click en Empezar

Es muy importante que indiques la URL de tu sitio, pero también la URL de redirección, es decir, a donde debe mandar AccountKit después de que se logró el login con éxito.

Puedes también configurar si deseas el login solo con SMS o con correo

Implementar código de AccountKit para Web

1. Crea un archivo HTML con el formulario para el login

Nota en la línea 6 que estamos cargando el SDK de accountKit desde su url, y que no es posible cambiarla a tus propios archivos.

2. Agreguemos las funcionales para el login

Deseamos crear funciones para login SMS y con Correo que ya hemos agregado como acciones en los botones del formulario.

Dentro de las etiquetas script, vamos a inicializar AccountKit SDK

Nota que usaremos Mustache para los templates, por lo cual, todo lo que ves entre llaves, son variables que le serán inyectadas desde nuestro server.

Agregaremos entonces el método smsLogin e emailLogin

Lo que estamos haciendo es obtener los datos escritos en los inputs, y mandandolos al método login de accountKit.

Nota que también le estamos mandando una función callback. Esa se ejecutará después de que AccountKit nos responda en el intento de login.

3. Creamos la función callback del login

En esta función manejamos los estados que nos regresa AccounKit.

Nota en las lineas 5 y 6 que estamos accediendo a nuevos elementos del DOM.

4. Agregamos formulario para el CSRF

Estos los debemos agregar justo despues de nuestro formulario actual. La idea es tener un nuevo formulario para poder mandar las respuestas de AccountKit para el telefono y procesar correctamente CSRF y los tokens.

5. Ahora, a trabajar con nuestro servidor

Trabajaremos con NodeJS con ExpressJS usando Mustache para los templates, Request para hacer peticiones al API Graph, Guid para generar una cadena para el CSRF y DotEnv para no publicar nuestros tokens.

Instala los paquetes con

En el archivo server.js (o con el nombre que quieras) iniciala los módulos e inicia la app de express.

Agreguemos los datos necesarios para AccountKit tenga toda la información requerida

Los datos que vienen del archivo .env son sensibles, los debes obtener de las configuraciones en FB de tu app.

Agregamos la ruta para mostrar el formulario de login

Cargamos el template y con mustache lo rendereamos. Es aquí donde le estamos mandando las variables que arriba dejamos con los placeholders.

En nuestro html del login habíamos definido un callback para el proceso de login, el cual llena los campos del formulario y ejecuta el submit del mismo.

Bien, ese submit llega a nuestro server por post para la ruta login_success, y es ahí donde haremos la otra parte del proceso de login.

Primero, en la línea 8 validamos que el código CSRF que definimos sea el mismo, de este modo confirmamos la seguridad de nuestra aplicación.

Dado que el SDK para Javascript solo acepta tokens de autorización, necesitamos hacer el exchange para obtener el nuevo token con el que trabajaremos las peticiones. El token se debe enviar con cierto formato, que es justo el formato que aplicamos en la linea 11.

En la línea 21 solicitamos el nuevo token, y lo almacenamos para futuras peticiones, como la que hacemos en la línea 30 para obtener los datos de la cuenta.

Por último en la línea 37 rendereamos una vista diferente donde solo estamos mostrando los datos de la cuenta.

 

Puedes ver este código completo en https://github.com/nmicht/accountkit-101

Compartir
Licenciada en Informática con Maestría en Tecnologías de la Información. Docente por convicción con trece años de experiencia, desarrolladora desde hace nueve años trabajando actualmente con desarrollo WEB para alta disponibilidad, además de ser consultor independiente y capacitador. Participe del movimiento del software libre como fiel apasionada, reconocida por su actividad en la comunidad y su participación en la inclusión.

DEJA UNA RESPUESTA

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.