como hacer un login con la api de facebook mostrando nombre,imagen,genero

Hola a todos hoy veremos un nuevo tutorial a pedido de algunos usuarios quiere utilizar la api de facebook y crear inicio de sesión con esa cuenta en ves de registrarse de forma común, entonces sin mas rodeos empezamos este tutorial.

como hacer un login con la api de facebook mostrando nombre,imagen,genero

Primero debes de tener un identificador de aplicación de facebook para no hacer largo este tutorial entra al siguiente enlace aquí y has todo asta el paso 1 luego regresa aquí y continua con el tutorial.
Paso 1:
Debemos de agregar dos librerías a nuestro build.gradle dentro de dependencies
La primera librería es para usar los atributos de la apo de facebook.
La segunda es para gestionar mejor como mostramos nuestras imágenes, puedes entrar a la fuente aquí.

dependencies {
    compile 'com.facebook.android:facebook-android-sdk:4.10.1'
    compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.5'
}

Ahora debemos de agregar una imagen en nuestra carpeta drawable

Les dejo la imagen a continuación:

Paso 2:
Ahora debemos de modificar nuestro activity_main.xml y crear un archivo llamado activity_alert_dialog.xml

activity_main.xml

Les dejo el código del activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.androfast.pc.apploginfacebookimagen.MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="center">

        <ImageView
            android:id="@+id/imgPerfil"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/com_facebook_profile_picture_blank_square" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/txtNombre"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="ANDROFAST" />

        <TextView
            android:id="@+id/txtCorreo"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:text="[email protected]" />

        <TextView
            android:id="@+id/txtCumpleanio"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:text="12/07/2016" />

        <TextView
            android:id="@+id/txtId"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:text="id" />

        <TextView
            android:id="@+id/txtGenero"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:text="genero" />
    </LinearLayout>

    <ImageView
        android:id="@+id/imgFacebook"
        android:layout_width="wrap_content"
        android:layout_height="35dp"
        android:layout_gravity="center_horizontal"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:paddingRight="4dp"
        android:src="@drawable/facebook" />
</LinearLayout>

activity_alert_dialog.xml

Les dejo el código del activity_alert_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:textColor="#FFF">

    <LinearLayout
        android:id="@+id/filter_criteria_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:orientation="vertical"
        android:visibility="visible">

        <TextView
            android:id="@+id/Title"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:gravity="center_vertical|center"
            android:text="Alerta !"
            android:textColor="#FFF"
            android:textSize="16dp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:orientation="horizontal"
        android:padding="15dp">

        <TextView
            android:id="@+id/txt_msg"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text=" ¿Realmente quieres desconectarte?"
            android:textColor="#000"
            android:textSize="15dp"
            android:textStyle="normal" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_ok"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:background="@null"
            android:text="@string/ok"
            android:textColor="@color/colorPrimary"
            android:textStyle="bold" />

    </LinearLayout>


</LinearLayout>

Paso: 3
Debes ir a tu archivo string .

Debes agregar lo siguiente tal y como esta, solo cambiar lo de rojo por tu id de la api de facebook

<resources>
 <string name="app_name">AppLoginFacebookImagen</string>
 <string name="alert">Alert</string>
 <string name="ok">Ok</string>
 <string name="no_internet_conexion">No Internet connection</string>
 <string name="facebook_app_id">identificador de aplicación de face</string>
</resources>

Paso 4
Deber ir a tu AndroidManifest y agregar los siguientes permisos y atributos en rojo

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androfast.pc.apploginfacebookimagen">
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.READ_PROFILE" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <uses-permission android:name="android.permission.USE_CREDENTIALS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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


        <activity
            android:name="com.facebook.FacebookActivity"
            android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:label="@string/app_name"
            android:screenOrientation="portrait"
            android:theme="@android:style/Theme.Translucent.NoTitleBar" >
        </activity>
    </application>

</manifest>

Paso 5:
Ahora debemos de escribir código en nuestro main_activity y crea una clase llamada Gestionarfacebook

main_activity.java

package com.androfast.pc.apploginfacebookimagen;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.facebook.CallbackManager;
import com.facebook.FacebookCallback;
import com.facebook.FacebookException;
import com.facebook.FacebookSdk;
import com.facebook.GraphRequest;
import com.facebook.GraphResponse;
import com.facebook.login.LoginManager;
import com.facebook.login.LoginResult;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;

import org.json.JSONObject;

import java.util.Arrays;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    ImageView imagenFB;
    LoginManager loginManager;
    List<String> permisoNecesario = Arrays.asList("email", "user_birthday", "user_friends", "public_profile");
    String s_email = "";
    CallbackManager callbackManager;
    ImageView Perfil;
    TextView nombre, email, cumpleanio, id, genero;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
        super.onCreate(savedInstanceState);
        FacebookSdk.sdkInitialize(this);
        setContentView(R.layout.activity_main);
        Perfil = (ImageView) findViewById(R.id.imgPerfil);
        nombre = (TextView) findViewById(R.id.txtNombre);
        email = (TextView) findViewById(R.id.txtCorreo);
        cumpleanio = (TextView) findViewById(R.id.txtCumpleanio);
        id = (TextView) findViewById(R.id.txtId);
        genero = (TextView) findViewById(R.id.txtGenero);
        imagenFB = (ImageView) findViewById(R.id.imgFacebook);
        imagenFB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                facebookLogin();
            }
        });
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        callbackManager.onActivityResult(requestCode, resultCode, data);
    }

    String profilePicUrl = "";
    public void facebookLogin() {
        try {
            loginManager.getInstance().logOut();
        } catch (Exception e) {
            e.printStackTrace();
        }
        if (GestionarFacebook.comprobarInternet(getApplicationContext())) {

            callbackManager = CallbackManager.Factory.create();
            LoginManager.getInstance().logInWithReadPermissions(MainActivity.this, permisoNecesario);
            LoginManager.getInstance().registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
                @Override
                public void onSuccess(LoginResult loginResults) {

                    GraphRequest request = GraphRequest.newMeRequest(
                            loginResults.getAccessToken(), new GraphRequest.GraphJSONObjectCallback() {
                                @Override
                                public void onCompleted(JSONObject object, GraphResponse response) {
                                    // Application code
                                    Log.v("LoginActivity", response.toString());

                                    Log.e("respuesta de fb>>>>", response + "");

                                    s_email = object.optString("email");
                                    Log.e("fb correo electrónico..", s_email + "");

                                    String email = object.optString("email");
                                    String uid = object.optString("id");
                                    String name = object.optString("name");
                                    String date = object.optString("birthday");
                                    String id = object.optString("id");
                                    String gender = object.optString("gender");

                                    try {
                                        JSONObject data = response.getJSONObject();
                                        if (data.has("picture")) {
                                            profilePicUrl = data.getJSONObject("picture").getJSONObject("data").getString("url");
                                            //establecer la imagen de perfil a la vista de imagen usando Picasso o métodos nativos
                                        }
                                    } catch (Exception e) {
                                        e.printStackTrace();
                                    }

                                    Log.e("profileImageURL>>>", profilePicUrl);
                                    nombre.setText(name);
                                    MainActivity.this.email.setText(email);
                                    cumpleanio.setText(date);
                                    MainActivity.this.id.setText(id);
                                    genero.setText(gender);
                                    final ImageLoader imageLoader = ImageLoader.getInstance();
                                    imageLoader.init(ImageLoaderConfiguration.createDefault(MainActivity.this));
                                    final DisplayImageOptions options = new DisplayImageOptions.Builder().cacheInMemory(true)
                                            .cacheOnDisc(true).resetViewBeforeLoading(true)
                                            .showImageForEmptyUri(R.drawable.com_facebook_profile_picture_blank_square)
                                            .showImageOnFail(R.drawable.com_facebook_profile_picture_blank_square)
                                            .showImageOnLoading(R.drawable.com_facebook_profile_picture_blank_square).build();

                                    //download and display image from url
                                    imageLoader.displayImage(profilePicUrl, Perfil, options);
                                    // Toast.makeText(getApplicationContext(), object.toString(), Toast.LENGTH_LONG).show();
                                    Log.e("object from fb>>", "object from fb>>" + object.toString() + "");
                                }
                            });
                    Bundle parameters = new Bundle();
                    parameters.putString("fields", "id,name,email,gender, birthday,picture.width(300)");
                    request.setParameters(parameters);
                    request.executeAsync();
                }
                @Override
                public void onCancel() {
                    Log.e("dd", "n" + "login de Facebook cancelado");
                }

                @Override
                public void onError(FacebookException e) {
                    Log.e("dd", "n" + "error de inicio de sesión de Facebook" + e.toString());
                }
            });
        } else {

            Toast.makeText(getApplicationContext(), getResources().getString(R.string.no_internet_conexion), Toast.LENGTH_LONG).show();
        }

    }

}

Gestionarfacebook.java

package com.androfast.pc.apploginfacebookimagen;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.DialogInterface.OnClickListener;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;

import java.io.File;


public class GestionarFacebook {

    public static File file = null;
    public static File dir = null;
    public static File root = null;
    Dialog alertDialog;

    public static void AboutBox(String Msg, Context con) {
        new AlertDialog.Builder(con).setTitle(con.getResources().getString(R.string.alert)).setMessage(Msg)
                .setPositiveButton(con.getResources().getString(R.string.ok), null).show();
    }

    public static void AboutBoxWithFinishActivity(String Msg, final Context con) {
        new AlertDialog.Builder(con).setTitle(con.getResources().getString(R.string.alert)).setMessage(Msg)
                .setPositiveButton("OK", new OnClickListener() {

                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        // TODO Auto-generated method stub

                        ((Activity) con).finish();
                        dialog.dismiss();
                        //((Activity) con).finish();

                    }
                }).show();

    }




    public static boolean comprobarInternet(Context ctx) {

        NetworkInfo informacion = (NetworkInfo) ((ConnectivityManager) ctx
                .getSystemService(Context.CONNECTIVITY_SERVICE))
                .getActiveNetworkInfo();

        if (informacion == null || !informacion.isConnected()) {
            return false;
        }
        if (informacion.isRoaming()) {

            // aquí está la opción de roaming puedes cambiarla si quieres
            // deshabilita internet en itinerancia, o simplemente devuelve falso
            return false;
        }
        return true;
    }





}

Y con eso hemos culminado espero haya sido de su agrado.

CLIC PARA DESCARGAR

ANDROFAST

Hola soy Alex Céspedes fundador de ANDROFAST, programo algunas cosas por diversión, me gusta aprender cosas nuevas y estoy pendiente de todo lo que tenga que ver con tecnología. Este blog lo cree para todas las personas que tengan dificultades en la programación, para ser sincero nunca fui bueno y reprobé algunos cursos de programación, pero mis ganas de aprender pudieron más. SI YO PUEDO TU PUEDES ANIMO!

Deja una respuesta Cancelar la respuesta