Sign In con la API de Twitter

Seguramente en vuestro navegar diario por la red de redes os habréis encontrado con este botón, el cual nos permite hacer Sign In con la API de Twitter:

Sobre todo si habéis navegado por sitios relacionados con Twitter, analizadores de hashtags, estadísticas, etc. Todos estos sitios que comento son aplicaciones de Twitter que usan la información ofrecida por la plataforma para presentarla al usuario de una forma u otra dependiendo de lo que se quiera ofrecer.

En el post anterior, también sobre Twitter lo que hicimos fue un ejemplo de como configurar una aplicación para un usuario. Lo que vamos a hacer hoy es crear una aplicación que permita hacer login con Twitter a cualquier usuario y nos muestre algo de información relevante. No va a ser nada complicado pues lo ideal es empezar con ejemplos sencillos y a partir de ahí comernos el mundo 😉

De nuevo os remito al post anterior pues vamos a usar la librería que descargamos allí y los pasos para crear una aplicación en Twitter, salvo que esta vez vamos a hacer una pequeña variación.

• Librería twitteroauth.
• Página de desarrolladores de Twitter.

Creando la aplicación en Twitter

Siguiendo los pasos que ya se explicaron creamos una nueva aplicación en Twitter pero no vamos a generar el token de acceso de momento, además vamos a configurarla para que permita hacer Sign In y en lugar de hacerla Read Only vamos a hacerla Read and Write, esto lo podemos hacer en la pestaña de Configuration de la aplicación.

Entendiendo el flujo del Sign In con la API de Twitter

Lo tenemos bastante bien explicado en su documentación, eso sí, en inglés y algo técnico, voy a aprovechar sus imágenes para explicarlo de manera que sea más sencillo de entender y con, creo, un lenguaje algo más llano.

Fase 1: 

1. El usuario quiere hacer Sign In con la API de Twitter.
2. Se hace una petición a Twitter para que nos de el oauth_token y el oauth_token_secret, en la petición tenemos que decirle cual es la URL de callback que es la URL a la cual se redirigirá cuando se complete la fase 2.
3. Twitter devuelve el estado 200 si todo ha ido bien y además el oauth_token, el oauth_token_secret y verifica si la URL de callback existe.

Fase 2:

1. Se hace una redirección a la URL de autenticación de Twitter donde nos pedirá hacer login en Twitter si no lo estamos y nos pedirá permiso de uso de la aplicación.
2. A la petición hay que pasarle como parámetro el oauth_token y nos redigirá a la URL de callback con el oauth_token y el oauth_verifier que usaremos en la fase 3.

Fase 3:

1. Pedimos a Twitter con el oauth_verifier que nos genere el token de acceso.
2. Si todo ha ido bien nos devuelve el estado 200 OK así como el oauth_token, el oauth_token_secret, el user_id y el screen_name del usuario.
3. Por último se redirige a la página que se quiera con el usuario ya logeado.

Ahora hay que traducir todo eso a lenguaje informático.

Programando el Sign In with Twitter.

Para que queden claros los conceptos voy a hacer toda la programación en dos ficheros php, el primero será index.php que será la entrada a la aplicación y el otro será signin.php que será el que se encargue de manejar todo el flujo del login.

Por suerte la librería twitteroauth nos permite hacer todas las peticiones Twitter de forma sencilla y además nos formatea los valores devueltos por lo que no nos tenemos que poner nosotros a parsear las respuestas.

La aplicación que he creado nos mostrará una pequeña ficha con nuestro avatar, nuestro nombre de usuario y los seguidores que tenemos, además el fondo será el que se usa en Twitter.

Podéis probar la aplicación en esta dirección.

La estructura de la aplicación quedaría como sigue:

El fichero signin.php quedaría así:

[php]
// Iniciamos sesion pues vamos a usar las variables de sesion para almacenar datos
session_start();

// Requerimos los archivos de la libreria
require_once(‘lib-oauth/twitteroauth/twitteroauth.php’);
require_once(‘lib-oauth/config.php’);

// A partir de aqui contemplamos los casos explicados en el flujo
// (1*) Como Twitter nos devuelve oauth_token y oauth_verifier vemos si el token que devuelve es el mismo que esta almacenado en session
if (isset($_SESSION[‘oauth_token’]) && $_SESSION[‘oauth_token’] == $_REQUEST[‘oauth_token’] && isset($_REQUEST[‘oauth_verifier’])) {

// FASE 3:
// Tenemos que pedir el token de acceso haciendo uso del oauth_verifier
$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $_SESSION[‘oauth_token’] , $_SESSION[‘oauth_token_secret’]);
$access_token = $connection->getAccessToken($_REQUEST[‘oauth_verifier’]);

// Si nos ha devuelto 200 OK
if($connection->http_code==’200′) {

$_SESSION[‘status’] = ‘verificado’;
$_SESSION[‘request_vars’] = $access_token; // access_token es un array con los parametros que se devuelven en la fase 3

// Ya no necesitamos tener en la sesion estas variables
unset($_SESSION[‘token’]);
unset($_SESSION[‘token_secret’]);
// Redirigimos a la propia pagina principal
header(‘Location: ./index.php’);
} else {
die("Ha ocurrido un error. No se ha devuelto 200 OK");
}

} else {

// FASE 1:
// Hacemos la peticion a Twitter para que nos devuelva oauth_token, oauth_token_secret y oauth_callback_confirmed
// La libreria usa la funcion getRequestToken con la URL de CALLBACK como parametro
// Nos devuelve un array asociativo con los valores

$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET);
$request_token = $connection->getRequestToken(OAUTH_CALLBACK);

// Almacenamos en las variables de sesion la respuesta desde Twitter
$_SESSION[‘oauth_token’] = $request_token[‘oauth_token’];
$_SESSION[‘oauth_token_secret’] = $request_token[‘oauth_token_secret’];

// FASE 2:
// Redirigimos hacia la URL de Twitter si todo lo anterior ha ido bien
if($connection->http_code==’200′) {
//redirect user to twitter
$twitter_url = $connection->getAuthorizeURL($request_token[‘oauth_token’]);
// Despues de la siguiente linea se hara un redirect hacia la URL de CALLBACK devolviendo el oauth_token y el oauth_verifier (1*)
header(‘Location: ‘ . $twitter_url);
} else {
die("Ha ocurrido un error. No se ha devuelto 200 OK");
}

}
[/php]

El fichero index.php de esta manera:

[php]
<?php
// Iniciamos sesion pues vamos a usar las variables de sesion para leer los datos
session_start();

// Requerimos los archivos de la libreria para consultar la API
require_once(‘lib-oauth/twitteroauth/twitteroauth.php’);
require_once(‘lib-oauth/config.php’);

// Si el usuario esta verificado
if (isset($_SESSION[‘status’]) && $_SESSION[‘status’] == ‘verificado’) {

$screen_name = $_SESSION[‘request_vars’][‘screen_name’];
$user_id = $_SESSION[‘request_vars’][‘user_id’];
$oauth_token = $_SESSION[‘request_vars’][‘$oauth_token’];
$oauth_token_secret = $_SESSION[‘request_vars’][‘$oauth_token_secret’];

$connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $oauth_token, $oauth_token_secret);
$response = $connection->get(‘users/show’, array(‘screen_name’ => $screen_name));
?>

<head>
<title>Twitter Card for <?php echo $screen_name; ?></title>
<style>
body {background-image: url(‘<?php echo $response->profile_background_image_url; ?>’)}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div class="main">
<img src="<?php echo $response->profile_image_url; ?>" alt="Avatar">
<p class="info">@<?php echo $screen_name; ?> tiene <?php echo $response->followers_count;?> seguidores.</p>
</div>
</body>
<?php
} else {
// Pedimos el login
echo ‘<a href="signin.php" title="Sign In With Twitter"><img src="img/signin.png" alt="Sign In With Twitter"></a>’;
}
?>
[/php]

Y el style.css:

[css]
.main {
background: url(‘img/zwartevilt.png’);
border-color: #FFFFFF;
border-radius: 10px;
border-width: 4px;
border-style: solid;
margin: 200px auto;
width: 500px;
padding: 10px;
font-size: 18px;
color: #FFF;
font-family: ‘Verdana’;
overflow: hidden;
}

.main img {float: left; margin-right: 30px;}

.info {
float: left;
position: relative;
}
[/css]

Como podéis observar no está del todo acabado, está hecho a drede. ¿Cómo haríais logout? Os dejo explicármelo en los comentarios 😉

Además si veis que me he colado en algo, faltan o sobran cosas… ¡hacédmelo saber pues es la primera aplicación que hago!

Por otro lado os dejo para que os descarguéis la aplicación en este enlace, acordaros de configurar el config.php con vuestros datos.

Recursos:

• Explicación del Sign In de Twitter Dev.
• Libreria tweetoauth.