Cómo crear un app de inicio de sesión con la API de Facebook para conectar Thrive Suite

Veremos en detalle la App login de Facebook, se trata de una aplicación que simplifica la vida de los usuarios al permitirles iniciar sesión, registrarse o dejar comentarios en diferentes sitios web que dispongan de esta característica sin necesidad de llenar formularios con todos sus datos personales nuevamente por que ya están en Facebook y pueden reutilizarse.

En el caso específico de Thrive Suite hay dos complementos en concreto que disponen de esta integración con la API de Facebook y se trata de Thrive Comments y Thrive Ovation.

Cuando utilizas Thrive Comments si tus visitantes inicien sesión en su perfil de Facebook también podrán hacerlo en tu sitio web para dejar un comentario sin necesidad de crear una cuenta nuevamente.

También si tienes la API de Facebook configurada en Thrive Ovation tus visitantes, podrán iniciar sesión en su perfil de Facebook y cargar su imagen en un formulario para dejar un testimonio entre otras cosas. Sin más preámbulos veremos a continuación todo el proceso de configuración paso a paso. ¡Manos a la obra!

Una vez que tu sitio tenga un Certificado SSL para que tus URL empiecen con "HTTPS", deberás obtener una ID de aplicación de Facebook para poder utilizar la API y lo veremos a continuación paso a paso. ¡Manos a la obra!

Crear una nueva App login en Facebook

Inicia sesión en tu cuenta de Facebook y dirígete a la página de desarrolladores de Facebook. Debajo del botón "Mis aplicaciones" de la barra de navegación, verás un botón "Crear aplicación" haz clic en él.

En la siguiente pantalla de todas las opciones disponibles debes elegir la primera "Empresa" como puedes ver en la siguiente captura.

A continuación, verás una nueva pantalla donde se te pedirá que ingreses un nombre para tu aplicación, tu correo electrónico de contacto y el propósito para crear esta aplicación, completa todo como se ve en la siguiente captura:

Agregar un producto para App login

El siguiente paso es agregar un producto de los tantos que tiene Facebook disponibles. Aquí tendrás que seleccionar un producto de la lista, que para el caso de este tutorial debes elegir Inicio de sesión con Facebook.

Como se muestra en la imagen superior, debes hacer clic en el botón Configurar del producto Inicio de sesión de Facebook.

Elegir una plataforma para tu producto App login

Aquí, debes elegir la plataforma en la que quieres utilizar el producto de Inicio de sesión con Facebook. En este caso, deberás elegir Web.

Ahora, debes ingresar la URL de tu sitio web en el que quieres utilizar la aplicación y hacer clic en el botón Save (guardar) y luego en el botón Continuar. como se muestra en la imagen inferior.

Los siguientes pasos de este asistente que son cinco en total puedes omitirlos ya que no son necesarios para integrar la aplicación con los plugin de Thrive Suite.

Igualmente debes continuar con la configuración de la integración Inicio de sesión con Facebook siguiendo los próximos pasos.

Deshabilitar el "Modo estricto para redireccionar URI" de App login

Facebook tiene el "Modo estricto" activado de forma predeterminada y no hay ninguna opción para desactivarlo, por lo que tendrás que crear el URI de redireccionamiento de OAuth exacto para continuar con el proceso de forma exitosa.

La URL de redireccionamiento de OAuth es un enlace, una URL a la que se enviará al visitante después de que inicie sesión (siempre y cuando la autorización de la cuenta se haya realizado correctamente).

Esto puede parecer un poco complicado, pero sigue todos los pasos a continuación y verás que es mucho más fácil de lo que parece.

Construir URL de redireccionamiento para app login

La URL de redireccionamiento tiene tres partes:

Antes de copiar las claves que se necesitan para terminar la configuración debes completar el campo "Dominios de la aplicación" con tu dominio y el campo "URL de política de privacidad" con una URL de la Política de privacidad de tu sitio web como se puede apreciar en la siguiente captura:

Luego, debes hacer clic en el botón "Guardar cambios" que se encuentra en la parte inferior derecha de la página.

Estos deben completarse porque más adelante tendrás que cambiar el estado de tu aplicación y eso no se puede hacer sin estos campos completados previamente.

Ahora puedes copiar en el bloc de notas "ID de la aplicación" y el "ID secreto de la aplicación" desde la parte superior de las opciones como puedes verlo claramente en la siguiente captura porque los utilizaremos más adelante.

Debes tener en cuenta que cuando hagas clic en "Mostrar" en la sección "Clave secreta de la aplicación" debes volver a introducir tu contraseña.

Después de haber copiado los ID de aquí, completa el enlace con ellos. La tercera parte debería verse así:

&app_id=Your Facebook APP ID&app_secret=Your Facebook Secret ID

Pega la ID de la aplicación y la ID secreta en lugar de los dos marcadores de posición del ejemplo (tu ID de la aplicación de Facebook, tu ID de la clave secreta de Facebook)

Aquí tienes una muestra de cómo se vería una URL compuesta correctamente:

https://www.tusitio.com/wp-admin/admin.php?page=tve_dash_api_connect&api=facebook&app_id=YourFacebookAppID&app_secret=YourFacebookSecretID

Aquí está el ejemplo de cómo se vería la URL con las partes necesarias reemplazadas:

https://www.tusitio.com/wp-admin/admin.php?page=tve_dash_api_connect&api=facebook&app_id=111111111&app_secret=11aaa111aaa11aaa

Asegúrate de guardar todo antes de salir de la página.

Una vez que tengas la URL tendrás que ir a la barra lateral izquierda y en la sección de “Productos”, donde encontrarás el producto que has agregado, Inicio de sesión con Facebook. Haz clic en él y luego elige "Configuración".

Ahora, escribe la URL, compuesta por las tres partes detalladas anteriormente, en la sección "URI de redireccionamiento de OAuth válidos".

Pero antes tendrás que cambiar el permiso "public_profile" (perfil público) para poder utilizar el inicio de sesión con Facebook haciendo clic en Get Advanced Access (Obtener acceso avanzado) para pasar a la sección de permisos y funciones.

Una vez aquí haz clic en Filtrar niveles de acceso en el menú desplegable elige Mostrar todo como se ve en las siguientes capturas.

Cuando tengas desplegada la lista de todos los permisos disponibles, debes desplazarte hasta el permiso "public_profile" y hacer clic el botón que esta a la derecha que dice Obtener acceso avanzado como puedes apreciar en la siguiente captura.

Ahora debes confirmar el uso del permiso public_profile, si estas de acuerdo con los términos debes hacer clic en la casilla de verificación y luego clic en el botón Confirmar.

Ahora si seguimos donde estábamos antes en la configuración de inicio de sesión con Facebook para terminar de ingresar los datos que faltan.

Escribe la URL compuesta por las tres partes detalladas anteriormente en la sección "URI de redireccionamiento de OAuth válidos". ¿Te acuerdas?

Es importante que hagas clic en "Guardar cambios" después de agregar la URL en el campo "URI de redireccionamiento de OAuth válidas".

Validador de URI de redireccionamiento

En el siguiente paso, deberás verificar si la URL que has construido es válida. Para hacer esto, primero tendrás que completar la sección "Validador de URI de redireccionamiento" con la URL respectiva que has creado y luego tendrás que verificarla.

Desplázate hacia abajo hasta que veas la sección "Validador de URI de redireccionamiento" y completa el campo "URI de redireccionamiento para verificar" con la URL que construimos en este tutorial (pero con los datos de tu sitio web, no lo olvides):

Cuando hayas verificado la validez de la URL, guarda los cambios nuevamente haciendo clic en el botón Guardar cambios en la parte inferior de la página.

Deberás seguir todos estos pasos para que la URL se valide correctamente, de lo contrario no podrás utilizar el Inicio de sesión con Facebook para integrarlo con los productos de Thrive Suite.

Todo lo que queda por hacer es establecer la conexión con tu página dentro de Thrive Dashboard y API Connections.

Copiar las claves de la API de Facebook para App login

Para crear la conexión deberás utilizar las dos claves API (ID de aplicación e ID secreto) que has copiado y utilizado previamente para crear la URL de redireccionamiento.

Si no los tienes apuntados en el bloc de notas puedes copiarlos nuevamente volviendo a la parte de "Configuración" de las opciones de la barra lateral y luego, al menú desplegable "Básico". Busca las claves en los campos "Identificador de la aplicación" y "Clave secreta de la aplicación".

Debes tener las claves API listas porque tendrás que pegarlas en tu sitio web, en el área de API Connections (Conexiones API), desde el Thrive Dashboard.

Integración de tu aplicación con Thrive Suite

Ahora para integrar la app de Facebook con Thrive Suite debes dirigirte al panel de administración de WordPress de tu sitio web y acceder al "Thrive Dashboard" como se ve en la siguiente captura.

Estando en el "Thrive Dashboard", desplázate hacia abajo hasta que encuentres la caja que dice "API Connections" (Conexiones API) y luego debes hacer clic en "Manage Connections" (Administrar conexiones).

Ahora tienes que agregar una nueva conexión seleccionando una aplicación en el menú desplegable. En nuestro caso, debes buscar la opción "Facebook".

Una vez que hayas seleccionado la opción "Facebook", debes pegar el "Identificador de la aplicación" y el "Clave secreta de la aplicación" en los campos que aparecerán.

Una vez tengas completados los dos campos, debes hacer clic en "Connect" (Conectar). Puede que se abra una ventana emergente indicando la información que utilizará esta aplicación, si es así debes hacer clic en continuar.

Si todo salió bien, verás una notificación dentro del panel de las API indicando que tu conexión con Facebook está lista para ser utilizada.

Eso es todo. ¡Enhorabuena! Ya puedes utilizar el inicio de sesión con Facebook dentro de Thrive Suite.