Programación y APIs

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:

sign-in-with-twitter-gray

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.

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.

config-app

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.

flujo-signin-twitter

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:

app

El fichero signin.php quedaría así:

// 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");
    }

}

El fichero index.php de esta manera:

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

Y el style.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;
}

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:

(Visited 516 times, 1 visits today)
Related posts
Programación y APIs

Sign In con Twitter y Codeigniter

Programación y APIs

Introducción a Codeigniter

Programación y APIs

Empezando con la REST API de Twitter

Programación y APIs

Empezando a jugar con Facebook Apps

6 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Si continuas utilizando este sitio, aceptas el uso de las cookies. Más información

Las opciones de cookie en este sitio web están configuradas para "permitir cookies" para ofrecerte una mejor experiéncia de navegación. Si sigues utilizando este sitio web sin cambiar tus opciones o haces clic en "Aceptar" estarás consintiendo las cookies de este sitio.

Cerrar