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

> Découvrez comment ajouter la connexion avec Facebook à votre application native.

# Ajouter Facebook Login aux applications natives

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

Vous pouvez ajouter des fonctionnalités à votre application native afin de permettre à vos utilisateurs de s’authentifier avec Facebook de façon native, directement dans l’application. Cela ne nécessite aucune redirection par navigateur Web et permet aux applications mobiles de respecter la [Politique pour les développeurs Facebook](https://developers.facebook.com/policy/), qui exige que les applications mobiles utilisent le SDK Facebook pour [Android](https://developers.facebook.com/docs/android) ou [iOS](https://developers.facebook.com/docs/ios) pour s’authentifier.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Lors de l’intégration aux SDK Facebook, vos applications partageront des données avec Facebook. Assurez-vous de bien comprendre quelles données sont partagées et d’en faire correctement état dans la politique de confidentialité de votre application. Auth0 n’exerce aucun contrôle sur les données qui seront partagées avec Facebook au moyen du SDK.

  Consultez la page [Facebook GDPR](https://www.facebook.com/business/m/one-sheeters/gdpr-developer-faqs) pour en savoir plus sur les données recueillies par le SDK Facebook et Facebook Login.
</Callout>

<div id="how-it-works">
  ## Comment ça fonctionne
</div>

Le flux Native Facebook login fonctionne comme suit :

* **Étape 1** : L’application authentifie un utilisateur au moyen du Facebook SDK et obtient un <Tooltip tip="Jeton d’accès : justificatif d’autorisation, sous la forme d’une chaîne opaque ou d’un JWT, utilisé pour accéder à une API." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Access+Token">Jeton d’accès</Tooltip>.
* **Étape 2** : L’application utilise ensuite ce jeton d’accès pour demander un [Facebook Session Info Access Token](https://developers.facebook.com/docs/facebook-login/access-tokens/session-info-access-token) spécial.
* **Étape 3** : Utilisez le Facebook SDK pour récupérer le profil de l’utilisateur.
* **Étape 4** : L’application peut ensuite utiliser le jeton Facebook Session Info pour s’authentifier auprès d’Auth0.

<div id="prerequisites">
  ## Prérequis
</div>

Avant de configurer Native Facebook login pour votre application native avec Auth0, vous devez :

1. [Configurer Facebook comme connexion Auth0](https://marketplace.auth0.com/integrations/facebook-social-connection)
2. [Utiliser le Facebook SDK approprié dans votre application](https://developers.facebook.com/docs/apis-and-sdks/)
3. Accédez à [Auth0 Dashboard > Applications > Applications](https://manage.auth0.com/#/applications), puis créez une application dans Auth0 (si ce n’est pas déjà fait).
4. Au bas de la page Settings, sélectionnez **Show Advanced Settings**, puis la vue **Device Settings**. Sous **Native Social Login**, activez la bascule **Enable Sign In with Facebook**.

   <Frame>
     <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/5p2RaaeAtZyJzcoCfkF4tW/7326854f031e9c0a70f6b19de9cf9030/Native_Social_Login_-_English.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=04ac5de7d54286604b5961cc24fda2dd" alt="Paramètres de Native Social Login" width="1102" height="494" data-path="docs/images/cdy7uua7fh8z/5p2RaaeAtZyJzcoCfkF4tW/7326854f031e9c0a70f6b19de9cf9030/Native_Social_Login_-_English.png" />
   </Frame>

<div id="implementation">
  ## Mise en œuvre
</div>

Du point de vue de votre application, l’authentification d’un profil utilisateur à l’aide de Native Facebook login se déroule en quatre étapes :

<div id="step-1">
  ### Étape 1
</div>

L’application authentifie un utilisateur au moyen du Facebook SDK. Elle obtiendra un jeton d’accès auprès de Facebook.

<div id="step-2">
  ## Étape 2
</div>

L’application utilise le jeton d’accès pour demander un [Facebook Session Info Access Token](https://developers.facebook.com/docs/facebook-login/access-tokens/session-info-access-token).

Cette requête ressemblera à ceci :

```json wrap lines theme={null}
GET https://graph.facebook.com/v5.0/oauth/access_token?grant_type=fb_attenuate_token&client_id=457704041391802&fb_exchange_token=<facebook_access_token>
```

et la réponse :

```json lines theme={null}
{
    "access_token": "XAAGgR4b...1lHWNCpqrAhcpoAZDZD",
    "token_type": "bearer",
    "expires_in": 5183924
}
```

<div id="step-3">
  ### Étape 3
</div>

L’application doit récupérer le profil utilisateur à partir de Facebook à l’aide du Facebook SDK, ce qui aboutira à une requête semblable à celle-ci :

```json wrap lines theme={null}
GET https://graph.facebook.com/v5.0/<facebook user id>?access_token=<facebook access token>&fields=email,name
```

<div id="step-4">
  ### Étape 4
</div>

L’application peut ensuite utiliser le jeton d’accès associé aux informations de session et le profil Facebook de l’utilisateur pour s’authentifier auprès d’Auth0 en envoyant une requête au point de terminaison `/oauth/token` d’Auth0 dans le flux Token Exchange avec le type de jeton `facebook-session-access-token`. Si tout se passe bien, Auth0 renverra une réponse d’échange normale, avec en plus le profil utilisateur. Le profil utilisateur doit être un objet JSON encodé sous forme de chaîne.

export const codeExample = `POST https://{yourDomain}/oauth/token

grant_type: 'urn:ietf:params:oauth:grant-type:token-exchange'
subject_token_type: 'http://auth0.com/oauth/token-type/facebook-info-session-access-token'
audience: 'your-api'
scope: 'read:appointments openid profile email email_verified'
subject_token: 'XAAGgR4b...1lHWNCpqrUHZAEtUuZAhcpoAZDZD'
client_id: '{yourClientId}'
user_profile: '{"email":"john@example.com", "name":"John Doe"}'`;

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

et la réponse d’Auth0 :

```json lines theme={null}
{
    "access_token": "eyJ0eXA..yXQaPLVXg",
    "id_token": "eyJ0.tFE5HPipdOsA",
    "scope": "openid profile email read:appointments",
    "expires_in": 86400,
    "token_type": "Bearer"
}
```

<div id="user-profile-and-email-validation">
  ## Profil utilisateur et validation de l’adresse courriel
</div>

Dans l’exemple précédent, vous deviez récupérer le profil utilisateur à partir de Facebook et l’inclure dans la requête envoyée à `/oauth/token`. Cela s’explique par le fait que le jeton d’accès de session Facebook ne peut pas être utilisé pour récupérer directement le profil, et que le jeton d’accès Facebook ne peut pas être envoyé directement au serveur en raison des [Apple's AppStore Review Guidelines](https://developer.apple.com/app-store/review/guidelines). Il doit donc être récupéré côté client et envoyé à Auth0 de cette manière.

Comme Auth0 ne peut pas garantir que le profil utilisateur est bien celui renvoyé par Facebook, il définira le champ `email_verified` à `false`.

<div id="logout">
  ## Logout
</div>

Comme la mise en œuvre de la connexion native n’utilise pas les flux standards dans le navigateur, les propriétaires d’application doivent aussi veiller à effectuer la déconnexion correctement. Lorsqu’une application doit effectuer une déconnexion, elle devrait aussi [révoquer le jeton d’actualisation Auth0](https://auth0.com/docs/api/authentication#revoke-refresh-token).

<div id="keep-reading">
  ## Pour aller plus loin
</div>

* [Facebook Login natif avec iOS Swift](/docs/fr-ca/quickstart/native/ios-swift-facebook-login)
* [Facebook Login natif avec Android](/docs/fr-ca/quickstart/native/android-facebook-login)
* [Limites de débit pour les connexions sociales natives](/docs/fr-ca/troubleshoot/customer-support/operational-policies/rate-limit-policy)