Login con Twitter – Javascript / Phonegap

Hola! Esta vez traigo el sistema de inicio de sesión con Twitter en Javascript, dirigido a Phonegap. Al final de este artículo podrás iniciar sesión con cuentas de Twitter en tu aplicación Phonegap, obtendremos los datos del usuario de Twitter para posteriormente guardarlos en una base de datos de usuarios para nuestra aplicación, una vez hecho esto, el usuario podrá volver a iniciar sesión con su cuenta ya existente y minimizaremos a la mitad el tiempo que lleva en registrarse un usuario por lo que el usuario accederá a su cuenta más rápido.

¿Que necesitaremos?

Una cuenta de Twitter (Obvio) Puede ser cualquiera para crear nuestra aplicación en el espacio de desarrolladores de Twitter.
La libería jsOAuth.
Un pequeño código en Javascript que será el que haga la conexión con Twitter y donde obtendremos todos los datos del usuario.

Teniendo estos elementos podremos empezar a desarrollar el inicio de sesión, es muy fácil solo lleva un momento hacerlo y proveeremos a nuestra aplicación de un sistema rápido de registro e inicio.

Mi recomendación es que el mismo sistema pueda registrar o iniciar sesión del usuario en nuestra aplicación, ya que será el mismo procedimiento al enviar los datos al servidor de la aplicación y tratarlos, tendremos que hacer condicionales sobre el id de Twitter del usuario que está iniciando sesión, comprobando si existe o si no existe, en el caso de que exista buscaremos la información que necesitemos y los enviaremos de vuelta a la aplicación, en caso de que no exista, crearemos el registro en la tabla de usuarios e igualmente enviaremos los datos resultantes a la aplicación.

Manos a la obra.

Crearemos dos archivos

twitter.js
jsOAuth.js ( Lo podéis descargar aquí)

También necesitaréis el plugin lo instaláis en vuestra aplicación si no lo tenéis con lo siguiente o puedes ver la documentación oficial aquí

phonegap plugin add cordova-plugin-inappbrowser

Y nada más

Una vez que tengamos estos dos archivos creados los añadiremos a nuestro index.html para que cuando hagamos una llamada a la función de inicio de sesión se ejecute.

<script type="text/javascript" src="direccion/twitter.js></script>
<script type="text/javascript" src="direccion/jsOAuth.js></script>

Ahora que tenemos todo lo necesario empecemos a codear.

En el primer archivo «twitter.js» Añadiremos el siguiente código:

var optionsTwitter = {
      consumerKey: 'CONSUMER_KEY',
      consumerSecret: 'COMSUMER_SECRET'
};
    var requestParams;
    var accessParams;
 
   oauth = OAuth(optionsTwitter);
function loginTwitter() {
  console.log("Ejecutando entrada en Twitter");
    oauth.get('https://twitter.com/oauth/request_token',
      function(data) {
        requestParams = data.text;
        ref = window.open('https://api.twitter.com/oauth/authorize?'+data.text, '_blank','location=no');
        ref.addEventListener("loadstart", function(iABObject) {
                  if(iABObject.url.match(/MIURL.com/)) {
                    ref.close();
                    autorizar(iABObject);
                  }
                }); 
        },
        function(data) {
          console.log("ERROR: "+ JSON.stringify(data));
        }
);
}
 
function autorizar(o) {
    var currentUrl = o.url;
  var query = currentUrl.match(/oauth_verifier(.+)/);
    for (var i = 0; i &lt; query.length; i++) {
      parameter = query[i].split("=");
      if (parameter.length === 1) {
          parameter[1] = "";
      }
  }
        oauth.get('https://api.twitter.com/oauth/access_token?oauth_verifier='+parameter[1]+'&amp;'+requestParams,
          function(data) {
            var accessParams = {};
            var qvars_tmp = data.text.split('&amp;');
            for (var i = 0; i &lt; qvars_tmp.length; i++) {;
              var y = qvars_tmp[i].split('=');
              accessParams[y[0]] = decodeURIComponent(y[1]);
            };
            optionsTwitter.accessTokenKey = accessParams.oauth_token; // This is saved when they first sign in
            optionsTwitter.accessTokenSecret = accessParams.oauth_token_secret;
            oauth.setAccessToken([accessParams.oauth_token, accessParams.oauth_token_secret]);
           ExtraerDatosUserTwitter(); //LLamamos a la función para extraer los datos del usuario de Twitter.
          },
          function(data) { 
          	console.log("ERROR Verificando " + JSON.stringify(data));
          }
        );        
    }
    function ExtraerDatosUserTwitter() {
  	oauth.get('https://api.twitter.com/1.1/account/verify_credentials.json?skip_status=true',
       	        function(data) {
       		     console.log(JSON.stringify(data));
	             var entry = JSON.parse(data.text);
                     //Ya tenemos todos los datos almacenados en la variable entry
                });
  	}

Fíjate en las variables que tienes que modificar son 3.

CONSUMER_KEY (Obtenido al crear la aplicación en apps.twitter.com)
CONSUMER_SECRET (Obtenido al crear la aplicación en apps.twitter.com)
MIURL (Esta es una parte importante que te explico a continuación)

MIURL tienes que utilizar un dominio puede ser el tuyo propio de la aplicación u otro inventado (Recomiendo que sea el de la aplicación), esto hará que cuando el navegador interno de nuestra aplicación navegue hasta ese dominio la app lo detecte y cierre el navegador obteniendo los datos de la sesión del usuario.

Ahora es momento para crear nuestra aplicación en Twitter, nos dirigimos a apps.twitter.com, iniciamos sesión si no la tenemos iniciada ya y pulsamos en «Create new App» nos aparecerá un formulario como este y tendremos que rellenar los datos que nos solicita, hay una cosa muy importante en este formulario que si no lo rellenamos correctamente nos puede dar error al intentar iniciar sesión desde la app.

Create Application on App.Twitter.com - Ejemplo Phonegap

Ese campo es Callback URL que será como hemos dicho antes el valor de MIURL, pero con el http://www el valor de MIURL será solo por ejemplo en el caso anterior laurldemiaplicacion.com aceptamos los términos y condiciones y ya tendremos nuestra app creada.

La siguiente ventana nos dicen los datos de las otras dos variables CONSUMER_KEY y CONSUMER_SECRET

Options Consumer Key and Consumer secret Phonegap Twitter

En la pestaña Key and Access Tokens tendremos los valores de esas dos variables que solo habrá que escribirlas en nuestro twitter.js, en realidad ya no hay más configuraciones por parte de Twitter, solo queda que nuestra app reciba los datos y nosotros tratarlos para registrar al usuario.

El sistema conectará con Twitter con esos datos para obtener por fin todos los datos del usuario de Twitter que está iniciando sesión. Son muchos datos te dejo un listado aquí. La documentación oficial de esta parte está aquí encontraréis todos los valores que recibe cuando hace el proceso, dependiendo del tipo de aplicación que estéis desarrollando necesitaréis unos datos u otros pero yo os voy a dejar los más importantes.

description: «I taught your phone that thing you like. The Mobile Partner Engineer @Twitter. » (La descripción del usuario de Twitter..La típica.)
favourites_count: 588, (Número de Tweets marcados como favoritos)
followers_count: 10625, (Número de Seguidores)
id: 38895958, (ID de usuario de Twitter ((Muy Importante)))
lang: «en» (Idioma del usuario, muy importante para aplicaciones con varios idiomas)
location: «San Francisco» (Ubicación del usuario, la que aparece en el perfil)
name: «Sean Cook» (Nombre del usuario)
profile_background_color: «1A1B1F» (Color del perfil de usuario, bueno saberlo si queréis personalizar la app según este color)
profile_background_image_url:»http://a0.twimg.com/profile_background_images/495742332/purty_wood.png» (Imagen de Fondo)
profile_background_image_url_https:»https://si0.twimg.com/profile_background_images/495742332/purty_wood.png» (Imagen de Fondo con HTTPS)
profile_image_url:»http://a0.twimg.com/profile_images/1751506047/dead_sexy_normal.JPG» (Foto de perfil del usuario)
profile_image_url_https:»https://si0.twimg.com/profile_images/1751506047/dead_sexy_normal.JPG» (Foto de perfil del usuario con HTTPS)
profile_link_color: «2FC2EF» (Color del perfil de usuario, bueno saberlo si queréis personalizar la app según este color)
profile_sidebar_border_color: «181A1E» (Color del perfil de usuario, bueno saberlo si queréis personalizar la app según este color)
profile_sidebar_fill_color: «252429» (Color del perfil de usuario, bueno saberlo si queréis personalizar la app según este color)
profile_text_color: «666666» (Color del perfil de usuario, bueno saberlo si queréis personalizar la app según este color)
protected: false, (Si la cuenta está protegida)
screen_name: «theSeanCook» (Nombre de usuario de Twitter @…)
statuses_count: 2609, (Tweets publicados por el usuario)
time_zone: «Pacific Time (US & Canada)» (Zona horaria del usuario)
url: null, (URL establecida en el perfil (Blog del usuario, pagina web de empresa, etc.))
verified: false (Si la cuenta está verificada)

Para mi estos son los más importantes, pero hay más, si entras en el enlace anterior podrás ver todos. ahora claro está el formato que responde el servidor es JSON por lo que en la función ExtraerDatosUserTwitter veréis que hay una variable que se llama «entry» esta es la que tiene almacenados todos los datos del usuario, para acceder por ejemplo a la descripción del usuario es entry.description para extraer el nombre de usuario es entry.screen_name y así con todos.

Es fácil implementar y da un toque diferente a tu aplicación, cualquier pregunta que tengáis utilizar los comentarios.

Si te ha gustado pero quieres más también tengo la forma de hacer que cuando inicie sesión el usuario automáticamente siga a tu perfil de Twitter o publicar Tweets desde la aplicación Phonegap, o publicar tweets y fotos, posibilidades hay muchas demuestra que te gusta compártelo en tus redes sociales y si me lo pedís mucho pues tendré que publicarlo 🙂

Un Saludo y hasta otra!

Relacionado

Categorías:PhonegapTips

Daniel Riera

Amante de todo lo que tenga que ver con internet, la programación mi pasión, crear nuevas formas y nuevos sistemas que den vida a nuevos proyectos que faciliten la vida a muchas personas,