> ## 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.

# Iniciar sesión con 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>;
};

Usa Log in with X, también conocido como Sign in with X, para añadir un botón en tu sitio o aplicación que permita a los usuarios de X disfrutar de las ventajas de una cuenta de usuario registrada con tan solo un clic. Esto funciona en sitios web, en iOS y en aplicaciones móviles y de escritorio.

<div id="features">
  ## Características
</div>

* Facilidad de uso: un nuevo visitante de tu sitio solo tiene que hacer clic en dos botones para iniciar sesión por primera vez.
* Integración con X: el flujo de Log in with X puede otorgar autorización para usar las X API en nombre de tus usuarios.
* Basado en OAuth: una gran variedad de bibliotecas cliente y código de ejemplo son compatibles con la Log in with X API.

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

* Navegadores: si tus usuarios pueden acceder a un navegador, puedes integrar Log in with X. Más información sobre el flujo de inicio de sesión en el navegador.
* Dispositivos móviles: cualquier dispositivo móvil con conexión a Internet puede aprovechar Log in with X. Más información sobre el flujo de inicio de sesión en dispositivos móviles.

<div id="implementing-log-in-with-x">
  ## Implementación de Iniciar sesión con X
</div>

Las implementaciones en navegador y web móvil de Iniciar sesión con X se basan en OAuth. Esta página muestra las solicitudes necesarias para obtener un token de acceso para el flujo de inicio de sesión.

Para usar el flujo de “Iniciar sesión con X", ve a la configuración de tu [App de X](/es/resources/fundamentals/developer-apps) y asegúrate de que la opción *"Allow this app to be used to Sign in with X?*” esté habilitada.

Esta página asume que el lector sabe cómo firmar solicitudes usando el protocolo OAuth 1.0a. Si quieres saber cómo firmar una solicitud, lee la página [Authorizing a request](/es/resources/fundamentals/authentication/oauth-1-0a/authorizing-a-request).

Si quieres comprobar la firma de las solicitudes de esta página, el `consumer secret` utilizado es: L8qq9PZyRg6ieKGEKhZolGC0vJWLw8iEJ88DRdyOg. Este valor es solo para pruebas y no funcionará para solicitudes reales.

A continuación se describen los tres pasos para implementar Iniciar sesión con X mediante la obtención de un token de solicitud, la redirección de un usuario y la conversión de un token de solicitud en un token de acceso.

<Tabs>
  <Tab title="Paso 1">
    ### Paso 1: Obtener un token de solicitud

    Para iniciar un flujo de inicio de sesión, tu [App de X](/es/resources/fundamentals/developer-apps) debe obtener un token de solicitud enviando un mensaje firmado a [POST oauth/request\_token](/es/resources/fundamentals/authentication/api-reference#post-oauth-request-token). El único parámetro específico en esta solicitud es oauth\_callback, que debe ser una versión codificada para URL de la URL a la que deseas que se redirija a tu usuario cuando complete el paso 2. Los parámetros restantes se añaden mediante el proceso de firma de OAuth.

    <Note>
      **Nota:** Cualquier [URL de callback](/es/resources/fundamentals/developer-apps#callback-urls) que utilices con el endpoint [POST oauth/request\_token](/es/resources/fundamentals/authentication/api-reference#post-oauth-request-token) deberá registrarse dentro de la [configuración de la App de X](/es/resources/fundamentals/developer-apps) en la [Consola de desarrollador](/es/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>

    **Ejemplo de solicitud (el encabezado Authorization ha sido dividido en varias líneas):**

    ```
    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"
    ```

    Tu aplicación debe examinar el estado HTTP de la respuesta. Cualquier valor distinto de 200 indica un error. El cuerpo de la respuesta contendrá los parámetros oauth\_token, oauth\_token\_secret y oauth\_callback\_confirmed. Tu aplicación debe verificar que oauth\_callback\_confirmed sea true y almacenar los otros dos valores para los siguientes pasos.

    **Ejemplo de respuesta (se ha ajustado el cuerpo de la respuesta para mayor claridad):**

    ```
    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="Paso 2">
    ### Paso 2: Redirigir al usuario

    El siguiente paso es dirigir al usuario a X para que pueda completar el flujo correspondiente, como se describe en el apartado Browser sign-in flow más abajo. Dirige al usuario a [GET oauth/authenticate](/es/resources/fundamentals/authentication/api-reference#get-oauth-authenticate), y el token de solicitud obtenido en el paso 1 debe pasarse como parámetro oauth\_token.

    La forma más sencilla para que un sitio web implemente esto sería emitir una redirección HTTP 302 como respuesta a la solicitud original de “sign in”. Las apps móviles y de escritorio deberían abrir una nueva ventana del navegador o dirigir a la URL mediante una vista web incrustada.

    **Ejemplo de URL a la que redirigir:**

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

    El endpoint de inicio de sesión se comportará de una de tres maneras según el estado del usuario:

    1. **Con sesión iniciada y con aprobación**: Si el usuario ha iniciado sesión en x.com y ya ha aprobado la aplicación que realiza la llamada, se autenticará de inmediato y se lo devolverá a la URL de callback con un token de solicitud OAuth válido. La redirección a x.com no es evidente para el usuario.
    2. **Con sesión iniciada pero sin aprobación**: Si el usuario ha iniciado sesión en x.com pero no ha aprobado la aplicación que realiza la llamada, se mostrará una solicitud para compartir el acceso con dicha aplicación. Después de aceptar la solicitud de autorización, el usuario será redirigido a la URL de callback con un token de solicitud OAuth válido.
    3. **Sin sesión iniciada**: Si el usuario no ha iniciado sesión en x.com, se le pedirá que introduzca sus credenciales y conceda acceso a la aplicación para que acceda a su información en la misma pantalla. Una vez iniciada la sesión, el usuario será devuelto a la URL de callback con un token de solicitud OAuth válido.

    Tras una autenticación correcta, tu callback\_url recibirá una solicitud que contiene los parámetros oauth\_token y oauth\_verifier. Tu aplicación debe verificar que el token coincide con el token de solicitud recibido en el paso 1.

    **Solicitud desde el redireccionamiento del cliente (parámetros de la query string envueltos):**

    ```
    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="Paso 3">
    ### Paso 3: Convertir el request token en un access token

    Para convertir el request token en un access token utilizable, tu aplicación debe realizar una solicitud al endpoint [POST oauth/access\_token](/es/resources/fundamentals/authentication/api-reference#post-oauth-access-token), que incluya el valor oauth\_verifier obtenido en el paso 2. El request token también se envía en la parte oauth\_token del encabezado, pero esto se habrá añadido mediante el proceso de firma.

    **Ejemplo de solicitud (encabezado Authorization envuelto):**

    ```
    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
    ```

    Una respuesta correcta contiene los parámetros oauth\_token y oauth\_token\_secret. El token y el secreto del token deben almacenarse y utilizarse para futuras solicitudes autenticadas a la X API. Para determinar la identidad del usuario, usa [GET account/verify\_credentials](https://dev.x.com/rest/reference/get/account/verify_credentials).

    **Respuesta de ejemplo (el cuerpo de la respuesta se ha ajustado):**

    ```
    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="Recursos adicionales">
    ### Recursos de inicio de sesión con X

    #### Bibliotecas de cliente

    Las bibliotecas de cliente enumeradas en [X libraries](/es/resources/tools-and-libraries) ayudarán a implementar inicio de sesión con X. Usa el endpoint /oauth/authenticate, como se describió en los pasos anteriores.

    #### Brand Toolkit

    X prefiere que tu aplicación use el [X Brand Toolkit](https://about.x.com/en/who-we-are/brand-toolkit) oficial para mantener una marca coherente. Guarda estos recursos y úsalos al crear un botón «Login with X».
  </Tab>

  <Tab title="Flujo de inicio de sesión en el navegador">
    El flujo de inicio de sesión en el navegador es adecuado para sitios web y aplicaciones que pueden abrir o incrustar un navegador web. A grandes rasgos:

    * La aplicación muestra un enlace o botón «Iniciar sesión con X».
    * El usuario hace clic en el botón de inicio de sesión.
    * El navegador web actual se redirige a X (o se abre un nuevo navegador y se dirige a X).
    * El usuario completa un paso de inicio de sesión y autorización en X si es necesario.
    * X redirige de vuelta a una URL bajo el control de la aplicación, pasando información de autorización para el usuario.

    X realiza un seguimiento de las autorizaciones, por lo que, para los usuarios que ya iniciaron sesión en X.com y han autorizado la aplicación, no se muestra ninguna interfaz de usuario; en su lugar, se les redirige automáticamente de vuelta a la aplicación.

    ### Flujo en escritorio

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

    Para demostrar los flujos, supongamos que el sitio web que aparece arriba («The greatest website ever created») ha implementado esta API, como lo indica el botón Iniciar sesión con X en la página de inicio.

    Cuando el usuario hace clic en el botón de inicio de sesión, la página que ve depende de si ha iniciado sesión y de si ha permitido previamente que la aplicación acceda a su cuenta.

    Cuando el usuario ha iniciado sesión en x.com pero no ha concedido acceso, se muestra una lista de permisos solicitados, junto con los botones Iniciar sesión y Cancelar.

    Cuando el usuario no ha iniciado sesión en x.com, se mostrarán campos de entrada para un nombre de usuario y una contraseña. Ten en cuenta que, incluso si el usuario ya concedió acceso a la aplicación, la lista de permisos seguirá mostrándose.

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

    Después de que el usuario introduzca credenciales válidas (si es necesario) y haga clic en «Iniciar sesión», X redirigirá al usuario al sitio web que inició el flujo de inicio de sesión.

    En el caso de que el usuario ya haya iniciado sesión en x.com y haya concedido acceso al sitio web, esta redirección ocurre de inmediato.
  </Tab>

  <Tab title="Flujo de inicio de sesión en dispositivos móviles">
    El flujo de la interfaz de usuario para navegadores web móviles funciona exactamente igual que el flujo de inicio de sesión en el navegador, pero está optimizado para navegadores móviles.

    A continuación se muestran capturas de pantalla de las pantallas de sesión iniciada, sesión cerrada y redirección:

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