Desarrollo

Integrar Account Kit con PHP7 min read

20 abril, 2016 4 min read
Eduardo Linares

author:

Integrar Account Kit con PHP7 min read



Guía para integrar Account Kit con PHP en nuestros proyectos existentes o nuevos.

Reading Time: 4 minutes

Facebook Login ha sido una alternativa fácil de implementar en nuestras aplicaciones web permitiendo a los usuarios registrarse en segundos, pero siempre teníamos problemas cuando los usuarios perdían sus contraseñas o no tenían cuentas de Facebook, para solucionar esto, hace unas semanas Facebook anunció: “Account Kit”, esta herramienta nos ayuda a poder registrar usuarios de una forma fácil y rápida mediante el número de teléfono o correo electrónico y sin contraseña.

La documentación actual para implementar Account Kit es poca, por eso hemos creado esta guía para todos los que programamos en PHP, y de esta forma facilitar la implementación de Account Kit en tu proyecto existente o nuevo.

Si deseas descargar el código fuente puedes hacerlo desde Github.

Requerimientos

  • PHP 5.4+
  • Una cuenta Facebook Developer (Crear Cuenta)
  • Facebook App ID (Crear App)
  • Account Kit SDK: https://sdk.accountkit.com/en_EN/sdk.js

Vale la pena mencionar que el SDK debe ser integrado en tu proyecto web directamente en el head, es decir, con el enlace proporcionado anteriormente ya que si deseas incluirlo en tu propio servidor, este dará 24 horas de uso funcional y luego de esto comenzará a fallar hasta que 7 días después deje de funcionar. Otro punto importante son las variaciones de idioma que te ofrece el Account Kit SDK, las cuales puedes ver aquí y así utilizar el que se ajuste a tu conveniencia.

Preparemos nuestro proyecto

1. El primer paso es crear el archivo index.php donde incluiremos toda la integración y configuración.
2. Luego debemos crear una estructura HTML en nuestro archivo.
3. Incluir dentro de nuestra etiqueta head el Account Kit SDK y demás opciones que necesitemos mostrar.

4. Dentro del body del documento, agregamos los botones para iniciar sesión por correo electrónico o número de teléfono (SMS).

Cada uno de los botones hace la correspondiente llamada a las funciones que se definirán para realizar el login con Account Kit. El formulario agregado es al que se le asignaran los valores retornados al establecer parcialmente el login y posteriormente nos permitira consultar información por medio de la Graph API y así retornar la información del usuario y/o establecer la sesión.
5. Después de cerrar la etiqueta body, incluiremos el javascript que nos permitirá realizar el login con Account Kit y nos retornará la información necesaria para los pasos posteriores.
Inicialización de Account Kit:
Aquí defines todos los datos necesarios para inicializar Account Kit, se debe incluir el App ID, el state que es una cadena de seguridad que servirá para realizar comparaciones de coincidencia, la versión de Account Kit que actualmente es 1.0 y si en la pestaña Account Kit del dashboard de tu Facebook App tienes activada la opción Exigir clave secreta de la aplicación, también deberás incluir la clave secreta de la aplicación.

Creación de funciones para iniciar sesión ya sea por correo electrónico o por teléfono:
En ambas funciones se pueden definir valores por defecto, es decir, se puede definir un código de país y número de teléfono para el inicio de sesión con teléfono o definir un correo electrónico para el inicio de sesión con correo electrónico, esto mostrará en cada formulario el valor por defecto definido.

Realizar el inicio de sesión:
Esta función recibe la respuesta al realizar el inicio de sesión con cualquiera de las dos opciones y asigna los valores retornados a los campos en el formulario creado previamente, el cual realizará un envío mediante POST para realizar el inicio de sesión y luego mostrar la información del usuario.

6. Después del envío del formulario, en la parte superior de nuestro documento verificamos el envío del código de autorización desde POST, iniciamos la sesión y asignamos los valores capturados a variables en sesión. Con la sesión iniciada, consultaremos la Graph API para obtener el Access Token necesario para obtener la información del usuario; para ello necesitamos consultar mediante GET la URL https://graph.accountkit.com/v1.0/access_token?grant_type=authorization_code&code=&access_token=AA|facebook_app_id|app_secret donde el parámetro code es el código de autorización retornado y el access_token que lo conforman los caracteres AA, el App ID y la clave secreta Account Kit.

7. Luego con el Access Token retornado en la API consultada anteriormente, realizaremos una nueva consulta a la Graph API mediante GET a la URL https://graph.accountkit.com/v1.0/me/?access_token=access_token. Esta consulta nos devuelve como resultado la información de inicio de sesión del usuario, es decir, su ID y su correo electrónico o número de teléfono.

8. Finalmente, podemos incluir toda la demás lógica necesaria para ajustar la funcionalidad del proyecto a nuestras necesidades. Esto pude incluir el cierre de sesión, mostrar la información del usuario a partir de los datos retornados por la Graph API, etc.

Proyecto completo

Una vez terminado el último paso, el proyecto está completo y listo para probar. Espero esta guía sea de ayuda, cualquier pregunta pueden hacerla en los comentarios y si encuentran algún error o forma de mejorar el código sería de gran ayuda para la comunidad.

Pueden descargar todo el código fuente del proyecto funcional desde aquí.