> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Comment obtenir des informations de l’utilisateur avec l’authentificationvia réseau social en un clic sur les pages d'accueil Unbounce.

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASKED*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

## Configuration Auth0

1. Créez un compte Auth0 et rendez-vous au [Dashboard](https://manage.auth0.com/#).
2. Allez à [Dashboard > Applications](https://manage.auth0.com/#/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](https://manage.auth0.com/#/connections/social) et activez les fournisseurs sociaux que vous souhaitez prendre en charge.

## Configuration Unbounce

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.

export const codeExample = `<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>`;

<AuthCodeBlock children={codeExample} language="html" />

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](/docs/fr-ca/authenticate/identity-providers/locate-the-connection-id). 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`).

```javascript lines theme={null}
$('#{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.