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

1. Créez un compte Auth0 et rendez-vous au Dashboard.

2. Allez à Dashboard > Applications et cliquez sur + Créer une application. Choisissez l’option Application monopage et allez à Paramètres. Notez ID Client et Domaine.

3. Ajoutez le paramètre URL de rappel dans URL de rappel autorisées et Origines autorisées (CORS). Faites-en votre URL de page de destination Unbounce. Par exemple http://unbouncepages.com/changeit.

4. Rendez-vous dans Dashboard > Authentification > Réseau social et activez les fournisseurs sociaux que vous souhaitez prendre en charge.

1. Create a new UI element, like a button, that will trigger the login with the provider. Note the UI element’s ID under Properties > Element Metadata.

2. Ajoutez un nouveau JavaScript à votre page d'accueil Unbounce, sélectionnez Before Body End Tag sous Placement et ajoutez ce code. Assurez-vous également de cocher la case jQuery en tant que dépendance.

<script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script>
<script type="application/javascript">
  var webAuth = new auth0.WebAuth({
    domain:       '{yourDomain}',
    clientID:     '{yourClientId}',
    audience: 'https://{yourClientId}/userinfo'
    redirectUri:  '{yourUnbouncePageUrl}', // e.g http://unbouncepages.com/changeit
    scope: 'openid profile email',
    responseType: 'token id_token',
  });
</script>

Vous devez utiliser l’identifiant client et le domaine de l’application que vous venez de configurer.

Ensuite, vous devez trouver un moyen de transmettre les informations provenant des fournisseurs sociaux à Unbounce :

1. Créer un formulaire et ajouter 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 clic pour chaque bouton afin de déclencher l'authentification via réseau social.

   1. Remplacez l'identifiant du bouton dont vous avez pris connaissance précédemment et le nom de connexion. Par exemple, pour Google, vous utiliserez google-oauth2 et pour LinkedIn, linkedin.

   2. Veillez à remplacer les identifiants correctement. Au lieu de #name et #email, vous devez mettre l’identifiant des champs du formulaire en question (vous pouvez les voir en éditant le formulaire, sous Field Name and ID).

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

// After authentication occurs, the parseHash method parses a URL hash fragment to extract the result of an Auth0 authentication response.

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); 
    }); 
  } 

});

Désormais, vous pourrez voir les informations fournies par le fournisseur d'identité dans la section Leads de votre panneau d'administration Unbounce, une fois que l'utilisateur aura soumis le formulaire.