vagacode

Me resulta muy difícil explicar que es Firebase. Hay muchas definiciones en la web pero no terminan de convencerme porque son demasiado rimbombantes:

En fin ... Firebase es una plataforma que ofrece apps multiplataforma con API integradas a SDK individuales para Android, iOS y JavaScript.

Básicamente, Firebase nos permite tener una base de datos (Realtime Database), un espacio donde alojar archivos (Storage) y un servidor (Hosting). La versión gratuita incluye el uso de todas esas herramientas pero, con restricciones; por ejemplo, la base de datos posee 1GB de espacio y admite hasta 100 conexiones simultáneas; el espacio disponible para alojar archivos es de 5GB y el servidor 1GB con un límite de transferencias de 10GB al mes.

Para no abrumar a nadie con cálculos: todo eso es mucho más que suficiente para cualquier proyecto mediano.

Creo que lo mejor es ir armando algunos ejemplos sencillos para tratar de entender para qué sirve y, desde ya, advierto que es un servicio MUY UTIL y MUY INTERESANTE que parece que ha llegado para quedarse.

Accedemos a Firebase usando nuestra cuenta de Google y luego hacemos click en Crear nuevo proyecto donde simplemente le damos un nombre cualquiera y aceptamos las condiciones:

Ahora, necesitamos que nos de los datos básicos así que hacemos click en Añade Firebase a tu aplicación web lo cual nos abrirá una ventana donde deberemos copiar el código que deberemos agregar en nuestras páginas:

<script src="https://www.gstatic.com/firebasejs/3.6.5/firebase.js"></script>
<script>
	var config = {
		apiKey: "xxxxxxxxxxxxxxx",
		authDomain: "xxxxxxxxxxxxxxx.firebaseapp.com",
		databaseURL: "https://xxxxxxxxxxxxxxx.firebaseio.com",
		storageBucket: "xxxxxxxxxxxxxxx.appspot.com",
		messagingSenderId: "xxxxxxxxxxxxxxx"
	};
	firebase.initializeApp(config);
</script>

El punto central de Firebase que es lo que lo vuelve una herramienta original es que nos da la posibilidad de reconocer y administrar usuarios tal como se haría con un lenguaje como PHP pero, utilizando sólo JavaScript por lo que se adapta perfectamente a cualquier sistema.

Para establecer la identidad de los usuarios, registrarlos y permitir el intercambio de datos, antes que nada debemos definir nuestros propios límites ya que nos proporcionan distintas alternativas que podemos combinar a gusto.

El sistema guarda esos datos de manera segura y nadie debe preocuparse demasiado; ni nosotros, ni nadie puede acceder a datos sensibles como las contraseñas o datos privados. Esto es lo que hace Firebase Authentication, utilizando servicios como OAuth de distintos proveedores como Facebook, Twitter y el mismo Google.

Una vez que ingresamos en la consola abrimos nuestro proyecto y a la izquierda se nos mostrarán las distintas herramientas . Haremos click en Authentication para inicializarla. En esa primera pantalla es donde se mostrarán los datos de los usuarios registrados y, por defecto, no habrá nada porque debemos configurarlo:

Firebase permite que los usuarios se registren utilizando Google, Facebook, Twitter o GitHub pero también mediante un email y contraseña. Además, si lo deseamos, admite el registro de usuarios anónimos e incluso, el uso de algún sistema de autenticación personalizada.

Lo más simple es usar el login via Goggle ya que no requiere nada extra. Para los otros proveedores debemos autorizar esto en las respectivas aplicaciones algo que no es complicado pero requiere más pasos.

Nos falta un paso más, establecer el dominio o subdominio de nuestro sitio así que en Dominios de redireccionamiento de OAuth usamos el botón Añadir dominio y escribimos la dirección o direcciones que habilitaremos.

Ahora sí, aunque hay muchos detalles extras que podríamos configurar, ya estamos listos para usar Firebase así que creamos una página cualquiera y agregamos el código que habíamos copiado previamente al head y unas cuantas etiquetas al body para ver qué pasa:

<div id="contenedor">
	<div id="header">
		<h1>Firebase Demo Login</h1>
		<div id="logintest" class="infotest" style="display: none;">
			<p>el usuario no está registrado</p>
			<button>ingresar con Google</button>
		</div>
		<div id="logouttest" class="infotest" style="display: none;" uid="">
			<img src="">
			<p>bienvenido <span></span></p>
			<button>cerrar sesión</button>
		</div>
	</div>
	<div id="contenedor-inner">
	</div>
	<div id="footer">
	</div>
</div>

En este ejemplo, sólo tenemos dos elementos que inicialmente están ocultos; en uno habrá un botón para iniciar sesión con Google y en el otro un botón para cerrar la sesión. La idea, entonces, es que se muestre uno u otro dependiendo si el usuario ya se ha registrado previamente o no.

Para saber esto, vamos a crear un observador, una función que leerá permanentemente el estado del usuario y se activará cuando cambie así que empezaremos a agregar nuestro código que utiliza la librería jQuery:

window.onload = function(){
	firebase.auth().onAuthStateChanged(function(user){
		if(user){
			 // el usuario está logueado
			mostrarUsuario(user); // mostraremos sus datos y el botón de cerrar sesión
		} else {
			 // el usuario NO está logueado
			$('#logintest').show(); // hacemos visible el botón de iniciar sesión
		}
	});
}

Cuando un usuario inicia sesión por primera vez, se nuestra una ventana de autorización y queda registrado en nuestro proyecto; de ahí en más podemos identificarlo cada vez que regrese.

Ahora, las funciones de los botones que son similares:

// el botón para iniciar sesión
$(document).on('click', '#logintest button', function(){
	var provider = new firebase.auth.GoogleAuthProvider();
	firebase.auth().signInWithPopup(provider).then(function(result){
		$('.infotest').toggle(); // permutamos la visibilidad de los botones
	}).catch(function(error){
		alert('ERROR LOGIN'); // algo falló
	});
});

// si usaramos Facebook, Twitter o GitHub sería lo mismo, solo cambiaría el proveedor:
// var provider = new firebase.auth.FacebookAuthProvider();
// var provider = new firebase.auth.TwitterAuthProvider();
// var provider = new firebase.auth.GithubAuthProvider();

// el botón para cerrar sesión
$(document).on('click', '#logouttest button', function(){
	firebase.auth().signOut().then(function() {
		$('.infotest').toggle(); // permutamos la visibilidad de los botones
	}, function(error){
		alert('ERROR LOGOUT'); // algo falló
	});
});

Hay que recordar que la primera función que agregamos es algo que se ejecuta de modo permanente por lo tanto, al hacer click en cualquiera de los dos botones, inmediatamente cambiará el estado del usuario y se ejecutará el observador. Allí es donde recibimos los datos del usuario en un objeto que en este caso se llama user y tiene mucha información aunque para nosotros, los más relevantes son pocos:

uid identificador único del usuario
displayName es el nombre del usuario
email la dirección de correo
photoURL la dirección url de su avatar

Es con esos datos que creamos la función mostrarUsuario():

function mostrarUsuario(elUSUARIO){
	$('#logouttest').attr('uid',elUSUARIO.uid);
	$('#logouttest img').attr('src',elUSUARIO.photoURL);
	$('#logouttest span').text(elUSUARIO.displayName);
	$('#logouttest').show();
}

Ahora ... probemos:

ver en GitHub