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

# Se connecter avec X

export const Button = ({href, children}) => {
  return <div className="not-prose group">
    <a href={href}>
      <button className="flex items-center space-x-2.5 py-1 px-4 bg-primary-dark dark:bg-white text-white dark:text-gray-950 rounded-full group-hover:opacity-[0.9] font-medium">
        <span>
          {children}
        </span>
        <svg width="3" height="24" viewBox="0 -9 3 24" class="h-6 rotate-0 overflow-visible"><path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>
      </button>
    </a>
  </div>;
};

Utilisez Connexion avec X, également appelé Se connecter avec X, pour ajouter un bouton sur votre site ou votre application permettant aux utilisateurs de X de bénéficier des avantages d’un compte utilisateur enregistré en un clic ou presque. Cela fonctionne avec les sites web ainsi que les applications iOS, mobiles et de bureau.

<div id="features">
  ## Fonctionnalités
</div>

* Simplicité d’utilisation - Un nouveau visiteur de votre site n’a qu’à cliquer sur deux boutons pour se connecter pour la première fois.
* Intégration avec X - Le flux « Log in with X » peut accorder une autorisation pour utiliser les X API au nom de vos utilisateurs.
* Reposant sur OAuth - De nombreuses bibliothèques clientes et des exemples de code sont compatibles avec l’API « Log in with X ».

<div id="available-for">
  ## Disponible pour
</div>

* Navigateurs - Si vos utilisateurs peuvent accéder à un navigateur, vous pouvez intégrer Log in with X. En savoir plus sur le processus de connexion via navigateur.
* Appareils mobiles - Tout appareil mobile connecté à Internet peut tirer parti de Log in with X. En savoir plus sur le processus de connexion sur mobile.

<div id="implementing-log-in-with-x">
  ## Implémentation de « Log in with X »
</div>

Les implémentations sur navigateur et sur le Web mobile de Log in with X sont basées sur OAuth. Cette page présente les requêtes nécessaires pour obtenir un jeton d’accès pour le flux de connexion.

Pour utiliser le flux « Log in with X », veuillez vous rendre dans les [paramètres de votre App X](/fr/resources/fundamentals/developer-apps) et vérifier que l’option *« Allow this app to be used to Sign in with X?* » est activée.

Cette page part du principe que le lecteur sait comment signer des requêtes à l’aide du protocole OAuth 1.0a. Si vous souhaitez savoir comment signer une requête, lisez la page [Authorizing a request](/fr/resources/fundamentals/authentication/oauth-1-0a/authorizing-a-request).

Si vous souhaitez vérifier la signature des requêtes sur cette page, le secret client utilisé est : L8qq9PZyRg6ieKGEKhZolGC0vJWLw8iEJ88DRdyOg. Cette valeur est destinée aux tests et ne fonctionnera pas pour de vraies requêtes.

Les trois étapes pour implémenter Log in with X — obtention d’un jeton de requête, redirection d’un utilisateur, puis conversion d’un jeton de requête en jeton d’accès — sont décrites ci-dessous.

<Tabs>
  <Tab title="Étape 1">
    ### Étape 1 : Obtention d’un jeton de requête

    Pour démarrer un flux de connexion, votre [App X](/fr/resources/fundamentals/developer-apps) doit obtenir un jeton de requête en envoyant un message signé à [POST oauth/request\_token](/fr/resources/fundamentals/authentication/api-reference#post-oauth-request-token). Le seul paramètre spécifique dans cette requête est oauth\_callback, qui doit être cette URL encodée (URL-encoded) vers laquelle vous souhaitez que votre utilisateur soit redirigé lorsqu’il termine l’étape 2. Les autres paramètres sont ajoutés par le processus de signature OAuth.

    <Note>
      **Remarque :** Toute [URL de rappel](/fr/resources/fundamentals/developer-apps#callback-urls) que vous utilisez avec le point de terminaison [POST oauth/request\_token](/fr/resources/fundamentals/authentication/api-reference#post-oauth-request-token) devra être enregistrée dans les [paramètres de l’App X](/fr/resources/fundamentals/developer-apps) dans la [Console de développement](/fr/resources/fundamentals/developer-portal).
    </Note>

    <Frame>
      <img src="https://mintcdn.com/generaltranslation/H3uDfAMC0m_V_GWm/images/auth-4.png.twimg.1920.png?fit=max&auto=format&n=H3uDfAMC0m_V_GWm&q=85&s=540518cafc6b2f775cc2d3c70bca7fe9" alt="" width="1800" height="1000" data-path="images/auth-4.png.twimg.1920.png" />
    </Frame>

    **Exemple de requête (l’en-tête Authorization a été renvoyé à la ligne) :**

    ```
    POST /oauth/request_token HTTP/1.1
    User-Agent: themattharris' HTTP Client
    Host: api.x.com
    Accept: */*
    Authorization:
            OAuth oauth_callback="http%3A%2F%2Flocalhost%2Fsign-in-with-twitter%2F",
                  oauth_consumer_key="cChZNFj6T5R0TigYB9yd1w",
                  oauth_nonce="ea9ec8429b68d6b77cd5600adbbb0456",
                  oauth_signature="F1Li3tvehgcraF8DMJ7OyxO4w9Y%3D",
                  oauth_signature_method="HMAC-SHA1",
                  oauth_timestamp="1318467427",
                  oauth_version="1.0"
    ```

    Votre App doit examiner le code d’état HTTP de la réponse. Toute valeur autre que 200 indique un échec. Le corps de la réponse contient les paramètres oauth\_token, oauth\_token\_secret et oauth\_callback\_confirmed. Votre App doit vérifier que oauth\_callback\_confirmed est à true et stocker les deux autres valeurs pour les étapes suivantes.

    **Exemple de réponse (le corps de la réponse est présenté sur plusieurs lignes) :**

    ```
    HTTP/1.1 200 OK
    Date: Thu, 13 Oct 2011 00:57:06 GMT
    Status: 200 OK
    Content-Type: text/html; charset=utf-8
    Content-Length: 146
    Pragma: no-cache
    Expires: Tue, 31 Mar 1981 05:00:00 GMT
    Cache-Control: no-cache, no-store, must-revalidate, pre-check=0, post-check=0
    Vary: Accept-Encoding
    Server: tfe

    oauth_token=NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0&
    oauth_token_secret=veNRnAWe6inFuo8o2u8SLLZLjolYDmDP7SzL0YfYI&
    oauth_callback_confirmed=true

    ```
  </Tab>

  <Tab title="Étape 2">
    ### Étape 2 : rediriger l’utilisateur

    La prochaine étape consiste à rediriger l’utilisateur vers X afin qu’il puisse suivre le flux approprié jusqu’à son terme, comme décrit dans le flux de connexion via navigateur ci-dessous. Redirigez l’utilisateur vers [GET oauth/authenticate](/fr/resources/fundamentals/authentication/api-reference#get-oauth-authenticate), et le jeton de requête obtenu à l’étape 1 doit être transmis en tant que paramètre oauth\_token.

    La manière la plus transparente pour un site web de l’implémenter est d’émettre une redirection HTTP 302 en réponse à la requête de « connexion » d’origine. Les applications mobiles et de bureau doivent ouvrir une nouvelle fenêtre de navigateur ou accéder à l’URL via une vue web intégrée.

    **Exemple d’URL vers laquelle rediriger :**

    [https://api.x.com/oauth/authenticate?oauth\&#95;token=NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0](https://api.x.com/oauth/authenticate?oauth\&#95;token=NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0)

    Le point de terminaison de connexion se comportera de l’une des trois manières suivantes selon l’état de l’utilisateur :

    1. **Connecté et ayant déjà approuvé** : si l’utilisateur est connecté sur x.com et a déjà approuvé l’application appelante, il sera immédiatement authentifié et renvoyé à l’URL de rappel avec un jeton de requête OAuth valide. La redirection vers x.com passe alors inaperçue pour l’utilisateur.
    2. **Connecté mais n’ayant pas approuvé** : si l’utilisateur est connecté à x.com mais n’a pas approuvé l’application appelante, une demande de partage d’accès avec l’application appelante sera affichée. Après avoir accepté la demande d’autorisation, l’utilisateur sera redirigé vers l’URL de rappel avec un jeton de requête OAuth valide.
    3. **Non connecté** : si l’utilisateur n’est pas connecté sur x.com, il sera invité à saisir ses identifiants et à accorder à l’application l’accès à ses informations sur le même écran. Une fois connecté, l’utilisateur sera renvoyé à l’URL de rappel avec un jeton de requête OAuth valide.

    Après une authentification réussie, votre callback\_url recevra une requête contenant les paramètres oauth\_token et oauth\_verifier. Votre application doit vérifier que le jeton correspond au jeton de requête reçu à l’étape 1.

    **Requête issue de la redirection du client (paramètres de chaîne de requête encapsulés) :**

    ```
    GET /sign-in-with-twitter/?
            oauth_token=NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0&
            oauth_verifier=uw7NjWHT6OJ1MpJOXsHfNxoAhPKpgI8BlYDhxEjIBY HTTP/1.1
    Host: localhost
    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.5 (KHTML, like Gecko) Chrome/16.0.891.1 Safari/535.5
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Referer: http://localhost/sign-in-with-twitter/
    Accept-Encoding: gzip,deflate,sdch
    Accept-Language: en-US,en;q=0.8
    Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
    ```
  </Tab>

  <Tab title="Étape 3">
    ### Étape 3 : Conversion du jeton de requête en jeton d’accès

    Pour convertir le jeton de requête en un jeton d’accès exploitable, votre application doit envoyer une requête au point de terminaison [POST oauth/access\_token](/fr/resources/fundamentals/authentication/api-reference#post-oauth-access-token), contenant la valeur oauth\_verifier obtenue à l’étape 2. Le jeton de requête est également transmis dans la partie oauth\_token de l’en-tête, mais celui-ci aura été ajouté par le processus de signature.

    **Exemple de requête (en-tête Authorization renvoyé à la ligne) :**

    ```
    POST /oauth/access_token HTTP/1.1
    User-Agent: themattharris' HTTP Client
    Host: api.x.com
    Accept: */*
    Authorization: OAuth oauth_consumer_key="cChZNFj6T5R0TigYB9yd1w",
                          oauth_nonce="a9900fe68e2573b27a37f10fbad6a755",
                          oauth_signature="39cipBtIOHEEnybAR4sATQTpl2I%3D",
                          oauth_signature_method="HMAC-SHA1",
                          oauth_timestamp="1318467427",
                          oauth_token="NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0",
                          oauth_version="1.0"
    Content-Length: 57
    Content-Type: application/x-www-form-urlencoded

    oauth_verifier=uw7NjWHT6OJ1MpJOXsHfNxoAhPKpgI8BlYDhxEjIBY
    ```

    Une réponse réussie contient les paramètres oauth\_token et oauth\_token\_secret. Le token et son secret doivent être stockés et utilisés pour les futures requêtes authentifiées vers l’API X. Pour déterminer l’identité de l’utilisateur, utilisez [GET account/verify\_credentials](https://dev.x.com/rest/reference/get/account/verify_credentials).

    **Exemple de réponse (le corps de la réponse a été adapté pour la lisibilité) :**

    ```
    HTTP/1.1 200 OK
    Date: Thu, 13 Oct 2011 00:57:08 GMT
    Status: 200 OK
    Content-Type: text/html; charset=utf-8
    Content-Length: 157
    Pragma: no-cache
    Expires: Tue, 31 Mar 1981 05:00:00 GMT
    Cache-Control: no-cache, no-store, must-revalidate, pre-check=0, post-check=0
    Vary: Accept-Encoding
    Server: tfe

    oauth_token=7588892-kagSNqWge8gB1WwE3plnFsJHAZVfxWD7Vb57p0b4&
    oauth_token_secret=PbKfYqSryyeKDWz4ebtY3o5ogNLG11WJuZBc9fQrQo
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Ressources supplémentaires">
    ### Ressources pour « Se connecter avec X »

    #### Bibliothèques Client

    Les bibliothèques client répertoriées dans [X libraries](/fr/resources/tools-and-libraries) vous aideront à implémenter la fonctionnalité « Se connecter avec X ». Utilisez le endpoint `/oauth/authenticate`, comme décrit dans les étapes précédentes.

    #### Brand Toolkit

    X préfère que votre application utilise le [X Brand Toolkit](https://about.x.com/en/who-we-are/brand-toolkit) officiel pour une image de marque cohérente. Enregistrez ces ressources et utilisez‑les lorsque vous créez un bouton « Login with X ».
  </Tab>

  <Tab title="Flux de connexion via le navigateur">
    Le flux de connexion via le navigateur convient aux sites web et aux applications capables d’ouvrir ou d’intégrer un navigateur web. À un niveau très général :

    * L’application affiche un lien ou un bouton « Sign in with X ».
    * L’utilisateur clique sur le bouton de connexion.
    * Le navigateur web actuel est redirigé vers X (ou un nouveau navigateur est ouvert et dirigé vers X).
    * L’utilisateur effectue, si nécessaire, une étape de connexion et d’autorisation sur X.
    * X redirige vers une URL contrôlée par l’application, en transmettant les informations d’autorisation pour l’utilisateur.

    X conserve l’historique des autorisations, de sorte que pour les utilisateurs déjà connectés à X.com qui ont autorisé l’application, aucune interface n’est affichée ; ils sont automatiquement redirigés vers l’application.

    ### Flux sur ordinateur de bureau

    <Frame>
      <img src="https://mintcdn.com/generaltranslation/H3uDfAMC0m_V_GWm/images/browser_111.png?fit=max&auto=format&n=H3uDfAMC0m_V_GWm&q=85&s=86b6c63f77a21b720236777eddfcee02" alt="" width="1574" height="1216" data-path="images/browser_111.png" />
    </Frame>

    Pour illustrer ces flux, imaginons que le site web représenté ci‑dessus (« The greatest website ever created ») a implémenté cette API, comme l’indique le bouton « Sign in with X » sur la page d’accueil.

    Lorsque l’utilisateur clique sur le bouton « Sign in », la page qu’il voit dépend du fait qu’il soit connecté ou non et qu’il ait déjà autorisé ou non l’application à accéder à son compte.

    Lorsque l’utilisateur est connecté à x.com mais n’a pas accordé d’accès, une liste des autorisations demandées, accompagnée des boutons « Sign In » et « Cancel », est affichée.

    Lorsque l’utilisateur n’est pas connecté à x.com, des champs de saisie pour un nom d’utilisateur et un mot de passe sont affichés. Notez que même si l’utilisateur a déjà accordé l’accès à l’application, la liste des autorisations sera toujours affichée.

    <Frame>
      <img src="https://mintcdn.com/generaltranslation/H3uDfAMC0m_V_GWm/images/browser_2.png?fit=max&auto=format&n=H3uDfAMC0m_V_GWm&q=85&s=3784a27f4ccc7c62f94c39ccb583bede" alt="" width="1920" height="1329" data-path="images/browser_2.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/generaltranslation/H3uDfAMC0m_V_GWm/images/browser_3.png?fit=max&auto=format&n=H3uDfAMC0m_V_GWm&q=85&s=fd643531de9d99fb724fd41fd17f33d2" alt="" width="1826" height="1524" data-path="images/browser_3.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/generaltranslation/H3uDfAMC0m_V_GWm/images/browser_4.png?fit=max&auto=format&n=H3uDfAMC0m_V_GWm&q=85&s=27a149212de477b7f8c82ee84ee3d940" alt="" width="1828" height="1270" data-path="images/browser_4.png" />
    </Frame>

    Après que l’utilisateur a saisi des identifiants valides (si nécessaire) et cliqué sur « Sign In », X redirige l’utilisateur vers le site web qui a lancé le flux de connexion.

    Dans le cas où l’utilisateur est déjà connecté à x.com et a accordé l’accès au site web, cette redirection se produit immédiatement.
  </Tab>

  <Tab title="Flux de connexion sur mobile">
    Le flux d’interface utilisateur pour les navigateurs web mobiles fonctionne exactement comme le flux de connexion via le navigateur, mais il est optimisé pour les navigateurs mobiles.

    Ci‑dessous figurent des captures d’écran pour les écrans connecté, déconnecté et de redirection :

    <Frame>
      <img src="https://mintcdn.com/generaltranslation/H3uDfAMC0m_V_GWm/images/authorize-login-screenshot.png?fit=max&auto=format&n=H3uDfAMC0m_V_GWm&q=85&s=b76f195f8dc16c7992b611dc0b5af433" alt="" width="385" height="637" data-path="images/authorize-login-screenshot.png" />
    </Frame>

    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/generaltranslation/images/authorize-logged-in" alt="" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/generaltranslation/fpSTnohyg4nJot6s/images/redirect-application.png?fit=max&auto=format&n=fpSTnohyg4nJot6s&q=85&s=6e986019bf1ade8dbb8158854e0459af" alt="" width="386" height="611" data-path="images/redirect-application.png" />
    </Frame>
  </Tab>
</Tabs>