Obtenir des renseignements sur l’utilisateur sur les pages de destination Unbounce

Comment obtenir des renseignements sur l’utilisateur grâce à l’authentification sociale en un clic sur les pages de destination Unbounce.

​

Auth0 Configuration

1. Créez un compte Auth0 et accédez au Dashboard.
2. Accédez à Dashboard > Applications, puis cliquez sur + Create Application. Sélectionnez l’option Single-Page Application, puis allez à Settings. Notez le Client ID et le Domain.
3. Ajoutez le callback URL dans Allowed Callback URLs et Allowed Origins (CORS). Utilisez l’URL de votre page Unbounce. Par exemple : http://unbouncepages.com/changeit.
4. Accédez à Dashboard > Authentication > Social et activez les fournisseurs d’identité sociale que vous souhaitez offrir.

​

Configuration d’Unbounce

1. Créez un nouvel élément d’interface, comme un bouton, qui déclenchera la connexion avec le fournisseur. Notez l’ID de l’élément sous Properties > Métadonnées de l’élément.
2. Ajoutez un nouveau script Javascript à votre page de destination Unbounce, sélectionnez Before Body End Tag sous Placement, puis ajoutez ce code. Assurez-vous également de cocher jQuery comme dépendance.

Utilisez le Client ID et le domaine de l’application que vous venez de configurer.

Ensuite, vous devez trouver un moyen de transmettre à Unbounce les renseignements provenant des fournisseurs d’identité sociale :

1. Créez un formulaire et ajoutez des Hidden fields pour chaque champ. Par exemple, les champs name et email.

2. Retournez dans l’éditeur JavaScript d’Unbounce.

3. Ajoutez un gestionnaire de clic à chaque bouton pour déclencher l’authentification sociale.

   1. Remplacez l’ID du bouton que vous avez noté précédemment ainsi que le nom de la connexion. Par exemple, pour Google, utilisez google-oauth2 et pour LinkedIn, linkedin.
   2. Assurez-vous de remplacer correctement les ID. Au lieu de #name et #email, indiquez l’ID des champs du formulaire concernés (vous pouvez les voir pendant la modification du formulaire, sous Field Name and ID).

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

// Une fois l'authentification effectuée, la méthode parseHash analyse un fragment de hachage d'URL pour extraire le résultat d'une réponse d'authentification 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); 
    }); 
  } 

});

Vous pourrez maintenant voir les informations fournies par le IdP dans la section Leads du panneau d’administration d’Unbounce, une fois que l’utilisateur a envoyé le formulaire.