Autenticación con Firebase - Segunda Parte: Twitter, Usuarios Anónimos y Diferentes Proveedores en una misma Cuenta

Toda la información oficial de Firebase la pueden encontrar aquí.

El código completo para este Post lo pueden encontrar en Github

Este Post crea una actividad independiente para cada tipo de autenticación. El código de esa aplicación lo pueden encontrar en la rama master del repositorio en Github.

También podrán encontrar una app que utiliza todos los tipos de autenticación en una misma actividad. Este código lo pueden encontrar en la rama app_completa.

En la primera parte de esta serie encontrarán cómo iniciar sesión con correo electrónico, Facebook y Google.

Introducción

En este Post, que es la segunda parte para utilizar autenticación con Firebase, veremos cómo iniciar sesión con Twitter, cómo tener usuarios anónimos y cómo poder utilizar varios proveedores para iniciar sesión con el mismo usuario.

Twitter

Para comenzar con la autenticación utilizando una cuenta de Twitter, necesitamos ingresar al sitio de Apps de Twitter y crear una nueva aplicación. Entrar a Apps Twitter y crear nueva app.

Nos pide llenar algunos datos. Agregamos un nombre para nuestra app, una descripción y un sitio web.

Una vez creada la app en Twitter, necesitamos obtener la API secret y la API key. Para esto, hay que ir a la pestaña Key and Access Tokens y obtener los valores. Hay que guardarlos para utilizarlos posteriormente.

Activar en la consola de Firebase

Una vez creada nuestra app en Twitter, podemos ir a la consola de Firebase y activar Twitter como opción para iniciar sesión. En la consola hay que ir a Autenticación, en el menú de la izquierda, y seleccionar la pestaña Método de Inicio de Sesión. Necesitamos habilitar Twitter y poner el API secret y API key obtenidos previamente.

En la parte de abajo del diálogo hay una URL de devolución de la llamada, parecida a my-app-12345.firebaseapp.com/__/auth/handler. Hay que copiarla e ir nuevamente al sitio de Apps de Twitter. Seleccionamos la pestaña de Settings y una vez ahí, hay que pegar este valor de URL en el campo Callback URL.

Agregar Twitter a la app en Android

Para agregar Twitter a nuestra app podemos utilizar Fabric. Fabric tiene varios productos para mejorar y ayudar en el desarrollo de apps. Una de estos productos es para agregar Twitter. Necesitamos crear una cuenta en Fabric, iniciar sesión y confirmar su correo electrónico.

Una vez creada y confirmada la cuenta hay que ir al sitio de Fabric para Android y seguir las siguientes instrucciones, que también pueden encontrar en el sitio.

Primero necesitamos agregar el plugin de Fabric a Android Studio. Este plugin nos ayudará ya que podemos tener acceso dentro de Android Studio, al código necesario para agregar Twitter. Podemos agregar plugins en Android Studio en File -> Settings.

Buscamos el plugin de Fabric for Android Studio en Browse Repositories y presionamos el botón de Install. Una vez terminada la instalación hay que reiniciar Android Studio.

Después de reiniciar Android Studio tenemos un ícono en la barra de herramientas para entrar a Fabric. Ahí podemos iniciar sesión con nuestra cuenta y podemos tener acceso al código e instrucciones para iniciar sesión con Twitter.

Una vez iniciada sesión en Fabric hay que crear una nueva app:

Seleccionamos nuestra organización, la cual configuramos al crear la cuenta en el sitio web, y le damos siguiente. Ahí nos aparecerán varias opciones, y seleccionaremos Twitter.

Damos clic en el botón de Install en la primera opción para instalar Twitter.

Nos va a pedir nuestra API secret y nuestra API key, si seleccionan la opción de que ya tienen una cuenta de Twitter. Al hacer esto nos aparecerán en esa ventana los cambios que tenemos que hacer a nuestro código.

Agregar SDK de Twitter

Para empezar, necesitamos agregar el repositorio https://maven.fabric.io/public en el archivo build.gradle del proyecto en la sección de buildscript:

repositories {
    jcenter()
    maven { url 'https://maven.fabric.io/public' }
}

En las dependencias del buildscript necesitamos agregar el siguiente classpath:

classpath 'io.fabric.tools:gradle:1.+'

También tenemos que agregar el repositorio en la sección de repositories:

repositories {
    maven { url 'https://maven.fabric.io/public' } // Para Twitter
    jcenter() // Para Facebook
    mavenCentral()
}

Ahora en el build.gradle de la app hay que aplicar el plugin después del plugin de com.android.application:

apply plugin: 'io.fabric'

Por último, hay que agregar la dependencia con el SDK de Twitter:

compile('com.twitter.sdk.android:twitter:2.2.0@aar') {
    transitive = true;
}

Necesitamos agregar un atributo meta-data a nuestro manifest. Este valor lo podemos obtener en la pantalla del plugin en la sección AndroidManifest.xml. Es importante que pongan directamente el valor de su Fabric API Key en el meta-data, sin utilizar un recurso String, ya que si utilizan un String, NO funcionará.

<meta-data
    android:name="io.fabric.ApiKey"
    android:value="fabric_api_key" />

Por último, en nuestra actividad IniciarSesionTwitterActivity.java, vamos a inicializar Fabric ANTES del setContentView(). Necesitamos proporcionarle una configuración con nuestra API Key y API Secret de Twitter.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    TwitterAuthConfig authConfig = new TwitterAuthConfig(getString(R.string.twitter_api_key), getString(R.string.twitter_api_secret));
    Fabric.with(this, new Twitter(authConfig));
    setContentView(R.layout.activity_iniciar_sesion_twitter);
}

En nuestro layout activity_iniciar_sesion_twitter.xml, necesitamos agregar el botón para iniciar sesión de Twitter:

<com.twitter.sdk.android.core.identity.TwitterLoginButton
    android:id="@+id/twitter_login_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"/>

Iniciando Sesión con Twitter

Una vez que configuramos Fabric estamos listos para iniciar sesión con Twitter. Las instrucciones las pueden encontrar en el plugin de Fabric en la opción de Login con Twitter.

Necesitamos agregar un botón de Twitter

private TwitterLoginButton botonInicioSesionTwitter;

Necesitamos obtener el botón de nuestro layout y agregar un Callback con el cual obtendremos la sesión de Twitter si el inicio de sesión fue exitoso, u obtendremos una TwitterException si hubo algún error. Si el inicio de sesión fue exitoso, procederemos a iniciar sesión con Firebase.

private void inicializarTwitter() {
    botonInicioSesionTwitter = (TwitterLoginButton) findViewById(R.id.twitter_login_button);
    botonInicioSesionTwitter.setCallback(new Callback<TwitterSession>() {
        @Override
        public void success(Result<TwitterSession> resultado) {
            iniciarSesionConFirebase(resultado.data);
        }

        @Override
        public void failure(TwitterException exception) {

        }
    });
}

También necesitamos el método onActivityResult() para que el botón pueda escuchar el resultado de cualquier actividad que él lanzó.

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

Iniciando Sesión con Firebase

El inicio de sesión con Firebase es similar a los casos anteriores. Necesitamos nuestro FirebaseAuth y el FirebaseAuth.AuthStateListener, inicializarlos, agregar el listener y quitarlo en el onStart() y onStop().

private void inicializarAutenticacion() {
    autenticacionFirebase = FirebaseAuth.getInstance();

    listenerAutenticacion = new FirebaseAuth.AuthStateListener() {
        @Override
        public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
            FirebaseUser usuario = firebaseAuth.getCurrentUser();
            if (usuario != null) {
                // El usuario inició sesión
            } else {
                // El usuario no ha iniciado sesión.
            }
        }
    };
}

@Override
public void onStart() {
    super.onStart();
    autenticacionFirebase.addAuthStateListener(listenerAutenticacion);
}

@Override
public void onStop() {
    super.onStop();
    if (listenerAutenticacion != null) {
        autenticacionFirebase.removeAuthStateListener(listenerAutenticacion);
    }
}

Por último, necesitamos crear una credencial utilizando el TwitterProvider y el token y el secret que obtenemos de la TwitterSession. Con esta credencial llamamos al método signInWithCredential() del objeto FirebaseAuth.

private void iniciarSesionConFirebase(TwitterSession sesionTwitter) {
    AuthCredential credential = TwitterAuthProvider.getCredential(sesionTwitter.getAuthToken().token, sesionTwitter.getAuthToken().secret);

    autenticacionFirebase.signInWithCredential(credential)
            .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
                @Override
                public void onComplete(@NonNull Task<AuthResult> task) {
                    if (!task.isSuccessful()) {
                       // Hubo algún error
                    }
                }
            });
}

Ahora ya podemos iniciar sesión con Twitter.

Al iniciar sesión nos pide autorizar nuestra app para utilizar nuestra cuenta de Twitter.

Una vez autorizada nuestra app, podemos iniciar sesión y podemos obtener los datos del usuario de Twitter.

Cerrar Sesión

Para cerrar sesión, necesitamos mandar llamar el método Twitter.logOut() además del ya conocido método autenticaciónFirebase.signOut().

private void cerrarSesion() {
    autenticacionFirebase.signOut();
    Twitter.logOut();
}

Usuarios anónimos

Firebase también provee la opción de crear usuarios anónimos, los cuales posteriormente pueden ser enlazados con alguna cuenta de algún proveedor.

Configuración en consola

Necesitamos entrar a la consola de Firebase [https://console.firebase.google.com] y entrar al proyecto adecuado. Una vez ahí, hay que ir a la sección de Autenticación y seleccionar la pestaña Método de Inicio de Sesión. Ahí podemos encontrar la opción de “Anónimo”, la cual necesitamos habilitar.

Inicializar Firebase

Al igual que los demás métodos para iniciar sesión, debemos obtener la instancia de FirebaseAuth y debemos de inicializar el listener de Firebase. Después, debemos de agregar el listener en onStart() y quitarlo en onStop().

private void inicializarAutenticacion() {

    autenticacionFirebase = FirebaseAuth.getInstance();

    listenerAutenticacion = new FirebaseAuth.AuthStateListener() {
        @Override
        public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {

            FirebaseUser usuario = firebaseAuth.getCurrentUser();
            if (usuario != null) {
                Toast.makeText(UsuariosAnonimosActivity.this, "Usuario: " + (usuario.isAnonymous() ? "Usuario anónimo" : usuario.getEmail()), Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(UsuariosAnonimosActivity.this, "Usuario sin sesión", Toast.LENGTH_SHORT).show();
            }
        }
    };
}

@Override
public void onStart() {
    super.onStart();
    autenticacionFirebase.addAuthStateListener(listenerAutenticacion);
}

@Override
public void onStop() {
    super.onStop();
    if (listenerAutenticacion != null) {
        autenticacionFirebase.removeAuthStateListener(listenerAutenticacion);
    }
}

En el momento en el que queramos autenticar anónimamente al usuario debemos de llamar el método de FirebaseAuth.signInAnonymously() y agregarle un listener que nos notifique cuando termina la autenticación y si ésta fue exitosa o no.

private void autenticarAnonimamente() {
    autenticacionFirebase.signInAnonymously()
            .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
                @Override
                public void onComplete(@NonNull Task<AuthResult> task) {
                    if (!task.isSuccessful()) {
                        Toast.makeText(UsuariosAnonimosActivity.this, "Hubo un error.", Toast.LENGTH_SHORT).show();
                    }
                }
            });
}

Posteriormente, se llamará el método onAuthStateChanged() del listener y tendremos un usuario anónimo.

Enlazar un usuario anónimo con una cuenta

Firebase nos da la oportunidad de enlazar una cuenta de usuario anónimo con su cuenta de Google, Facebook, Twitter y correo electrónico.

Una vez que el usuario inicia sesión, debemos utilizar un objeto AuthCredential para enlazar la cuenta. Para crear la credencial debemos utilizar alguno de los AuthProviders que tenemos disponibles, dependiendo del proveedor con el que se inició sesión:

• FacebookAuthProvider
• GoogleAuthProvider
• EmailAuthProvider
• TwitterAuthProvider

En este ejemplo, utilizamos una cuenta de Facebook, por lo que usaremos el FacebookAuthProvider. Necesitamos el token de acceso que nos da Facebook al iniciar sesión, y con este token podemos obtener la credencial.

private void enlazarCuentas(AccessToken tokenDeAcceso) {
    AuthCredential credencial = FacebookAuthProvider.getCredential(tokenDeAcceso.getToken());

    autenticacionFirebase.getCurrentUser().linkWithCredential(credencial)
            .addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
                @Override
                public void onComplete(@NonNull Task<AuthResult> task) {
                    if (!task.isSuccessful()) {
                        Toast.makeText(UsuariosAnonimosActivity.this, "Hubo un error.", Toast.LENGTH_SHORT).show();
                    }
                }
            });
}

Es importante mencionar que si quiere enlazar su usuario anónimo con una cuenta que ya esté en Firebase, recibirán un error.