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

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

​

Configuration d’Auth0

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

​

Configuration d’Unbounce

1. Créez un nouvel élément d’interface utilisateur, comme un bouton, qui déclenchera la connexion avec le fournisseur. Notez l’ID de cet élément dans Properties > Element Metadata.
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 sélectionner jQuery comme dépendance.

Vous devez utiliser le ID client et le Domaine de l’application que vous venez de configurer.

Ensuite, vous avez besoin d’un moyen de transmettre à Unbounce les informations provenant des fournisseurs sociaux :

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

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

3. Ajoutez un gestionnaire de clics pour chaque bouton afin de 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 en question (vous pouvez les voir lorsque vous modifiez le 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 de votre interface d’administration Unbounce, une fois le formulaire envoyé par l’utilisateur.