Actualmente que las redes sociales estan a la orden del día practicamente cualquier persona cuenta con una, sobretodo hablando de facebook, y si lo acompañamos con el auge que estan teniendo las aplicaciones moviles entonces tenemos una combinacion que debemos aprovechar. Hoy vamos a ver como realizar un login con facebook en android para nuestras aplicaciones moviles y obtener información valiosa como el nombre, email, imagen de perfil y demás datos desde esta red social, ¿te animas?
Ventajas del login con facebook en android
Ofrecer una opcion de login con facebook en android ofrece muchas ventajas tanto para nuestros usuarios como para nosotros, aqui algunas:
- Comodidad al cliente al no tener que pensar en otra informacion de logueo.
- Comodidad al cliente al no tener que escribir un usuario y contraseña, sobretodo en moviles.
- Rapidez, ya que al iniciar sesion con facebook podriamos obtener decena de datos en solo unos segundos.
- Seguridad, ya que estaremos utilizando la informacion de su perfil social que, en teoría.. es informacion correcta.
- Diseño mas estetico colocar un boton de facebook que un formulario de registro de hace 10 años.
Como puedes ver aqui hay solo unas ventajas de otras varias más que seguro puedes adivinar.
Crear una app en facebook
Para poder ofrecer un sistema de login con facebook en android necesitamos crear una app que conecte con nuestra app movil, asi que vamos a https://developers.facebook.com/apps y creamos una nueva app.
¿Necesitas aprender algo nuevo ? Ve a Udemy, busca el tema del que quieres aprender, selecciona el curso para ti y continua con tu aprendizaje.
UdemyElegimos el nombre para mostrar, correo electronico de contacto y una categoria.
Nos vamos a configuracion y podemos agregar un icono de aplicacion para que sea mas confiable nuestro login, despues vamos a agregar plataforma en esta misma pantalla hasta abajo.
Elegimos android y escribimos el nombre de paquete de nuestra app (que tiene o que llevará), nombre de la clase principal (que tiene o que llevará) y un hash de clave, veamos como generar este último:
Para obtener este hash ejecuta el siguiente comando en tu cmd:
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
La contraseña por defecto de tu almacen de claves es: android
Una vez introducido este hash y la demas informacion ve a la pestaña revision de la aplicación y asegurate de hacerla publica.
Mas adelante necesitarás el app id de esta app que se encuentra en la pestaña configuración.
Facil ¿no?
Integrar el sdk de facebook en nuetra app
Para integrar el sdk de facebook en nuestro proyecto seguimos estos pasos:
- Agrega al build.gradle de proyecto el siguiente codigo
buildscript {
repositories {
mavenCentral()
}
}- Agrega al build.gradle de modulo el siguiente codigo
dependencies {
compile 'com.facebook.android:facebook-android-sdk:4.6.0'
}- Vamos a nuestro archivo strings.xml dentro de res->values y agregamos un nuevo elemento con el identificador facebook_app_id con tu id de aplicacion de facebook que creamos anteriormente.
<string name="facebook_app_id">111111111111111111</string>
- Nos aseguramos de tener los permisos adecuados de Internet en nuestro manifiesto
<uses-permission android:name="android.permission.INTERNET"/>
- Por ultimo agregamos la actividad de facebook que se utilizará para la pantalla de login.
<activity android:name="com.facebook.FacebookActivity"
android:configChanges=
"keyboard|keyboardHidden|screenLayout|screenSize|orientation"
android:theme="@android:style/Theme.Translucent.NoTitleBar"
android:label="@string/app_name" />Ahora para crear un login con facebook en android seguimos con la creación del botón.
Creando el boton de login
Para crear el boton de login vamos al xml de nuestra interfaz donde estará situado el boton y agregamos el siguiente codigo:
<com.facebook.login.widget.LoginButton
android:id="@+id/facebook_sign_in_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginBottom="10dp"
android:layout_gravity="center_horizontal" />Recordando el id de este elemento que es facebook_sign_in_button.
Ahora en nuestro codigo java en el metodo oncreate agregamos el codigo de inicializacion de facebook,
FacebookSdk.sdkInitialize(getApplicationContext()); mFacebookCallbackManager = CallbackManager.Factory.create();
donde mFacebookCallbackManager fue inicializado antes como sigue:
CallbackManager mFacebookCallbackManager;
Obtenemos el boton que creamos en nuestro xml
loginfacebook = (LoginButton) findViewById(R.id.facebook_sign_in_button);
y luego viene la magia:
//SOCIAL
loginfacebook.setReadPermissions(Arrays.asList("public_profile", "user_friends", "email", "user_birthday"));
loginfacebook.registerCallback(mFacebookCallbackManager, new FacebookCallback<LoginResult>() {
@Override
public void onSuccess(LoginResult loginResult) {
// App code
GraphRequest request = GraphRequest.newMeRequest(
loginResult.getAccessToken(),
new GraphRequest.GraphJSONObjectCallback() {
@Override
public void onCompleted(
JSONObject object,
GraphResponse response) {
try {
// get profile information
String name = "";
String email = "";
String uriPicture = "";
if (object.getString("name") != null) {
name = object.getString("name");
}
if (object.getString("email") != null) {
email = object.getString("email");
}
if (object.getString("picture") != null) {
JSONObject imagen = new JSONObject(object.getString("picture"));
JSONObject imagen2 = new JSONObject(imagen.getString("data"));
uriPicture = imagen2.getString("url");
}
// save profile information to preferences
SharedPreferences prefs = getSharedPreferences("com.nuestraapp.app", Context.MODE_PRIVATE);
prefs.edit().putString("com.nuestraapp.app.nombre", name).apply();
prefs.edit().putString("com.nuestraapp.app.email", email).apply();
prefs.edit().putString("com.nuestraapp.app.uriPicture", uriPicture).apply();
// redirect to main screen
startActivity(new Intent(Registro.this, Main.class));
} catch (JSONException e) {
e.printStackTrace();
}
}
});
Bundle parameters = new Bundle();
parameters.putString("fields", "id,name,link,gender,birthday,email,picture");
request.setParameters(parameters);
request.executeAsync();
}
@Override
public void onCancel() {}
@Override
public void onError(FacebookException error) { Log.d(Registro.class.getCanonicalName(), error.getMessage()); }
});Ahora solo debemos agregar el siguiente codigo posterior al anterior:
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
mFacebookCallbackManager.onActivityResult(requestCode, resultCode, data);
}Veamos en detalle como obtuvimos la informacion de perfil desde facebook.
Obtener la informacion del perfil desde facebook
En esta linea le decimos a facebook que tipo de informacion queremos obtener:
loginfacebook.setReadPermissions(Arrays.asList("public_profile", "user_friends", "email", "user_birthday"));y posteriormente le indicamos unicamente que campos queremos:
parameters.putString("fields", "id,name,link,gender,birthday,email,picture");en el evento onCompleted nos viene la informacion en un JSONObject y unicamente debemos obtenerla para hacer con ella lo que queramos, en mi caso la guardo en las sharedpreferences para no volver a pedir el login de nuevo dentro de la app.
Para mas informacion sobre informacion que puedes obtener desde facebook puedes consultar la documentacion del sdk de facebook.
Ahora ya vimos como crear un login con facebook en android!
Cualquier duda u opinión no dudes en dejarme un comentario abajo y con todo gusto lo responderé.
Saludos!