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 514 times, 1 visits today)

You might also like

Comments (6)

  • […] esta entrada pendiente desde hace algún tiempo por lo que recomiendo pasarse por la entrada de Sign In con la API de Twitter para recordar lo que allí se escribió, sobre todo el flujo que sigue la API para permitirnos […]

  • giannina 5 años ago Reply

    Buenas!! Muy bueno el tutorial!!! Justo lo que necesitaba!!!
    Lo único que una vez que inicio sesión, no me lleva a la página donde figura el nombre de usuario y los seguidores.

    Esa pág sería el callback??
    Yo necesitaría extraer email, nombre, id de usuario para generar el login
    Gracias!!

  • mariano 4 años ago Reply

    para lograr hacer el sign in con twitter en mi web, tengo que pagar un certificado ssl y un host que lo soporte, usando https o hay otra forma. lo necesito para hacer un trabajo para la facultad, basicamente es un blog que permite entrar con twitter y tuitea desde mi aplicacion. gracias por responder y sacarme esta duda. saludos

    Juan Ignacio Alberola Colomo 4 años ago Reply

    Hola Mariano,

    desde luego yo no conseguí hacerlo sin instalar un certificado SSL aunque fuera en local y falso, pero sí es necesario. Hay hostings que te ofrecen RapidSSL por 35€ al año y no sale demasiado caro.

    Si es posible sin SSL no sé decírtelo con certeza.

    Lo siento 🙁

  • jairo 4 años ago Reply

    muchas gracias me fue muy util

    Juan Ignacio Alberola Colomo 4 años ago Reply

    De nada jairo! A tu diposición!

Leave a Reply

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