Mar 28, 2013

Integrar SDK Facebook en Android

Muchas de las aplicaciones que manejamos en nuestro día a día utilizan una o varias redes sociales como complemento para que nos podamos identificar en ellas, compartir información u otros fines. Estas redes sociales hacen las tareas del programador más fáciles con sus SDK. En el caso que hoy tratamos, Facebook, su SDK ya está por la tercera versión y en esta al igual que su app ya realiza su operaciones de forma nativa.

Lo primero que debemos hacer es descargar el SDK para Android de Facebook, lo podemos encontrar en la web de desarrolladores https://developers.facebook.com/android/ Descargamos el zip y lo descomprimimos. Como siempre, yo suelo recomendar hacerlo en una carpeta donde tengamos el resto de librerías para llevar siempre el control de las librerías que tenemos.

El siguiente paso es crear un proyecto con Eclipse, para ello vamos a File -> New -> Project… -> Android Project From Existing Code. Ahora seleccionamos la carpeta donde está el proyecto, en nuestro caso donde descomprimimos el anterior zip, seleccionamos la carpeta «facebook» y aceptamos. Como veis detectará el proyecto del SDK de Facebook. Finalizamos y ahora tenemos listo un proyecto que habrá que implementar en la aplicación que queremos que tenga características de Facebook.

Por un momento nos olvidamos de Eclipse y nos vamos a la web de Facebook, https://developers.facebook.com/apps, aquí necesitamos crear una app para poder realizar todas las operaciones de logueo y demás. Para ello pulsamos sobre el botón de Crear una nueva aplicación, le damos un nombre y un namespace. Podéis asignarle un icono y más características, pero ahora no viene al caso y lo dejo para que lo investiguéis vosotros una vez acabemos el tutorial.

Lo importante ahora es en la página de nuestra app Facebook está en la sección Native Android App, activamos esta sección y otra vez tenemos campos para cubrir. Aquí el campo más importante es el de Key Hashes. Este sirve para identificar vuestra app con Facebook mediante la keystore con la que se firma la app. En el campo clase fijaros como lo he cubierto en la imagen de abajo, el namespace de mi aplicación más el nombre de la activity donde ejecutaremos al final nuestro ejemplo.

Vamos a ver como generar este código. Para ello abrimos un terminal y escribimos:

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Nos pide una contraseña, es android, y nos devuelve una clave que introducimos en el formulario de Facebook. En este caso estamos utilizando el keystore de pruebas con las que se firman las apps mientras se va ejecutando en el emulador o en nuestro móvil de desarrollo. Para crear también la key hash de la keystore que utilizamos en producción, simplemente sustituimos «~/.android/debug.keystore» por la ruta de la keystore de producción. Y la clave será la que tengais vosotros para esa keystore. Por último, añadimos esa nueva key en el formulario de Facebook. Yo siempre tengo el de desarrollo y el de producción.

Y por fin pasamos a nuestra app en Eclipse. Lo primero es crear un nuevo proyecto para Android. Yo le he llamado com.trespies.demo y el sdk mínimo de Android indico que es el 2.2(Froyo) y su sdk target 4.2(Jelly Bean). El resto lo dejo todo por defecto.

Sobre nuestro proyecto hacemos botón derecho, vamos a Properties -> Android, y en la parte derecha vamos a la parte de abajo de todo y añadimos una librería, en este caso debe aparecer el FacebookSDK. Aceptamos y aplicamos.

En este punto, me ha dado un error porque ahora en mi proyecto hay dos versiones diferentes de la librería android-support-v4. Para solucionarlo simplemente quitamos la librería o bien de este proyecto o bien del proyecto del FacebookSDK y copiamos el del proyecto que no eliminamos. Yo prefiero eliminar la del proyecto de Facebook, así cada vez que creéis un nuevo proyecto no tenéis que repetir esta operación.

Ahora debéis volver a la app de Facebook y copiar el app ID de la misma. De vuelta al proyecto, abrimos en la carpeta values -> res -> strings.xml. Aquí creamos una nueva entrada, le llamamos facebook_app_id y su value es el app ID que hemos copiado.

Para poder conectarse a Facebook debemos dar permisos de internet a nuestra app en el archivo AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

Dentro del mismo archivo, dentro de la etiqueta application, añadimos el siguiente meta-data:

<meta-data android:value="@string/facebook_app_id" android:name="com.facebook.sdk.ApplicationId"/>

Con esto le decimos al sdk de Facebook cual es el app ID asociado con nuestra aplicación.

Por último, añadimos una activity así:

<activity android:name="com.facebook.LoginActivity" />

Vamos ahora con la parte final. Nos vamos al layout de la activity principal de nuestra aplicación y añadimos un TextView, yo le llamaré lblWellcome. Y por fin abrimos la activity e incluimos el siguiente código:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);


// start Facebook Login
    Session.openActiveSession(this, true, new Session.StatusCallback() {

      // callback when session changes state
      @Override
      public void call(Session session, SessionState state, Exception exception) {
        if (session.isOpened()) {

          // make request to the /me API
          Request.executeMeRequestAsync(session, new Request.GraphUserCallback() {

            // callback after Graph API response with user object
            @Override
            public void onCompleted(GraphUser user, Response response) {
              if (user != null) {
                TextView welcome = (TextView) findViewById(R.id.lblWellcome);
                welcome.setText("Hello " + user.getName() + "!");
              }
           &nbsp

            }


          });
        }
      }
    });
}


@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
  super.onActivityResult(requestCode, resultCode, data);
  Session.getActiveSession().onActivityResult(this, requestCode, resultCode, data);
}

¿Que es lo que hace esto exactamente? En el método onActivityResult se utiliza el objeto Session de Facebook para realizar parte de los procesos de autenticación y autorización necesarios para el correcto funcionamiento de nuestra app.

De momento nos centraremos en el onCreate que es lo que nosotros debemos saber controlar. En el ejemplo aparecen algunos comentarios ya que este ejemplo está recogido directamente de la web de desarrolladores de Facebook.

Primero con el objeto Session se abre una sesión activa y si no lo estuviera se pedirían las credenciales. Todo esto lo hace el SDK de Facebook sin que nosotros tengamos que hacer nada a mayores. Una vez que el usuario se ha autenticado y nos ha dado permiso para acceder desde nuestra app, se hace una petición a Facebook para que nos dé información sobre el usuario actual.

Para ello en el método call de StatusCallBack verificamos si la sesión está abierta y disponible. Para después realizar una petición asíncrona que nos devolverá los datos del usuario los cuales vamos a tener almacenados en el objeto GraphUser y por último volcamos en nuestro TextView. No os preocupéis si tarda un rato en poner el nombre de vuestro usuario, a mi me tardo algo más de un minuto pero acabo poniéndolo.

El ejemplo en cuestión es la forma más simple de hacer un login con Facebook, pero existen muchas otras cosas que se pueden hacer. Por el momento tenemos la base para poder empezar a crear aplicaciones que utilicen una de las redes sociales más conocidas en internet.

Bio
Latest Posts

Daniel Ferrer Delgado

Técnico en Administración de Sistemas y Desarrollo de Aplicaciones. Amigo de sus amigos, y una mente inquieta que no puede dejar un ordenador de lado porque necesita programar aplicaciones Android o aplicaciones en general, además de páginas web. Nuestro programador de cabecera y espero que también el vuestro.