Iniciar sesión con X

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.

​

Características

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

​

Disponible para

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

​

Implementación de Iniciar sesión con X

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

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.

Paso 1

​

Paso 1: Obtener un token de solicitud

Para iniciar un flujo de inicio de sesión, tu App de X debe obtener un token de solicitud enviando un mensaje firmado a 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.

Nota: Cualquier URL de callback que utilices con el endpoint POST oauth/request_token deberá registrarse dentro de la configuración de la App de X en la Consola de desarrollador.

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

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

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

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

Recursos adicionales

​

Recursos de inicio de sesión con X

​

Bibliotecas de cliente

Las bibliotecas de cliente enumeradas en X 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 oficial para mantener una marca coherente. Guarda estos recursos y úsalos al crear un botón «Login with X».

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

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.

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.

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: