Como agregar LOGIN de Facebook en cualquier APP

Tema en 'Programación & Programación Web' iniciado por El Naicos, 23 Sep 2015.

  1. El Naicos

    El Naicos Usuario Nuevo nvl. 1
    37/41

    Registrado:
    15 Jul 2015
    Mensajes:
    11
    Me Gusta recibidos:
    0
    Buenas compañeros, hace un tiempo estuve con la intención de hacer una app para smartphone. Todo bien hasta el momento que quise ingresarle un modulo de LOGIN, pero no quería que se estuvieran creando cuentas, así que intente hacer que los usuarios se registraran mediante el LOGIN de Facebook.
    Tuve mucho problemas por no poder lograr ese requerimiento, y así recurro al foro... con la esperanza que aparezca alguien con más experiencia que me pueda ayudar o guiar un poco ...

    PD: revise la pagina de desarrolladores de Facebook, pero no entiendo del todo bien.
    PD.2: si el tema ya estaba, no lo sabia :pucha:

    Saludos compañeros y gracias.
     
  2. cavoso

    cavoso Usuario Casual nvl. 2
    37/41

    Registrado:
    31 May 2008
    Mensajes:
    2.792
    Me Gusta recibidos:
    14
    en que estas desarollando y cual es el codigo que estas usando, para saber donde puede estar el error, supongo que tienes el id de la aplicacion de FB que tienes que crear para poder utilizar su API
     
  3. El Naicos

    El Naicos Usuario Nuevo nvl. 1
    1/41

    Registrado:
    15 Jul 2015
    Mensajes:
    11
    Me Gusta recibidos:
    0
    Estuve trabajando con Eclipse y luego me cambie a Android Studio, principalmente en java quería desarrollar la app.
    Supones bien, ya tengo mi aplicación en FB para poder utilizar las API's.
    el código de dicha app ya no lo tengo, lo perdi con mi disco duro :exhausto:.
    por eso quiero empezar desde 0, saber si es posible agregar el modulo de login a cualquier prototipo que pueda realizar más a futuro.
    Saludos
     
  4. cavoso

    cavoso Usuario Casual nvl. 2
    37/41

    Registrado:
    31 May 2008
    Mensajes:
    2.792
    Me Gusta recibidos:
    14
    pues lee la documentacion de FB, sale todo como hacer los logins, obtener los datos y etc, no es nada del otro mundo, fb te da todo el codigo base, tu solo tienes que modificarlo a tu gusto.
     
  5. pupasnake

    pupasnake Usuario Casual nvl. 2
    37/41

    Registrado:
    1 Jul 2009
    Mensajes:
    1.743
    Me Gusta recibidos:
    5
    Hola.

    revisa esto http://code.tutsplus.com/es/tutorials/quick-tip-add-facebook-login-to-your-android-app--cms-23837

    --------------------------------------------------------------------------------------------------------------------------

    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.
    [h=2]Requisitos Previos[/h] Antes de que comiences, asegúrate que tengas acceso a lo siguiente:

    [h=2]1. Registra tu Aplicación[/h] 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.
    [​IMG]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.
    [​IMG]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.
    [​IMG]Abre Settings en el sector izquierdo y da click en el botón Add Platform. De la ventana emergente, selecciona Android.
    [​IMG]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.
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    [/TD]
    [TD="class: code"]keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

    [/TD]
    [/TR]
    [/TABLE]


    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.
    [​IMG]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.
    [h=2]2. Agrega el SDK de Facebook a tu Proyecto.[/h] 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:
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    2
    3
    [/TD]
    [TD="class: code"]repositories {
    mavenCentral()
    }

    [/TD]
    [/TR]
    [/TABLE]


    Ahora puedes agregar el SDK de Facebook a tu proyecto como una dependencia compile. Agrega el siguiente código a la lista de dependencies:
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    [/TD]
    [TD="class: code"]compile 'com.facebook.android:facebook-android-sdk:4.0.0'

    [/TD]
    [/TR]
    [/TABLE]


    [h=2]3. Crea una Activity[/h] [h=3]Paso 1: Define el Layout (Maquetado)[/h] 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í:
    [TABLE]
    [TR]
    [TD="class: gutter"]01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    [/TD]
    [TD="class: code"]<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:padding="16dp"
    >

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/info"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:textSize="18sp"
    />

    <com.facebook.login.widget.LoginButton
    android:id="@+id/login_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    />

    </RelativeLayout>

    [/TD]
    [/TR]
    [/TABLE]


    [h=3]Paso 2: Crea la Clase[/h] 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.
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    2
    [/TD]
    [TD="class: code"]private TextView info;
    private LoginButton loginButton;

    [/TD]
    [/TR]
    [/TABLE]


    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.
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    [/TD]
    [TD="class: code"]private CallbackManager callbackManager;

    [/TD]
    [/TR]
    [/TABLE]


    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:
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    [/TD]
    [TD="class: code"]FacebookSdk.sdkInitialize(getApplicationContext());

    [/TD]
    [/TR]
    [/TABLE]


    Luego, inicializa tu instancia de CallbackManager usando el método CallbackManager.Factory.create.
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    [/TD]
    [TD="class: code"]callbackManager = CallbackManager.Factory.create();

    [/TD]
    [/TR]
    [/TABLE]


    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.
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    2
    3
    [/TD]
    [TD="class: code"]setContentView(R.layout.main_activity);
    info = (TextView)findViewById(R.id.info);
    loginButton = (LoginButton)findViewById(R.id.login_button);

    [/TD]
    [/TR]
    [/TABLE]


    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í:
    [TABLE]
    [TR]
    [TD="class: gutter"]01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    [/TD]
    [TD="class: code"]loginButton.registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
    @Override
    public void onSuccess(LoginResult loginResult) {

    }

    @Override
    public void onCancel() {

    }

    @Override
    public void onError(FacebookException e) {

    }
    });

    [/TD]
    [/TR]
    [/TABLE]


    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:
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    2
    3
    4
    5
    6
    7
    [/TD]
    [TD="class: code"]info.setText(
    "User ID: "
    + loginResult.getAccessToken().getUserId()
    + "\n" +
    "Auth Token: "
    + loginResult.getAccessToken().getToken()
    );

    [/TD]
    [/TR]
    [/TABLE]


    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:
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    [/TD]
    [TD="class: code"]info.setText("Login attempt canceled.");

    [/TD]
    [/TR]
    [/TABLE]


    Similarmente, agrega el siguiente código al método onError:
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    [/TD]
    [TD="class: code"]info.setText("Login attempt failed.");

    [/TD]
    [/TR]
    [/TABLE]


    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.
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    2
    3
    4
    [/TD]
    [TD="class: code"]@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    callbackManager.onActivityResult(requestCode, resultCode, data);
    }

    [/TD]
    [/TR]
    [/TABLE]


    [h=2]4. Agrega el ID de la aplicación de Facebook[/h] 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.
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    [/TD]
    [TD="class: code"]<string name="facebook_app_id">123456908761030</string>

    [/TD]
    [/TR]
    [/TABLE]


    [h=2]5. Edita el Manifiesto[/h] 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.
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    2
    3
    4
    5
    6
    [/TD]
    [TD="class: code"]<activity android:name="com.hathy.fblogin.MainActivity">
    <intent-filter>
    <action android:name="android.intent.action.MAIN"/>
    <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
    </activity>

    [/TD]
    [/TR]
    [/TABLE]


    Agrega el ID de la aplicación como meta-data.
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    2
    [/TD]
    [TD="class: code"]<meta-data android:name="com.facebook.sdk.ApplicationId"
    android:value="@string/facebook_app_id"/>

    [/TD]
    [/TR]
    [/TABLE]


    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.
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    2
    3
    4
    5
    [/TD]
    [TD="class: code"]<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" />

    [/TD]
    [/TR]
    [/TABLE]


    Finalmente, tienes que requerir android.permission.INTERNET para poder conectar a los servidores de Facebook.
    [TABLE]
    [TR]
    [TD="class: gutter"]1
    [/TD]
    [TD="class: code"]<uses-permission android:name="android.permission.INTERNET"/>

    [/TD]
    [/TR]
    [/TABLE]


    Advertisement



    [h=2]6. Compila y Ejecuta[/h] 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.
    [​IMG]Presionar el botón login te lleva a la página de Facebook que te pide ingresar y autorizar la aplicación.
    [​IMG]Después de ingresar exitosamente, el TextView desplegará el ID del usuario y el token de autenticación.
    [​IMG][h=2]Conclusión[/h] 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