> ## Documentation Index
> Fetch the complete documentation index at: https://auth0-update-anonymous-sessons-ea.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

# Obtenir des renseignements sur l’utilisateur sur les pages de destination 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) + "*****MASQUÉ*****";
          }
          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>;
};

<h2 id="auth0-configuration">
  Auth0 Configuration
</h2>

1. Créez un compte Auth0 et accédez au [Dashboard](https://manage.auth0.com/#).
2. Accédez à [Dashboard > Applications](https://manage.auth0.com/#/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](https://manage.auth0.com/#/connections/social) et activez les fournisseurs d’identité sociale que vous souhaitez offrir.

<h2 id="unbounce-configuration">
  Configuration d’Unbounce
</h2>

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.

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}', // p. ex. http://unbouncepages.com/changeit
    scope: 'openid profile email',
    responseType: 'token id_token',
  });
</script>`;

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

Utilisez le <Tooltip tip="Client ID : valeur d’identification attribuée à votre ressource enregistrée par Auth0." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Client+ID">Client ID</Tooltip> 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](/docs/fr-ca/authenticate/identity-providers/locate-the-connection-id). 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`).

```js lines theme={null}
$('#{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 <Tooltip tip="Identity Provider (IdP) : service qui stocke et gère les identités numériques." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=IdP">IdP</Tooltip> dans la section `Leads` du panneau d’administration d’Unbounce, une fois que l’utilisateur a envoyé le formulaire.