CursosEmpresasBlogLiveConfPrecios

Configurando autenticación con Firebase

Clase 22 de 36 • Curso de React Native 2016

Clase anteriorSiguiente clase
Resumen

Ya tenemos al usuario que está logueado en nuestra aplicación, pero ahora queremos poder guardar las interacciones que hagan utilizándola: comentarios y likes.

Firebase es un conjunto de servicios de Google que hacen mucho más sencillo agregar un backend a nuestra aplicación. Entre otras cosas ofrece: una base de datos en tiempo real, autenticación, cloud messaging, almacenamiento para guardar archivos… un montón de cosas que no son fáciles de desarrollar si queremos concentrarnos en el desarrollo de una aplicación nativa para móviles, incluso siendo desarrolladores con mucha experiencia. Firebase lo hace mucho más sencillo y por eso es que lo usaremos dentro de PlatziMusic.

Debemos entrar a la home de Firebase y hacer click en el botón de Get started for free (comienza gratis) y debemos ingresar nuestros datos de autenticación de Gmail.

A continuación creamos un nuevo proyecto y le colocamos un nombre.

Una vez en el dashboard (panel) de nuestra aplicaicón de Firebase uno podría sentirse tentado de hacer click en botón de integración de iOS o Android. Pero como estamos desarrollando nuestra app con React Native, podemos utilizar la integración web, que es mucho más sencilla y requiere menos pasos.

Al finalizar de crear todo lo necesario, nos muestra una ventana con las instrucciones a seguir para incluirlo en nuestro sitio web. Pero nosotros no tenemos un sitio web; tenemos una app móvil. Por eso es que sólo vamos a usar las líneas que están seleccionadas. Copiemos esas líneas en un nuevo archivo, luego van a ser útiles.

Podemos ver que en el enlace de Get Started with Firebase for Web Apps podemos encontrar en la pestaña de Node.js una forma más aproximada a cómo nosotros vamos a integrar Firebase en nuestro proyecto.

Para eso lo primero es instalar Firebase en nuestro proyecto:

npm install firebase --save

Una vez instalada la dependencia podemos importar firebase en nuestra vista de login, LoginView.js:

import * as firebase from "firebase";

Y debajo incluimos las líneas que habíamos copiado anteriormente con los datos correspondientes a tu aplicación:

var config = {
    apiKey: "AIzaSyDSxlKNdr4GZQjTZVo-8C_IKdHUKCJeHqM",
    authDomain: "platzimusic-57d2c.firebaseapp.com",
    databaseURL: "https://platzimusic-57d2c.firebaseio.com",
    storageBucket: "platzimusic-57d2c.appspot.com",
    messagingSenderId: "637626608564"
  };
  firebase.initializeApp(config);

Lo siguiente que vamos a hacer es configurar el servicio de autenticación de Firebase. El mismo se encargará de hacer el request a Facebook para obtener los datos del usuario y mantener la sesión del mismo. Tiene varias formas de hacerlo, nosotros usaremos el método de autenticación con el SDK de Facebook, ya que el otro método (FirebaseUI) está pensando para la web.
En los siguientes pasos para web encontraremos información de cómo implementar la autenticación con distintos proveedores (Facebook, Github, Twitter, etc). Si vamos a Facebook Login podremos ver cómo integrar el login con Facebook dentro de nuestro proyecto.

Para continuar, debemos ir al sitio de desarrolladores de Facebook para copiarnos el App ID y el App Secret de nuestra aplicación. Para obtener este último debemos ingresar nuestra contraseña de Facebook. Estos datos debemos colocarlos en la consola de Firebase de nuestro proyecto, en la parte de Autenticación, habilitando el método de autenticación de Facebook.

Confirugacion de Facebook en Firebase

Debemos copiar la URL que nos proporciona Firebase y pegarla en el panel de administración de nuestra app de Facebook en el sitio de desarrolladores, agregando un producto que se llama Inicio de sesión con Facebook.

Una vez habilitado Facebook en Firebase, vamos a volver a nuestro proyecto para agregar la autenticación de usuarios dentro de la app.

Antes de navegar al root (la pantalla principal de nuestra app) queremos crear un usuario en Firebase con los datos de Facebook, usando el accessToken, es decir crear un usuario en Firebase utilizando las credenciales que ya tenemos.

Crearemos un método authenticateUser(accessToken) donde pondremos el siguiente código para crear el usuario:

auth.signInWithCredential(credential).then(function(user) {
  console.log("Sign In Success", user);
  var currentUser = user;
  // Merge prevUser and currentUser accounts and data
  // ...
}, function(error) {
  console.log("Sign In Error", error);
});

Es importante que el accessToken sea de un tipo en particular, en este caso tiene que ser un FacebookAuthProvider. Para eso, requerimos esa clase (o tipo):

const { FacebookAuthProvider } = firebase.auth

Y creamos la credencial utilizando esa clase (o tipo):

const credential = FacebookAuthProvider.credential(accessToken);

Debemos declarar la variable auth asignándole el valor de firebase.auth(). Podemos llamarla también firebaseAuth para hacerlo más claro:

const firebaseAuth = firebase.auth();

Probamos de ejecutar nuestro código y hacemos login con nuestro usuario de Facebook.
Si todo va bien deberíamos ver el usuario creado en la parte de Autentitación en nuestra consola de Firebase.

Ahora hagamos algo con el usuario creado dentro de nuestra aplicación, guardémoslo en el estado del componente LoginView usando sus credentials:

this.setState({ credentials });

Y, como siempre debemos inicializar el estado de nuestro componente:

state = {
    credentials: null
}

Para no tener que loguearnos y desloguearnos todo el tiempo podemos valernos del método componentWillMount de la siguiente manera:

componentWillMount() {
    this.authenticateUser();
}

Y nuestro método authenticateUser debe verse así ahora:

authenticateUser() {
    AccessToken.getCurrentAccessToken()
      .then(credentials => {
        if (!credentials) {
          return null
        }

        const credential = FacebookAuthProvider.credential(credentials.accessToken)
        return firebaseAuth.signInWithCredential(credential)
      })
      .then(credentials => {
        this.setState({ credentials })
      })
      .catch((error) => {
        console.log("Sign In Error", error);
      })
  }

Y su llamada en handleLoginFinished queda así de simple:

this.authenticateUser();

Así podemos mostrar el nombre del usuario que inició sesión:


    {this.state.credentials && this.state.credentials.displayName}

Y agregar un botón para continuar a la vista principal:

Y su método handleButtonPress, muy sencillo con la navegación hacia la pantalla principal:

handleButtonPress = () => {
    Actions.root()
  }

De esta manera queda el login con Facebook integrado con Firebase y ahora podremos empezar a relacionar acciones como hacer like o comentar en algún artista a un usuario en particular en nuestra app.

Si tienes dudas, puedes descargar los archivos finales en la pestaña de archivos de este video.