Cómo hacer login mediante redes sociales con PhoneGap

PhoneGap es una herramienta que puede ayudarte a crear aplicaciones híbridas para diferentes dispositivos utilizando HTML, CSS y JavaScript. Sin embargo, las aplicaciones de Phonegap cuentan con ciertas diferencias en comparación con los sitios web normales y las aplicaciones nativas. Tendrás que utilizar plugins para realizar tareas que los sitios web tradicionales hacen con facilidad. Como por ejemplo, para subir un archivo tendrías que usar el plugin File Transfer y utilizar una API diferente que añada inputs con el atributo type definido a file.

La idea está clara. Para generar aplicaciones híbridas utilizaremos HTML, CSS y JavaScript, pero tendrás que esforzarte más si quieres obtener aplicaciones más elaboradas y profesionales, puesto que el desarrollo de distintas funciones es diferente. Un caso de ejemplo de esto último es el crear un sistema de login para distintas redes sociales.

En este breve tutorial, vamos a mostrarte cómo hacer un login de usuario mediante Google, Facebook y LinkedIn en una aplicación PhoneGap.

En las aplicaciones web tradicionales, se redirige al usuario a la página de login de la red social en cuestión, para más tarde devolverlo a la página web si el proceso ha tenido éxito. Sin embargo, con PhoneGap es distinto, ya que no dispones de una URL a la cuál devolver al usuario. Lo mejor para gestionar esto es utilizar el plugin InAppBrowser de PhoneGap, que es un navegador con algunos hooks añadidos. Mediante este plugin, puedes redirigir al usuario a cualquier página y configurar detectores para cuando se cargue una nueva página en el navegador. Si se carga una nueva página, puedes comprobar si la URL coincide con la URL de OK que has establecido en la solicitud de login con la red social. Si coincide, puedes buscar un token de acceso dentro de la URL que podrás utilizar después para obtener datos del usuario cuando sea necesario.

Un inconveniente de todo esto es que la client secret key de la red social, debe estar dentro de la aplicación PhoneGap. Si un usuario examina el código fuente, puede encontrarlo y apropiarse de la aplicación, lo cuál da que pensar...

El siguiente código se basa en jQuery y el plugin InAppBrowser de PhoneGap

Para iniciar sesión con Facebook, hay un método con la ID de la app de Facebook y la app secret, las cuales puedes obtener creando una aplicación de Facebook en: https://developers.facebook.com/apps/ y una callback la cual se llamará con el token de acceso si el usuario ha iniciado sesión correctamente. La función en sí abre la página de login de Facebook con InAppBrowser y establece los detectores para cuando se cargue una página. Si la URL coincide con el parámetro redirect_uri y si existe el token de acceso, sabremos que el usuario ha sido autenticado con éxito.

var facebookLogin = function(appId, appSecret, successCb,errCb) {

  var ref = window.open("https://www.facebook.com/dialog/oauth?display=popup&response_type=token&client_id="+appId+"&redirect_uri="+"http://anyurlhere.com", "_blank", "location=no");
  ref.addEventListener("loadstop", function(evt) {

    if (evt.url.indexOf("anyurlhere.com") !== -1) {
      if (evt.url.indexOf("#access_token") !== -1) {
          localStorage.fbToken = evt.url.split("#access_token=")[1];
          ref.close();
          ref.addEventListener("exit", function() {
                successCb(localStorage.fbToken);
          })
      }
    }
  })

}

La situación es muy similar con LinkedIn. Hacemos básicamente las mismas cosas, pero cambiando las URLs.

var linkedinLogin = function(appId,appSecret,successCb,errCb) {

  var ref = window.open("https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id="+appId+"&redirect_uri="+(encodeURI("http://anyurlhere.com"))+"&state=987654321&scope=r_basicprofile", "_blank", "location=no");
  ref.addEventListener("loadstop", function(evt) {

    if (evt.url.indexOf("anyurlhere.com") !== -1) {
      if (evt.url.indexOf("code=") !== -1) {
        var code = evt.url.split("code=")[1];
        code = code.split("&")[0];

        //TODO:  get actual token to access user profile
        $.post("https://www.linkedin.com/oauth/v2/accessToken", {"grant_type": "authorization_code", "code": code, "redirect_uri":encodeURI("http://anyurlhere.com"), "client_id":appId,"client_secret":appSecret}, function(data) {
          for (key in data) {
            if (key == 'access_token') {

              localStorage.linkedinToken = data[key];
              ref.close();
              ref.addEventListener("exit", function() {
                successCb(localStorage.linkedinToken);
              })
            }
          }
        })
      }
    }
  })
}

Con Google, tampoco hay cambios sustanciales.

var googleLogin = function(appId, appSecret, successCb, errCb) {

  var ref = window.open("https://accounts.google.com/o/oauth2/v2/auth?response_type=token&client_id=" + appId + "&redirect_uri="+encodeURI("http://anyurlhere.com")+"&scope="+encodeURIComponent("email profile")+"&state=profile", "_blank", "location=no");
  ref.addEventListener("loadstop", function(evt) {
    if (evt.url.indexOf("anyurlhere.com") !== -1) {

      if (evt.url.indexOf("access_token=") !== -1) {
        var accessToken = evt.url.split("access_token=")[1];
        accessToken = accessToken.split("&")[0];

        localStorage.gToken = accessToken;

        ref.close();
        ref.addEventListener("exit", function() {
            successCb(localStorage.gToken);
        })
      }
    }
  })

}

Ahora, si queremos obtener la información de perfil del usuario, puedes utilizar el token que hemos guardado en localStorage. Por ejemplo, para obtener la información del perfil del usuario con Google, solo necesitamos hacer una petición a la URL que puedes ver abajo y pasarle el token el cual hemos almacenado.

var getGoogleInfo = function(successCb, errCb) {
  //get basic user profile
    $.get("https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=" + localStorage.gToken, function(userInfo) {
      successCb(userInfo);
    })
}

Para obtener la información del Facebook del usuario, el concepto es el mismo. Hacemos una petición a la API, obtenemos los datos en formato JSON y extraemos la información que necesitemos.

var getFacebookInfo = function(successCb, errCb) {
  //get basic user profile-name
  $.get("https://graph.facebook.com/me?fields=email,name,picture&access_token=" + localStorage.fbToken, function(userInfo) {



    var myInfo = {};
    if (userInfo.name) {
          myInfo.name = userInfo.name;
    }
    if (userInfo.email) {
      myInfo.email = userinfo.email;
    }

    if (userInfo.picture) {
      myInfo.picture = userInfo.picture.data.url;
    }

    localStorage.myInfo = JSON.stringify(myInfo);
      successCb(myInfo);
    // localStorage.myInfo = myInfo;
  })
}

Fuente: phpgang.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP