Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK

Consejo rápido: agrega a tu aplicación Android acceso a través de Facebook

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Acceso a través de Facebook, proporciona una forma conveniente y segura para personas que ingresen a una aplicación sin tener que pasar primero por un proceso de registro. Usando la versión mas reciente del SKD para Android de Facebook, toma solo unos cuantos minutos el agregar ésta característica a tu aplicación.

En este consejo rápido, aprenderás como agregar un botón de acceso a través de Facebook a una aplicación Android y manejar los eventos para que un usuario pueda ingresar utilizando su cuenta de Facebook.

Requisitos Previos

Antes de que comiences, asegúrate que tengas acceso a lo siguiente:

1. Registra tu Aplicación

Todas las aplicaciones que usan el SDK de Facebook deben estar registradas con Facebook. Ingresa al sitio de Desarrolladores de Facebook y da click en Create a New App en la esquina superior derecha.

Facebook Developers Website

Aparece un formulario que pide Display Name, Namespace, y Category de la aplicación. Ingresa los campos requeridos y da click en Create App ID.

Form for creating a new app ID

En la próxima pantalla, puedes ver tu Application ID (ID de la aplicación). Toma nota de ello, porque vas a necesitarlo más adelante en éste tutorial.

App ID and app secret

Abre Settings en el sector izquierdo y da click en el botón Add Platform. De la ventana emergente, selecciona Android.

Select Platform dialog

En el próximo formulario, ingresa el nombre del paquete de tu aplicación y el nombre de tu Activity. Si no has creado tu aplicación o Activity aún, asegúrate de recordar los valores que ingresaste.

Para llenar el campo Key Hashes, abre una terminal y ejecuta el comando keytool para generar un hash de clave usando debug keystore (certificado de depuración) localizado en ~/.android/debug.keystore. Así se debería ver el comando.

La contraseña predeterminada para debug keystore es android. Ingresa esa contraseña cuando se te pida. El resultado del comando debería ser una cadena de 28 caracteres. Cópiala, regresa a tu navegador, y pega la cadena en el campo Key Hashes como se muestra abajo.

Android app details

Asegúrate de que Single Sign On sea establecido en Yes y da click en el botón Save Changes. Tu aplicación ahora está registrada.

2. Agrega el SDK de Facebook a tu Proyecto.

El SDK de Facebook está disponible en Maven Central. Para usar éste repositorio, edita el archivo build.gradle en el directorio app de tu proyecto y agregale el siguiente código  antes de la lista de dependencies:

Ahora puedes agregar el SDK de Facebook a tu proyecto como una dependencia compile. Agrega el siguiente código a la lista de dependencies:

3. Crea una Activity

Paso 1: Define el Layout (Maquetado)

Crea un nuevo layout llamado main_activity.xml en res/layout. Éste va a ser un layout muy simple con solo dos widgets:

  • un LoginButton para permitir al usuario ingresar a Facebook
  • un TextView para mostrar el resultado del más reciente intento de ingreso

Puedes colocarlos dentro de un RelativeLayout Después de incluir atributos para el padding y posicionar los widgets, el XML del layout se observará así:

Paso 2: Crea la Clase

Crea una nueva clase Java que extienda de Activity y nómbrala MainActivity.java. Recuerda que el nombre de ésta clase y el paquete al que pertenece deberían coincidir con los valores que ingresaste al registrar tu aplicación con Facebook.

Declara los widgets que definiste en el layout de la activity como campos de ésta clase.

Declara un CallbackManager como otro campo. El CallbackManager, como su nombre sugiere, es usado para manejar los callbacks (devoluciones de llamada o retrollamada) utilizados en la aplicación.

El SDK necesita ser inicializado antes de usar cualquiera de sus métodos. Puedes hacerlo al llamar a sdkInitialize y pasarle el contexto de la aplicación. Agrega el código siguiente al método onCreate de tu Activity:

Luego, inicializa tu instancia de CallbackManager usando el método CallbackManager.Factory.create.

Llama a setContentView para establecer el layout definido en el paso previo como el layout de ésta Activity y luego usa findViewById para inicializar los widgets.

Es momento de crear un callback para manejar los resultados de los intentos de ingreso y registrarlo con el CallbackManager. Callbacks personalizados deberían implementar FacebookCallback. La interfaz tiene métodos para manejar cada resultado posible de un intento de ingreso:

  • si el intento de ingreso es exitoso, onSuccess es llamado.
  • Si el usuario cancela el intento de ingreso, onCancel es llamado.
  • Si un error ocurre, onError es llamado.

Para registrar el callback personalizado, usa el método registerCallback. El código para crear y registrar el callback debería verse así:

Ahora puedes agregar código a éstos métodos para mostrar mensajes apropiados usando el método setText del TextView.

Cuando el método onSucces es llamado, un LoginResult es pasado como un parámetro. Recupera el acces token (identificador con el que demostramos tener acceso a la información del usuario) que contiene usando getAccesToken y usa su método getUserId para obtener el ID del usuario. Para obtener el token en la forma de un String, usa getToken. Despliega éstos valoes en el TextView al agregar el siguiene código al método onSuccess:

Si el usuario cancela el intento de ingreso, desplegamos un mensaje diciendo "Intento de Ingreso Cancelado". Agrega el siguiente código al método onCancel:

Similarmente, agrega el siguiente código al método onError:

Presionando el botón de login comienza una nueva Activity, que retorna un resultado. Para recibir y manejar el resultado, sobreescribe el método onActivityResult de tu Activity y pasa sus parámetros al método onActivityResult de CallbackManager.

4. Agrega el ID de la aplicación de Facebook

El ID de la aplicación que recibiste cuando registrarte tu aplicación debería ser agregado como un string en el res/values/strings.xml de tu proyecto. Para éste tutorial, llama el string facebook_app_id.

5. Edita el Manifiesto

Define tu Activity en el AndroidManifest.xml. Si ésta es la primera Activity de tu aplicación, deberías también agregar un intent-filter que responda a la acción android.intent.action.MAIN.

Agrega el ID de la aplicación como meta-data.

Define FacebookActivity como otra Activity que pertenece a tu aplicación. Maneja la mayor parte de los cambios en la configuración. Necesitas mencionar eso usando el atributo configChanges.

Finalmente, tienes que requerir android.permission.INTERNET para poder conectar a los servidores de Facebook.

6. Compila y Ejecuta

Tu aplicación ahora está completa. Cuando la compilas y la despliegas en tu dispositivo Android, verás el botón de login (acceso) de Facebook.

The Log in with Facebook button

Presionar el botón login te lleva a la página de Facebook que te pide ingresar y autorizar la aplicación.

Authorization screen

Después de ingresar exitosamente, el TextView desplegará el ID del usuario y el token de autenticación.

Result of a successful login

Conclusión

En éste consejo rápido, aprendiste cómo usar el SDK de Facebook para agregar a tu aplicación Android acceso a través de Facebook. También aprendiste cómo manejar los resultados posibles de un intento de ingreso. Para aprender más sobre acceso a través de Facebook, puedes revisar la guía SDK de Facebook para Android.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.