Obtener información del usuario en páginas de destino de Unbounce

Cómo obtener información del usuario con autenticación social con un solo clic en las páginas de destino de Unbounce.

​

Configuración de Auth0

1. Crea una cuenta de Auth0 y ve al Dashboard.
2. Ve a Dashboard > Applications y haz clic en + Create Application. Selecciona la opción Single-Page Application y ve a Settings. Toma nota del ID de cliente y el dominio.
3. Agrega la URL de devolución de llamada tanto en Allowed Callback URLs como en Allowed Origins (CORS). Debe ser la URL de tu página de Unbounce. Por ejemplo: http://unbouncepages.com/changeit.
4. Ve a Dashboard > Authentication > Social y habilita los proveedores sociales que quieras admitir.

​

Configuración de Unbounce

1. Cree un nuevo elemento de la interfaz de usuario, como un botón, que active el inicio de sesión con el proveedor. Anote el ID del elemento de la interfaz de usuario en Properties > Element Metadata.
2. Agregue un nuevo JavaScript a su página de destino de Unbounce, seleccione Before Body End Tag en Placement y agregue este código. Asegúrese también de marcar jQuery como dependencia.

Debes usar el ID de cliente y el dominio de la aplicación que acabas de configurar.

A continuación, necesitas una forma de pasar a Unbounce la información procedente de los proveedores sociales:

1. Crea un formulario y añade campos ocultos para cada campo. Por ejemplo, los campos name y email.

2. Vuelve al editor de JavaScript de Unbounce.

3. Añade un controlador de clic para cada botón a fin de activar la autenticación social.

   1. Sustituye el ID del botón que anotaste anteriormente y el nombre de la conexión. Por ejemplo, para Google usarías google-oauth2 y, para LinkedIn, linkedin.
   2. Asegúrate de sustituir correctamente los ID. En lugar de #name y #email, debes introducir el ID de los campos del formulario correspondientes (puedes verlos mientras editas el formulario, en Field Name and ID).

$('#{buttonId}').bind('click', function() { 
  webAuth.authorize({
    connection: '{yourConnectionName}'
  });
});

// Después de que se produce la autenticación, el método parseHash analiza un fragmento hash de la URL para extraer el resultado de una respuesta de autenticación de Auth0.

webAuth.parseHash({ hash: window.location.hash }, function(err, authResult) { 
  if (err) { 
    return console.log(err); 
  }

  if (authResult != null && authResult.accessToken != null) {
    webAuth.client.userInfo(authResult.accessToken, function(err, user) {
      $('#name').val(user.name); 
      $('#email').val(user.email); 
    }); 
  } 

});

Ahora podrá ver la información proporcionada por el IdP en la sección Leads de su panel de administración de Unbounce una vez que el usuario envíe el formulario.