Manual Firebase

Manual de Firebase
http://desarrolloweb.com/manuales/manual-firebase.html
Pgina 1 de 78
Manual de Firebase
Introduccin: Manual de Firebase

En este manual vamos a conocer Firebase, servicio de Google que nos proporciona un backend ya listo
para el desarrollo de aplicaciones web y apps para dispositivos. Con Firebase podemos realizar un desarrollo
acelerado de aplicaciones, ya que no necesitamos desarrollar la parte del servidor. Este tipo de servicios de
computacin en la nube se conoce como BaaS (Backend as a Service) en el que la tarea principal para el
desarrollo backend ser la configuracin, en vez de la programacin.
Firebase ofrece numerosos servicios, entre los que se encuentra una base de datos en tiempo real, sistema
de login de usuarios, notificaciones, almacenamiento de archivos, hosting, analtica, etc.
Firebase es compatible con la web, mediante programacin Javascript y con numerosas libreras para
trabajar en sistemas diversos como AngularJS, React o Polymer. Pero tambin es compatible con
dispositivos iOS y Android, as como -por medio de un API REST- en cualquier otra plataforma o
tecnologa que deseemos trabajar.
Este servicio "Backend as a Service" nos ofrece varias piezas que vamos a describir y usar en el manual,
necesarias para cualquier tipo de aplicacin. Te las ofrecen listas para que solo tengas que configurar y
comenzar a usar, de modo que el desarrollo de aplicaciones se realiza de una manera mucho ms rpida.
En este manual comenzamos con el trabajo con Firebase en Javascript, y pretendemos abordar otras
tecnologas de desarrollo en breve.
Encuentras este manual online en:
Pgina 2 de 78
Manual de Firebase
Autores del manual

Las siguientes personas han participado como autores escribiendo artculos de este manual.
Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formacin online
EscuelaIT. Comenz en el mundo del desarrollo web en el ao 1997,
transformando su hobby en su trabajo.
Pgina 3 de 78
Manual de Firebase
Primeros pasos con Firebase

En estos artculos veremos cmo dar los primeros pasos con Firebase, tanto para la versin antigua de
Firebase como para la versin nueva. El la nueva versin cambiaron algunas cosas, como el script de
inicializacin y una manera nueva de acceder a los servicios ofrecidos por Firebase. Te lo explicamos todo
para que no te pierdas cuando ests comenzando.
Introduccin a Firebase
Servicio capaz de proveernos de un Backend en la nube con una fuente de datos en tiempo real y
libreras para acceder a ella desde aplicaciones web, iOS y Android.
Firebase es un claro ejemplo de las posibilidades de desarrollo en la nube. A partir de un servicio web nos
ofrecen la posibilidad de programar aplicaciones con datos que se sincronizan en tiempo real a travs de
mltiples dispositivos, evitando muchas de las tareas engorrosas en las que tendramos que dedicar tiempo
al programar.
Para que nos entendamos, es bsicamente una base de datos remota, alojada en la nube y capaz de ser
accedida desde navegadores y apps para dispositivos, que tiene como principal caracterstica que responde
en tiempo real a los cambios realizados en los datos. En la prctica, mediante Firebase podemos escribir
datos en una base de datos y que stos datos se comuniquen a todos los clientes conectados a es misma
fuente de datos.
ACTUALIZACIN: Este artculo se refiere a la versin anterior de Firebase. Muchas de las cosas que se mencionan han
cambiado en mayo de 2016, puesto que han renovado el servicio de manera considerable, agregando nuevas y asombrosas
funcionalidades para facilitar el desarrollo de aplicaciones sin necesidad de programar el backend. Todo esto lo explicamos en el
artculo sobre las nuevas caractersticas de Firebase.
Si accedes a la pgina de inicio de firebase vers una animacin de lo que sera una aplicacin en tiempo real.
En ella cualquier actualizacin enviada a travs de la web o un mvil se traslada a cualquier otro navegador
o dispositivo que est accediendo a la aplicacin. Lo bueno es que esa comunicacin se realiza de manera
interna en Firebase sin que el programador tenga que intervenir para nada.
Pgina 4 de 78
Manual de Firebase
Firebase cuenta con una serie de libreras mediante las cuales podemos conectarnos y mantenernos suscritos
a los cambios de los datos, compatibles con los sistemas ms comunes como son iOS, Android y Web, pero
tambin a varios lenguajes de programacin del lado del servidor como podran ser Python o PHP.
El otro servicio que Firebase nos ofrece principalmente es el de la autenticacin, de modo que podremos
realizar login en el sistema y crear aplicaciones multiusuario sin tener que programar toda la parte de la
autenticacin. Permite login con usuario y clave, as como con distintos conectores sociales como
Facebook, Twitter, Google, etc.
Con todo, Firebase nos ofrece la posibilidad de realizar aplicaciones de funcionalidades avanzadas
programando solamente la parte del lado del cliente. En otras palabras, nos permite programar una
aplicacin centrndonos nicamente en la parte del frontend, dejando el backend gestionado por completo
con Firebase.
Cmo iniciar con Firebase

Para iniciar un proyecto con Firebase tenemos que registrarnos en el servicio. Es gratuito siempre que
nuestra aplicacin est en fase de desarrollo. Cuando queramos poner el proyecto en produccin tendremos
que suscribir un plan, con valores a partir de los 5 euros mensuales.
Por tanto, para comenzar a probar Firebase no tenemos que invertir ms que nuestro tiempo. Al entrar en
el sistema se nos ofrece la posibilidad de usar una aplicacin creada para nosotros de prueba, con un
nombre aleatorio, o crear una nueva aplicacin con el nombre que nosotros deseemos.
Una vez creada nuestra aplicacin podemos administrarla desde un panel de control que nos ofrece las
opciones que resumimos a continuacin:
Data: nos ofrece el acceso para visualizar y editar nuestro modelo de datos. Bsicamente lo que
Pgina 5 de 78
Manual de Firebase
editamos es un JSON, ya que el sistema de Firebase es de base de datos documental.

Security & Rules: Nos permite el acceso a una seccin donde podemos escribir las reglas de acceso a
los recursos dentro de Data, as como la validacin que se aplicar para decidir si se permite o no
una escritura de informacin.
Simulator: desde donde podemos simular accesos en diversas situaciones para verificar si tendran o
no permisos para realizar ciertas operaciones.
Analytics: Una serie de reportes estadsticos con los que podemos monitorar el estado de la
aplicacin y la cantidad de recursos que estn siendo destinados para su funcionamiento (usuarios
concurrentes, transferencia, etc).
Login & Auth: desde aqu se puede controlar cules son los mecanismos que estarn disponibles
para la autenticacin de usuarios, tanto email y clave como por redes sociales, junto con los datos de
configuracin.
Hosting: Inicialmente con una ayuda para aprovechar lo que sera un espacio de alojamiento donde
desplegar la app realizada. Una vez activado tambin se pueden controlar aqu las configuraciones
del hosting.
Secrets: por ltimo una pgina desde donde se administran claves del API de nuestra App que sern
utilizadas para accesos del lado del servidor y autenticacin por medio de JSON Web Tokens.
Hacer un Hola Mundo en Firebase

Haremos a continuacin lo que sera equivalente a un "Hola Mundo" en Firebase. Bsicamente vamos a
acceder a un dato que hay en nuestra base de datos y experimentar como las modificaciones de ese dato
repercuten en mi aplicacin que lo est mostrando al usuario. De hecho, comprobaremos que ese dato, una
vez modificado, se actualiza automticamente en todos los clientes conectados. Quizs parezca mucha
operativa pero Firebase ya te ofrece la mayora del trabajo listo sin que necesites preocuparte.
Comenzamos editando informacin de nuestra base de datos, creando un dato que podamos leer. En
prximos artculos mostraremos cmo hacer esto mediante el API de Firebase, as que de momento y para
facilitarnos las cosas, lo haremos desde la seccin "Data" del gestor de nuestra aplicacin. Te valdr para
hacer estas pruebas cualquier aplicacin que dispongas. Si la acabas de crear comprobars que la situacin
inicial de nuestros datos est con un valor "null", osea, vaco.
Vamos a agregar un nuevo dato con el icono "+" que aparece al lado de "null" cuando acercas el ratn a esa
rea de la pantalla.
Vers en seguida un formulario para asignar un nuevo juego de datos en tu aplicacin. Aqu debemos
rellenar los pares clave/valor que necesitemos introducir dentro del modelo de esta aplicacin. De
momento simplemente vamos a escribir una clave y un valor, pulsando luego el botn "Add".
Pgina 6 de 78
Manual de Firebase
Ahora tenemos un primer dato en nuestra aplicacin. Es simplemente una propiedad con un valor pero ser
suficiente para este ejemplo.
Instalar Firebase en un proyecto web

Para hacer funcionar a Firebase se tiene que cargar una librera Javascript que contiene el cdigo del API
que este sistema nos proporciona para acceder a los datos.
Lo ms cmodo es que la instales usando Bower con el correspondiente comando:
bower install firebase
Una vez descargadas las dependencias, vers el archivo firebase.js dentro de bower_components/firebase.
Nota: Seguramente ests familiarizado con esta operativa de gestin de dependencias, pero si no es as
accede al artculo de Bower.
Ahora en la pgina .html que quieras usar Firebase debes colocar el script firebase.js en la cabecera. Eso nos
permitir usar el API de Firebase.
Pgina 7 de 78
Manual de Firebase
<script src="bower_components/firebase/firebase.js"></script>
Acceso a los datos por referencia

Para acceder a informacin de nuestra aplicacin Firebase usa lo que se conoce como referencias. Son
enlaces con tu modelo de datos que apuntan a un nodo en concreto del JSON. A travs de esas referencias
podemos acceder a un documento completo o navegar por los hijos para acceder a otros nodos
dependientes. Para hacer todas estas operaciones de recorido de los datos Firebase nos expone una nutrida
API que iremos conociendo en diversos artculos.
Estas referencias se crean a travs de una llamada a la funcin Firebase(), indicndole como parmetro el
nodo de nuestro modelo que queremos referenciar. Los nodos estn compuestos por una ruta definida con
el nombre de tu aplicacin, algo como https://ejemplo.firebaseio.com y luego una ruta. Si no indicas
ninguna ruta simplemente acceders a la raz de tus datos y si especificas una ruta podrs acceder a un nodo
ms interior.
Para nuestro primer ejemplo vamos a indicar como referencia la raz del modelo de datos. Creamos esa
referencia con el siguiente cdigo Javascript:
var ref = new Firebase("https://juegosdemesa.firebaseio.com/");
Nota: Lgicamente, sustituirs "juegosdemesa" por el nombre de tu aplicacin en la cadena

"https://juegosdemesa.firebaseio.com/".
Sin embargo, aunque nuestra referencia apunte a la raz, puedo dirigirme a uno de sus hijos con el mtodo
child().
ref.child("appName")
Evento "value" para sincronizarme con el dato

En Firebase cuando accedes a una informacin puede tener un estado determinado, pero sin embargo al ser
una aplicacin en tiempo real, ese estado puede cambiar en cualquier instante. Firebase me avisar en el
mismo momento en el que se ha producido el cambio facilitndome el nuevo estado de manera automtica.
Por tanto, mientras que en otro tipo de sistemas consultaras un dato una vez, en Firebase debemos estar
preparados para los cambios posteriores.
Por eso para leer un dato lo que vamos a hacer es suscribirnos a un evento. Nada ms suscribirnos
obtendremos el valor actual y cada vez que el dato cambie se disparar ese mismo evento indicando el
nuevo valor alojado en ese dato. Igual que en libreras como jQuery, nos suscribimos a eventos con el
mtodo on(). El evento al que nos vamos a suscribir es "value".
ref.child("appName").on("value", function(snapshot){
Pgina 8 de 78
Manual de Firebase
console.log(snapshot.val());
document.getElementById("titular").textContent = snapshot.val();
});
El mtodo on() me permite suscribirme indicando el nombre del evento que me interesa, en este caso
"value" y la funcin que queremos registrar como manejadora del evento. En esa funcin recibiremos el
"snapshot" que es una instantnea del dato que tenemos en Firebase. Cuando cambie se disparar de nuevo
el mtodo recibiendo la siguiente instantnea.
Para acceder al valor de la instantnea usamos el mtodo val().
En este caso dentro del manejador de evento mostramos el valor por console.log() y luego usamos ese
mismo valor para cargarlo como contenido en un elemento del DOM que tiene el id "titular".
Conexiones por Sockets

En Firebase las conexiones se realizan mediante sockets, por eso es tan rpido en recibir los cambios que
hayan realizado en el modelo. Cuando un cliente abre una pgina donde se usa Firebase se mantiene abierto
un canal de comunicacin con el servidor bidireccional, que permite comunicarse desde el cliente al servidor
y desde el servidor a todos los clientes.
Para experimentarlo abre la pgina que acabas de programar. Por si no ha quedado claro lo que deberas
tener, te mostramos el cdigo completo.
Nota: Recuerda que debes abrir, siempre como norma habitual, los ejemplos de Firebase desde un servidor
web, igual que ocurre con los ejemplos de Javascript en general donde se usa Ajax o Web Components.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hola Firebase</title>
<script>
var ref = new Firebase("https://juegosdemesa.firebaseio.com/");
ref.child("appName").on("value", function(snapshot){
document.getElementById("titular").textContent = snapshot.val();
});
</script>
</head>
<body>
<h1 id="titular"></h1>
</body>
</html>
Una vez abierto en el navegador, desde el sistema de "Admin" de tu app Firebase en la seccin "Data",
simplemente cambia el dato que hay en el campo "appName" que habamos creado al principio. El cambio
debera trasladarse casi al instante hacia todos los navegadores que tuvieses visualizando en esa pgina. Si no
Pgina 9 de 78
Manual de Firebase
es as revisa los pasos anteriores y consulta el vdeo que encontrars un poco ms abajo.
Nota: Firebase tambin responde a las operaciones por medio de una interfaz "REST", como cualquier API
REST que puedas conocer. De hecho las conexiones mediante REST son las que utilizars desde lenguajes
de servidor como PHP o Python. Sin embargo, las comunicaciones por sockets son mucho ms rpidas
debido a que no tienen que hacer toda la operativa de una request al servidor con HTTP, con todas las
etapas del protocolo. El canal de comunicacin permanece abierto y los datos fluyen de un lado a otro sin
ms. Adems los sockets permiten una comunicacin que ahorra llamadas en aplicaciones al servidor en
tiempo real, porque el cliente no tiene necesidad de hacer constantes request para recuperar los datos que
hayan cambiado, sino que simplemente tiene que escuchar el socket, a la espera que Firebase le mande los
cambios cuando se estn produciendo.
Vdeo de introduccin a Firebase

Para facilitarte las cosas te contamos en vdeo todo este proceso de trabajo con Firebase que te hemos
relatado en el artculo, agregando consideraciones y consejos diversos.
En el vdeo podrs ver paso por paso todas las acciones para crear tu primer ejemplo con Firebase.
Esperamos que te parezca til y si te gusta no olvides darle al "me gusta".
Para ver este vdeo es necesario visitar el artculo original en:

http://desarrolloweb.com/articulos/introduccion-firebase-backend-nube.html
Este artculo es obra de Miguel Angel Alvarez
Fue publicado por primera vez en 28/01/2016
Disponible online en http://desarrolloweb.com/articulos/introduccion-firebase-backend-nube.html
Firebase 3
Novedades y primeros pasos en la nueva versin de Firebase, que nos trae una importante
cantidad de nuevos servicios para desarrollo de aplicaciones web, iOS y Android sin tener que
desarrollar la parte backend.
Durante las ltimas semanas venimos realizando diferentes vdeos sobre Firebase aqu en
DesarrolloWeb.com, en los que hemos podido conocer muchas de sus caractersticas. A lo largo del Manual
de Firebase encontrars muchos tips interesantes y descripciones de uso de su API.
Pero en esta ocasin nos hemos visto obligados a volver un poco hacia atrs, porque se ha presentado en
mayo de 2016 una gran revisin al sistema por la cual se ha ampliado considerablemente la cantidad de
cosas que seremos capaces de hacer desde aplicaciones Firebase.
Hasta ahora Firebase contaba con tres principales servicios:
Base de datos en tiempo real
Sistema de autenticacin
Hosting de archivos estticos
Pgina 10 de 78
Manual de Firebase
Y ahora se ha transformado en una completa suite de caractersticas y utilidades realmente impactante que s
resuelve la mayora de las necesidades que los desarrolladores tienen al crear las aplicaciones. Es una
tremenda actualizacin, de mucho inters, porque la mayora de las cosas que ahora se ofrecen venan
siendo demandadas por los desarrolladores durante los ltimos meses o aos.
Nuevos servicios de Firebase

Ahora Firebase nos ofrece nuevas caractersticas, de mayor o menor importancia. Algunas son para el
desarrollo de todo tipo de aplicaciones y otras estn mayoritariamente centradas en el desarrollo de apps
para mviles.
En mi opinin estas son las principales funcionalidades que ahora se han agregado:
Storage: Un sistema de almacenamiento de archivos de los usuarios. Los usuarios pueden subir
archivos desde el navegador y desde dispositivos, gracias al nuevo SDK, sin tener que tocar ni una
lnea de cdigo backend. Los archivos pueden cargarse sin importar las condiciones de red, en
background, y si una subida se interrumpe, se reanuda automticamente cuando vuelve la conexin,
continuando por donde se haba parado. Todo esto lo hace especialmente indicado para usuarios
con pobres conexiones de red. Adems usa Google Cloud Storage, por lo que la escalabilidad es casi
infinita.
Notificaciones: Ahora somos capaces de enviar notificaciones a los mviles del usuario, usando
servidores de notificaciones de Google.
Sistema de comprobacin de los correos de los registrados: Anteriormente no haba posibilidad de
confirmar los correos de los usuarios registrados y aunque esto depende del servicio de
autenticacin que ya exista, es una de las novedades ms demandadas.
Analtica: de uso de la aplicacin, principalmente enfocado al uso mvil.
Adems hay una serie de servicios adicionales que conoceremos si visitamos el nuevo website. Iremos
revisando en adelante todas esas caractersticas como Cloud Messaging, Remote Config, Test Lab, Crash
Reporting, App Indexing, Dynamic Links, Invites, AdWords y AdMov.
Tambin destaca una nueva escala de precios con una versin gratuita con ms generosas posibilidades, que
nos permite usar Firebase incluso en apps que estn ya en produccin, con su propio dominio
personalizado, etc.
Primeros pasos en el desarrollo para la web con Firebase

En nuestro manual de Firebase hemos invertido tiempo en explicar el desarrollo para la web con Firebase y
algunas cosas han cambiado, por lo que vamos a hacer de nuevo una pequea introduccin a las novedades.
Afortunadamente la mayora de los conceptos y modos de trabajo son los mismos.
Pgina 11 de 78
Manual de Firebase
Nueva consola: Ahora existe una consola totalmente renovada para la gestin de una app Firebase, a la
que le han agregado diversas nuevas utilidades para cubrir la configuracin de muchos nuevos servicios.
Sustituye al antiguo "dashboard" de Firebase y accedes desde el sitio web de Firebase.
Para crear una nueva aplicacin encontrars un botn bien visible.
En la ventana que aparece escribimos los datos de nuestro nuevo proyecto y al crearlo nos lleva
directamente a la administracin de esta nueva app.
Desde all encontraremos muchas nuevas opciones, acceso a la documentacin etc.
Aadir un proyecto a una aplicacin web: En la consola de administracin de una app encontramos
varios enlaces visibles fcilmente para poder aadir Firebase a una app Andorid, iOS o Web. Si pulsamos en
la parte web conseguimos los datos de nuestra app, en un script Javascript que podrs agregar a tu pgina.
El acceso a estos datos se hace con este icono:
En la caja de dilogo que veremos tenemos que copiar el cdigo de inicializacin de la app Firebase. Ese
Pgina 12 de 78
Manual de Firebase
cdigo debemos pegarlo en nuestro proyecto, justo antes de realizar cualquier tipo de operacin con
Firebase.
Una vez inicializada la aplicacin con este script seremos capaces de acceder al nuevo API de Firebase para
realizar las operaciones que sean necesarias para el desarrollo de nuestra app.
Services Firebase, novedades en el API

Dentro de lo que sera el API de Firebase la novedad principal que tenemos que comentar en estos
primeros pasos es que ahora todo el API est dividido en tres "services", por lo que respecta a la parte web.
Antes, si lo recuerdas, colgaba todo del mismo lugar y comenzbamos generando un objeto Firebase a partir
de una URL de nuestra aplicacin. Pero ahora, como decimos, est dividido en tres principales objetos, que
obtenemos por medio de tres mtodos que dependen del objeto Firebase.
firebase.auth(), nos devuelve un objeto sobre el que podemos acceder al API de Autenticacin.
firebase.storage(), nos permite acceder a un objeto para toda la nueva parte del servicio de
"Storage".
firebase.database(), accedemos a un objeto con toda la funcionalidad de la base de datos en tiempo
real (Realtime Database).
As pues, para poder acceder por ejemplo a nuestra base de datos, en estos primeros pasos, vamos a tener
que obtener el service correspondiente.
var db = firebase.database();
As estamos "cacheando" en una variable llamada "db" el service del acceso a la base de datos Firebase.
Pgina 13 de 78
Manual de Firebase
Luego, con este servicio podremos acceder al API de Firebase, en este caso para todo lo que respecta al
"realtime database", para hacer operaciones de lectura / escritura sobre la base de datos. Aqu ya cambia
poco sobre lo que se ha explicado en anteriores artculos.
Una operacin de escritura se puede realizar mediante el mtodo set(), pero antes tenemos que decir en qu
referencia de la base de datos queremos escribir.
db.ref('metadata').set({
app: 'videotutorial',
ver: '0.0.1'
});
Nota: Puedes encontrar mayores explicaciones en el artculo Escribir datos en Firebase. Es un artculo
en el que estamos usando el API antigua, pero te explica varios conceptos que son exactamente iguales
en esta versin de Firebase, junto con la descripcin y caractersticas del mtodo set() y otros que
tambin podemos usar para escribir en nuestra base de datos en tiempo real.
Lo que respecta a una lectura, se sigue realizando por medio de eventos, en este caso "value". Ese evento se
ejecutar en el primer acceso a la informacin y posteriormente cada vez que esa informacin cambie, para
ser notificados en tiempo real.
db.ref("metadata").on('value', function(snapshot){
});
Si ya conocas Firebase no tendrs problemas en entender este cdigo anterior. Si no lo conoces cabe decir
que la funcin manejadora del evento "value" recibe un "snapshot" que no es ms que la instantnea de un
dato en un momento dado. El dato que vamos a recibir est en la referencia "metadata". Recibimos el valor
del dato en el snapshot invocando al mtodo val(): snapshot.val().
Nota: Puedes acceder al artculo sobre el trabajo con colecciones de Firebase donde explicamos el
motivo del acceso para lectura a la base de datos de Firebase por medio de eventos. Nuevamente vers
que se usa el API antigua, pero las cosas siguen siendo bastante parecidas, excepto por lo que se est
mencionando en el presente texto.
Nuevas reglas de seguridad predeterminadas

Ojo tambin a la parte de la seguridad. El lenguaje con el que se escriben las reglas de seguridad sigue
siendo el mismo, pero las reglas configuradas de manera predeterminada en una app Firebase ha cambiado.
Esto es algo que detallamos basante en el video que encontrars a continuacin. No obstante cabe decir que
las nuevas reglas de seguridad con las que nace una app Firebase fuerzan a que, tanto para lecturas como
Pgina 14 de 78
Manual de Firebase
para escrituras, deba realizarse con un usuario correctamente autenticado.

Por eso, si ests probando las anteriores instrucciones de set() o el evento "value" para recuperar
informacin, apreciars que te arroja errores de permiso denegado. En este caso, solo para experimentar y
con cuidado de no mantener esas reglas en produccin, es solo cambiar las condiciones write y read para
poner los valores "true".
Insistimos, mira el siguiente video para mayores aclaraciones. Adems explicaremos ms cosas para reglas
de seguridad en breve.
Vdeo de novedades y primeros pasos con el nuevo Firebase

En el siguiente vdeo encontrars ms o menos lo que te hemos explicado en este artculo con datos
adicionales y comentarios que te vendr bien saber. Si tienes 20 minutos te recomendamos que lo veas.

http://desarrolloweb.com/articulos/nuevo-firebase.html
Conclusin
En siguientes artculos seguiremos explicando Firebase y los distintos servicios que ahora incluye.
Continuaremos el Manual de Firebase ya con las nuevas caractersticas y modos de uso de este excelente
servicio BaaS (Backend as a Service).
Nos agrada especialmente, porque vemos que el sistema Backend as a Service de Firebase representa una
seria apuesta de Google por la computacin en la nube y muestra que est de muy buena salud.
Esto es una excelente noticia para los desarrolladores tambin, porque ahora con Firebase sern capaces de
hacer muchas ms cosas sin tener que invertir tiempo en la programacin de la parte del backend.

Disponible online en http://desarrolloweb.com/articulos/nuevo-firebase.html
Pgina 15 de 78
Manual de Firebase
Base de datos en tiempo real

Te explicamos las bases de trabajo para el uso de uno de los servicios de Firebase, la base de datos en
tiempo real. En estos artculos exploramos el SDK para la web con Javascript, mediante los cuales podemos
acceder a los datos de la aplicacin, tanto para lecturas como escrituras.
Escribir datos en Firebase desde Javascript

Cmo realizar la escritura y modificacin de un dato de tipo objeto dentro de Firebase, usando
programacin para web con Javascript.
En este artculo explicamos cmo escribir datos en la base de datos en tiempo real que te ofrece Firebase.
Cubriremos tanto el modo de trabajo con Firebase 2, como con Firebase 3 (la nueva versin publicada en
2016). El motivo es que este artculo se escribi originalmente con Firebase 2 y ahora lo estamos
actualizando para Firebase 3. Ambos procedimientos estn divididos en bloques diferentes del artculo, para
no mezclar conceptos, aunque la mayora de las cosas son comunes en una y otra versin.
Debes estudiarlo despus de haber ledo la parte de introduccin a Firebase, que hemos publicado en el
artculo Introduccin a Firebase 3. Comenzaremos explicando la parte de escritura de datos con Firebase 3
y resumiremos la informacin bastante, para ser breves. Aunque, como esta operativa es similar a la que
venamos realizando en Firebase 2, puedes leer todo el artculo si necesitas afianzar ms el conocimiento.
Instalar Firebase 3
Esta parte ya la hemos comentado en el artculo de introduccin a Firebase 3, por lo que no repetiremos el
asunto, ya que se trata simplemente de copiar y pegar un snippet que tienes en la consola de tu app Firebase.
Solo como alternativa decir que puedes usar Bower, u otros gestores de paquetes, para alojar el script de
Firebase en tu proyecto.
bower install --save firebase
Pgina 16 de 78
Manual de Firebase
Nota: Aprende sobre la operativa de Bower en el artculo de introduccin a Bower.
Luego colocaremos el script de Firebase en nuestra pgina, de la descarga realizada con Bower:
Aunque ahora no entramos en ello, no te olvides a continuacin, ya en un script tuyo, de realizar la

inicializacin de la aplicacin Firebase con el snippet que encuentras en la consola. Insisto, todo esto est
explicado en el artculo de introduccin a Firebase 3.
Escribir datos en Firebase con Firebase 3

Como hemos explicado ya, el acceso al API para manejo de la base de datos de Firebase se consigue a travs
del servicio "database".
var databaseService = firebase.database();
A partir de este servicio tendr todas las funcionalidades que me permite el API de Firebase para el acceso a
la base de datos en tiempo real.
Ahora se trata de obtener una referencia al lugar donde deseamos escribir datos.
var referencia = databaseService.ref('testRef');
Para escribir datos con Firebase usas los mtodos set() o update() sobre una referencia. As escribes
justamente dentro de esa referencia aquella informacin que quieres que est all.
// escribo en esa referencia
referencia.set({
campoTest: 'valor del test',
ahora: new Date().getTime()
});
Nota: Un detalle, para no volverte loco en caso de error, es que para que este cdigo se ejecute
normalmente se necesitar dar permisos de lectura a esa referencia de la base de datos. Ms adelante en
el manual de Firebase encuentras informacin sobre las reglas de seguridad.
En la etapa de desarrollo puedes configurar unas reglas de seguridad ms permisivas de las que se
encuentran por defecto en las bases de datos de Firebase, permitiendo lectura y escritura a todo el
mundo. Esto ya lo hemos advertido tambin y explicado con ms detalle en el artculo de introduccin a
Firebase 3.
Pgina 17 de 78
Manual de Firebase
La diferencia entre set() y update() es que set() sustituye cualquier dato que haya en una referencia
anteriormente, mientras que update() lo actualiza. Dicho de otra manera, set() hace que se borre cualquier
informacin contenida en la referencia, poniendo la informacin nueva que se est seteando. Por su parte
update() hace lo que conocemos como un "merge", es decir, cualquier informacin existente se actualiza a la
informacin que se le est entregando y cualquier informacin que ya hubiera (y no se est actualizando en
el update), se mantiene.
Nota: Por favor, para ms informacin sobre las operativas de set() y update() lee el artculo hasta el
final, porque esto no ha cambiado y ya se haba explicado convenientemente con ejemplos para la
anterior versin de Firebase.
Trabajo con promesas de Firebase 3

En Firebase 3 se hace uso intensivo de los mecanismos que conocemos como promesas, que nos permiten
ejecutar cdigo como respuesta a diversas situaciones. Las promesas forma parte del estndar de ES6, pero
Firebase ya las implementan porque favorecen bastante la escritura y mantenimiento del cdigo, as que si ya
las conoces funcionan igual.
En el caso de una escritura de un dato en la base de datos las promesas nos sirven para escribir cdigo que
se ejecutar posteriormente al intento de escritura, pudiendo diferenciar entre un caso exitoso y un posible
error.
En concreto, el mtodo set() o update() nos devuelven una promesa, sobre la que podemos invocar tanto
un mtodo then() como un mtodo catch(). A then() le pasamos la funcin que tiene el cdigo que
deseamos ejecutar cuando la escritura se ejecut correctamente. A catch() le pasamos la funcin que se
ejecutar si esa escritura produjo un error.
Todo eso en cdigo se resume de la siguiente manera:
referencia.set({
campoTest: 'Otro valor del test',
})
.then(function() {
console.log('dato almacenado correctamente');
})
.catch(function(error) {
console.log('detectado un error', error);
});
Breves notas sobre el uso de referencias

Recuerda que los datos de la base de datos de Firebase se organizan en un rbol, algo parecido a lo que
conocemos como JSON. As, cuando ests trabajando con datos, unos pueden estar dentro de otros y otros
Pgina 18 de 78
Manual de Firebase
dentro de otros, para conseguir cualquier estructura de almacenamiento que necesites. Lo importante ahora
es que, a nivel de referencias, todos esos niveles de anidacin se separan mediante el carcter barra "/".
Por ejemplo, si tienes una lista de usuarios y cada uno tiene un identificador y una serie de datos como su
nombre o email, tendramos una estructura como esta:
users: {
iduser1: {
nombre: 'Miguel Angel Alvarez',
email: 'malvarez@desarrolloweb.com'
},
iduser2: {
nombre: 'Alvaro Martnez',
email: 'alvaro@escuela.it'
}
}
Si mediante Firebase necesito acceder a la lista de usuarios usar una referencia como esta:
var referencia = databaseService.ref('users');
Si ahora quiero acceder al primer usuario de la lista, entonces podr construir mi referencia expresando los
niveles de anidacin con la "/".
var referencia = databaseService.ref('users/iduser1');
Si quiero acceder nicamente al nombre del usuario primero, entonces mi referencia quedara as:
var referencia = databaseService.ref('users/iduser1/nombre');
Como alternativa, puedes navegar entre referencias por medio del mtodo child() del API de Firebase:
var referencia = databaseService.ref('users').child('iduser1').child('nombre');
referencia.set('Miguel Angel Alvarez Snchez');
En el siguiente cdigo puedes ver un ejemplo completo de uso de Firebase para escribir datos en la base de
datos en tiempo real.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Firebase Cliente Web</title>
</head>
Pgina 19 de 78
Manual de Firebase
<body>
<h1>Test con Firebase</h1>
<script>
// Inicializo Firebase
var config = {
apiKey: "AIzaSyAK6ZTPi-aPUoJhTggEtTW2csVzU9I371Y",
authDomain: "nuevo-firebase.firebaseapp.com",
databaseURL: "https://nuevo-firebase.firebaseio.com",
storageBucket: "nuevo-firebase.appspot.com",
};
firebase.initializeApp(config);
// accedo al servicio de trabajo con la base de datos en tiempo real

var databaseService = firebase.database();
// obtengo una referencia

var referencia = databaseService.ref('testRef');

referencia.set({
campoTest: 'valor del test',
});
// realizo uso de las promesas

referencia.set({
campoTest: 'Otro valor del test',
})
.then(function() {
console.log('dato almacenado correctamente');
})
console.log('detectado un error', error);
});
// obtengo una referencia

var referencia = databaseService.ref('users').child('iduser1').child('nombre');

referencia.set('Miguel Angel Alvarez Snchez');
</script>
</body>
</html>
Escribir datos en Firebase 2 y conceptos adicionales de inters para

desarrolladores Firebase
En esta segunda parte del artculo vamos a conocer el uso de dos mtodos del API de Firebase 2 para
escribir datos en la base de datos que nos ofrece el servicio. Sern los mtodos set() y update() que poseen
Pgina 20 de 78
Manual de Firebase
los objetos referencia.
Nota: La mayora de la informacin que encontrars a continuacin tiene validez tambin para Firebase
3, cambia solo el mtodo para obtener una referencia de la base de datos y el mtodo de indicar las
funciones callback a ejecutar ante los casos de xito y error.
Para entender lo que vamos a realizar es especialmente recomendable que comiences la lectura por el
artculo de iniciacin a Firebase, porque hay varios conceptos que vamos a dar por sabidos en esta ocasin.
A lo largo de este texto te explicaremos a introducir un objeto, con diferentes propiedades y valores, en
Firebase y luego cmo se puede actualizar para cambiar el estado de sus propiedades o insertar otras nuevas.
Obtener una referencia

Como debes saber, el primer paso para conectar con Firebase desde Javascript es obtener una referencia,
aparte de incluir el propio script de Firebase como se mencion en el artculo anterior. Para ello creamos un
nuevo objeto referencia ayudados por la funcin Firebase().
var ref = new Firebase("https://ejemplo.firebaseio.com/appData");
Esta operacin es siempre igual cuando se trabaja con Firebase, solo cambiar la URL de nuestra app y el
dato en concreto que quieras acceder con la referencia.
En tu base de datos crears cierto orden y en la jerarqua que tengas de elementos en el JSON tus datos se
encontrarn en un lugar u otro. En esta ocasin estamos accediendo a un documento que cuelga de la raz
llamado "appData".
Podrs apreciar que esta referencia nos lleva a un documento que no existe todava dentro de tu aplicacin
Firebase. Esto no es problema, no va a producir ningn error, ya que a Firebase no le importa que la
referencia te lleve a una direccin que est vaca. Adems dentro de poco insertaremos datos ah.
Mtodo set() para asignar un objeto a una referencia

Dada nuestra referencia, con el mtodo set() podemos asignarle un valor. Podra ser una simple cadena o un
nmero, pero tambin un objeto todo lo complejo que deseemos. Simplemente indicamos aquella
Pgina 21 de 78
Manual de Firebase
informacin que queremos asignar a la referencia como parmetro a set().

var obj ={
name: "Juegos de Mesa",
company: "EscuelaIT",
email: "contacto@escuela.it"
};
ref.set(obj);
En este cdigo primero hemos creado un objeto por medio de un literal de objeto Javascript y luego lo
hemos asignado a la referencia. Si lo ejecutas sobre tu aplicacin Firebase vers que se crea el juego de datos
sobre la referencia "appData".
Por si algo no queda claro, te proporcionamos el cdigo entero del .html con el que podras ejecutar esta
escritura de datos sobre la base de datos de Firebase.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Crear registros en Firebase</title>
<script>
var ref = new Firebase("https://juegosdemesa.firebaseio.com/appData");
var obj ={
};
ref.set(obj);
</script>
</head>
<body>
<h1>Ejemplo para escribir datos en Firebase</h1>
</body>
</html>
El mtodo set() siempre sobrescribe

Una cosa que debemos ser conscientes y que es fuente de errores comn cuando estamos iniciando en
Firebase es que set() sobreescribe cualquier cosa que haya en una referencia.
Por ejemplo, si mi aplicacin tiene datos en una referencia como los que se asignaron en el paso anterior:
appData: {
}
Pgina 22 de 78
Manual de Firebase
Y sobre esta referencia cargo ahora otro objeto:

var obj2 ={
email: "info@escuela.it",
language: "es"
};
ref.set(obj2);
El nuevo valor enviado con set() machacar por completo el objeto appData anterior. Por tanto despus de
la operacin el estado ser:
appData: {
language: "es"
}
Ni rastro de las propiedades antiguas "name" o "company".
Actualizar datos con update()

Si lo que queremos es que nuestro objeto no machaque al anterior, sino que lo actualice, usaremos el
mtodo update().
var obj2 ={
language: "es"
};
ref.update(obj2);
El mtodo update(), a diferencia de set(), no machaca lo que hubiera anteriormente en una referencia, sino
que hace un merge (fusin) de la informacin nueva con la vieja. Si en la referencia anteriormente haba un
dato que se est mencionando en el update (como "email" en este anterior cdigo), lo sobreescribe. Si el
atributo no se encontraba antes, simplemente lo crea con el valor dado.
Por tanto, update() lo usaremos tanto cuando necesitemos actualizar el valor de una propiedad de un objeto,
como cuando queramos crear nuevas propiedades de un objeto dejando intactas las anteriores.
En futuros artculos explicaremos otro mtodo interesante, llamado push(), que nos permite enviar
elementos, generalmente para crear colecciones de datos, a Firebase.
Vdeo explicativo de la escritura de datos en Firebase

Puedes experimentar estos dos mtodos en tu propia aplicacin Firebase para ir entendindolos mejor. A
pesar de estar haciendo cosas sencillas es normal que todava se te presenten algunas dudas al tratarse de un
nuevo sistema. Si es tu caso hemos preparado el siguiente vdeo.
Pgina 23 de 78
Manual de Firebase
En este videotutorial vers cmo creamos un objeto usando set() y cmo se actualiza nuestro juego de datos
en Firebase. Luego mostramos la diferencia entre hacer una operacin de update y una de set.
Por ltimo mostramos cmo se puede acceder a los datos de Firebase desde otra pgina web, que estar
suscrita a los eventos producidos cuando se cambie el valor de un dato, para actualizarlo en la pgina
automticamente.

http://desarrolloweb.com/articulos/escribir-datos-firebase-javascript.html
Disponible online en http://desarrolloweb.com/articulos/escribir-datos-firebase-javascript.html
Trabajo con colecciones en Firebase y Javascript

Aprendemos a crear colecciones de elementos dentro de Firebase, acceder a ellas y suscribirnos a
cambios en las colecciones, tanto si se generan nuevos elementos como si stos cambian.
En esta prctica con Firebase vamos a aprender a trabajar con colecciones de elementos, es decir, listas de
items que podamos tener en la base de datos bajo un campo. Haremos bsicamente un ejercicio en el que
insertaremos datos en una coleccin y luego otro ejercicio para mostrar esos datos, que a su vez tendr dos
grandes bloques: la operativa para mostrar nuevos elementos en la coleccin cuando sean creados y la
operativa para actualizar la pgina cuando se produzcan cambios.
Estamos empezando con Firebase, pero ya hay algunas cosas que hemos aprendido como son las
referencias y los eventos con los que suscribirnos a cambios en el modelo de datos. Basaremos las
explicaciones en ese conocimiento, por lo que si aun tienes dudas te recomendamos repasar el artculo de
iniciacin a Firebase.
Tambin vimos anteriormente cmo realizar operaciones de escritura y lectura de documentos, la diferencia
ahora es que no vamos a escribir y leer un documento, sino una coleccin. Por ejemplo, en tu base de datos
de Firebase podras tener un usuario con sus datos. Cada usuario es un "documento". Pero nuestra
aplicacin podr manejar un nmero indeterminado de usuarios, por lo que tendremos una coleccin de
usuarios.
En Firebase no hay arrays

Pgina 24 de 78
Manual de Firebase
Esto es un detalle importante de conocer previamente nos enfrentemos a esta prctica. Merece la pena verlo
con detalle detenidamente ms adelante, pero de momento simplemente lo vamos a mencionar para ir
directamente a la prctica.
Tenlo en cuenta, en Firebase no tenemos arrays. Por eso, aunque lo ms inmediato sera pensar que nuestra
coleccin de usuarios se encuentra en un array, lo cierto es que no va a ser as. La coleccin en Firebase est
compuesta por un objeto cuyas propiedades son el ndice de la coleccin y el valor es el objeto de cada item.
Lo vers con detalle en la siguiente imagen y en seguida practicaremos con ello.
Observa que cada juego est metido en un objeto. Cada uno de los objetos juego tiene lo que se llama un
identificador, que es una cadena alfanumrica muy rara como "-K980osTuGiK0aRZ9t_3". De este
identificador cuelga un objeto con los datos del item. Ten en cuenta estos identificadores generados
aleatoriamente por Firebase porque los utilizaremos ms adelante para nuestra operativa en la
programacin.
Mtodo push() para insertar un item en una coleccin

En Firebase cuando queremos insertar un item en una coleccin, y no nos importa que identificador se le
asigne, podemos usar push().
El mtodo push() genera un item con un identificador aleatorio y nos devuelve una referencia a ese item
generado. Sobre esa referencia devuelta podremos luego invocar el mtodo set() para cargar cualquier dato.
Pgina 25 de 78
Manual de Firebase
var ref = new Firebase("https://ejemplo.firebaseio.com/juegos");

var refItem = ref.push();
refItem.set({
propiedad: "Valor"
});
Esta operativa de generar el item con push() y luego invocar set() se puede reducir a un solo paso, enviando
a push() el dato que queremos asignar al item recin creado.
ref.push({
propiedad: "Valor"
});
Adems, como segundo parmetro, push() podra recibir una funcin callback que se ejecute cuando el dato
se haya guardado dentro de Firebase.
En el siguiente cdigo insertamos tres objetos juego sobre una referencia.
var juego1 = {
name: "Colonos de Catn",
author: "Klaus Teuber",
yearPublished: 1995
}
ref.push(juego1);
var juego2 = {
name: "Carcassonne",
author: "Klaus-Jrgen Wrede",
yearPublished: 2000
}
ref.push(juego2);
var juego3 = {
name: "Ticket to Ride: Europe",
author: "Alan R. Moon",
yearPublished: 2005
}
ref.push(juego3);
Acceso a elementos de una coleccin

Espero que recuerdes las explicaciones de los anteriores artculos en las que hablamos de la necesidad de
usar eventos para acceder a datos de Firebase, bsicamente porque los datos pueden cambiar con el tiempo
y Firebase te lo tiene que notificar. Seguimos en la misma necesidad ahora que trabajamos con colecciones.
En el caso que queramos acceder a varios item de una coleccin y realizar algo para cada uno de esos item,
como mostrarlo en pantalla, tenemos que usar el evento "child_added" sobre la referencia.
Pgina 26 de 78
Manual de Firebase
Este evento "child_added" se ejecuta cada vez que un objeto es aadido a una coleccin. De modo que se
disparar el evento cuando:
1. Una vez por cada item existente en la coleccin en el caso que estemos accediendo a una coleccin
por primera vez.
2. Posteriormente al primer acceso el evento se disparar una vez para cada item que se introduzca
dentro de la coleccin.
De modo que, para nuestra necesidad, acceder a los elementos de una coleccin, usaremos este evento, que
nos servir para recuperar los item actuales hacer cosas con cada item que pueda llegar a introducirse ms
adelante en la base de datos.
ref.on("child_added", function(snapshot){
//hacer cosas con cada snapshot
});
El manejador de eventos asociado a child_added recibe la instantnea del elemento actual. Si hay 10
elementos en la coleccin este manejador se ejecutar 10 veces y en cada ejecucin tendremos el item actual.
Ya solo nos quedara hacer cosas con ese snapshot.
Para la operativa te interesar conocer dos mtodos pertenecientes a los snapshots de Firebase:
val(): que nos devuelve el valor, el dato, ya sea un objeto o un dato simple.
key(): que nos devuelve el identificador de este item.
En el siguiente cdigo, para cada juego recibido, se muestran sus valores y llaves mediante console.log().
var ref = new Firebase("https://juegosdemesa.firebaseio.com/juegos/");
ref.on("child_added", function(snapshot){
console.log("El juego actual es ", snapshot.val());
console.log("El id actual es ", snapshot.key());
});
Podrs comprobar que se listan los elementos iniciales de la coleccin y, si ms adelante se agregan nuevos
elementos, se listarn igualmente.
Cmo suscribirse a cambios en los elementos

El evento que acabamos de conocer, "child_added", solo nos notificar de nuevos elementos agregados a la
coleccin. Pero sin duda ms pronto que tarde querrs saber cundo los elementos de una coleccin han
sufrido cambios. Eso lo consigues con el evento "child_changed".
Cada vez que un item en una coleccin que dependa de una referencia cambie, se invocar el manejador de
evento "child_changed". El cambio en el item puede ser en cualquiera de sus propiedades o en cualquiera de
sus hijos anidados.
El manejador recibe un snapshot igualmente, por lo que la operativa es similar a lo que acabamos de
Pgina 27 de 78
Manual de Firebase
explicar.
ref.on("child_changed", function(snapshot){
console.log("Detectado cambio en ", snapshot.key());
console.log("El nuevo valor es ", snapshot.val());
});
Vdeo con una prctica de lectura y escritura de colecciones

Para completar las explicaciones anteriores hemos creado un vdeo que esperamos pueda aclararte mucho
mejor toda la operativa de acceso a colecciones, tanto para lectura como escritura.
En este vdeo vers cmo se crean colecciones y se almacenan en la base de datos de Firebase. Luego
veremos cmo acceder a colecciones, para mostrar sus valores y suscribirse a los cambios que se produzcan,
tanto cuando se inserten nuevos item a la coleccin como cuando uno de los item sufra un cambio.
Esperamos que lo disfrutes.

http://desarrolloweb.com/articulos/trabajo-colecciones-firebase-javascript.html
Disponible online en http://desarrolloweb.com/articulos/trabajo-colecciones-firebase-javascript.html
Pgina 28 de 78
Manual de Firebase
Sistema de autenticacin de Firebase

A continuacin vamos a explorar las funcionalidades del sistema de autenticacin de Firebase. Es otro de
los servicios fundamentales del BaaS que nos permite loguear usuarios tanto con el tradicional mail/clave
como con conectores sociales de los principales proveedores: Facebook, Google, Twitter y Github.
Autenticacin en Firebase y Javascript por medio de usuario y password

Mecanismos para autenticacin de usuarios en aplicaciones bajo el servicio de Firebase, con
cdigo Javascript.
Firebase es un excelente complemento para desarrolladores que deseen realizar aplicaciones y no quieran
realizar por ellos mismos la parte que llamamos "backend". Uno de los servicios fundamentales que nos
ofrece es la autenticacin de usuarios, que vamos a introducir en este artculo.
Para el desarrollo de aplicaciones con Firebase contamos con un completo sistema, capaz implementar
todas las fases del proceso de autenticacin de usuarios en una web o aplicacin para dispositivos. Nos
referimos no solamente al hecho de indicar un usuario y una clave para poder hacer el login, sino a todo el
flujo de registro de usuarios, recuperacin de contraseas perdidas, login y logout del sistema, etc.
Firebase tiene diversos mecanismos de autenticacin, por medio del tpico par usuario / clave y por medio
de diversas redes sociales. Adems tiene otro sistema "custom" que nos permite derivar el proceso de
autenticacin a lgicas de negocio ms complejas que puedas tener en el backend tu aplicacin actual. En
este artculo abordaremos el proceso de registro y autenticacin por medio de email y contrasea.
Habilitar la autenticacin de usuarios por medio de email y password

Antes de comenzar a realizar ninguna otra accin debemos configurar nuestra aplicacin Firebase para que
permita autenticacin por medio de email y password. Esto se realiza desde el panel de administracin de tu
aplicacin, en el sitio web de Firebase.
Entrando en la aplicacin que estemos usando, tienes que ir a la seccin "Login & Auth" y luego a la
pestaa "Email & Password". Ah encontrars un checkbox etiquetado como "Enable Email & Password
Pgina 29 de 78
Manual de Firebase
Authentication" que deber estar marcado para permitir este modelo de autenticacin de usuarios.
Registro de usuarios en Firebase

Para abordar el sistema de autenticacin de Firebase comenzaremos explicando cmo se registra un usuario
dentro del servicio de Backend. Trataremos de realizar ejemplos sencillos para comenzar, usando las
alternativas ms elementales. Pero recuerda que siempre tienes la documentacin en el propio sitio de
Firebase, donde podrs encontrar ms informacin.
Para registrar usuario necesitamos invocar el mtodo createUser() sobre una referencia. La ruta de nuestra
referencia ser simplemente la raz de nuestra base de datos, es decir, la URL principal de nuestra aplicacin
Firebase, algo as como https://example.firebaseio.com/
var ref = new Firebase("https://example.firebaseio.com/");
Una vez tenemos nuestra referencia debemos construir un objeto usuario, en el cual colocaremos dos
propiedades: email y password.
var user = {
email: "malvarez@desarrolloweb.com",
password: "1234"
};
stas son las credenciales que usaremos tanto para registrar usuarios como para hacer el correspondiente
login, una vez que estn registrados. En el cdigo anterior has visto cmo crear este objeto usuario por
medio de un literal de objeto JavaScript, pero lo ms normal sera que ese objeto lo construyas por medio de
los datos recabados mediante un formulario.
Al mtodo createUser() le enviamos dos parmetros. En el primero indicamos el objeto usuario que
acabamos de construir y en el segundo indicamos una funcin callback, que nos permite ejecutar cdigo
cuando el intento de crear el usuario haya sido finalizado. Esta funcin callback recibe a su vez como
parmetro un posible objeto error. Decimos posible porque si no se produjo un error simplemente nos
llegar el valor "null". Si se produjo un error a partir de ese objeto podremos encontrar una descripcin del
problema que Firebase ha detectado.
Se ver mejor con el cdigo que encuentras a continuacin:
ref.createUser(user, function(error){
if(error){
console.log(error.code);
}else{
console.log("Tu usuario se ha registrado");
}
});
Autenticando usuarios mediante Firebase

Pgina 30 de 78
Manual de Firebase
Una vez que hemos registrado nuestro primer usuario podemos proceder a realizar un intento de
autenticacin con el mismo.
Para realizar el intento de autenticacion del usuario utilizamos el mtodo authWithPassword() sobre una
referencia a nuestra base de datos Firebase, igual que antes..
Nota: Recuerda que firebase implementa diversos mtodos de autenticacin de usuarios y nosotros
estamos viendo ahora el que nos permitira loguearnos por medio del usuario que se ha registrado en el
paso anterior. Para otros mecanismos se usan mtodos diferentes de authWithPassword(). Ms adelante
trataremos otros mtodos de autenticacin.
El mtodo authWithPassword() recibe como parmetro el objeto usuario con las credenciales de acceso.
var user = {
email: "malvarez@desarrolloweb.com",
password: "1234"
};
ref.authWithPassword(user);
Nota: Fjate que el objeto usuario "user" el mismo que habamos construido anteriormente. Volvemos a
repetir que lo normal no ser utilizar un literal de objeto, sino recibir los datos de autenticacin por
medio de un formulario.
El mtodo de autenticacin authWithPassword() tambin podra recibir como parmetro una funcin
callback para realizar acciones cuando se tiene resultado del intento de acceso del usuario, pero nosotros
ahora vamos a conocer otra va para ser notificados cuando se haya producido un cambio en el estado del
usuario (pasar de loguedado a no logueado o viceversa).
Definicin de un evento de cambio en el estado de autenticacin

Existen diversos mecanismos para saber si un usuario est logueado o no en una aplicacin Firebase.
Vamos a implementar en esta ocasin uno que permite estar notificados de cualquier cambio en el estado de
autenticacin del usuario, de manera asncrona.
Se trata de usar el mtodo onAuth(), que tambin pertenece a la referencia Firebase. Este mtodo recibe
como parmetro una funcin que nos permite ejecutar acciones cuando se ha producido un cambio del
estado de autenticacin del usuario. Veamos primero el cdigo de la invocacin de onAuth(), porque as
ser ms fcil entender cmo funciona.
ref.onAuth(function(data){
if(data){
console.log("El user est autenticado con identificador: ", data.uid);
Pgina 31 de 78
Manual de Firebase
}else{
console.log("no tengo usuario autenticado");
}
});
Como puedes ver, la funcin enviada como parmetro al mtodo onAuth() recibe a su vez un parmetro
que hemos nombrado en el cdigo como "data". Ese parmetro contiene los hipotticos datos de
autenticacin del usuario. Realmente pueden ocurrir dos cosas:
Si el usuario no est autenticado, simplemente recibiremos un null como valor de ese parmetro. En el caso
de que el usuario s estuviera autenticado en ese parmetro recibiremos los datos de autenticacin del
usuario que est correctamente logueado.
De entre todos los datos que se pueden consultar por medio del objeto de autenticacin hay uno muy
importante qu es el identificador del usuario. En Firebase cada usuario registrado tiene un identificador
nico y nosotros lo podemos consultar por medio de la propiedad "uid".
Nota: Con la declaracin de este evento onAuth() se ejecuta una primera vez la funcin indicada por
parmetro. Luego, en cada cambio autenticacin, se volver a ejecutar esa funcin. Por ello, aunque no
se realice ningn intento de autenticacin durante el uso de tu aplicacin, solo por haber definido este
evento onAuth(), siempre se ver el resultado de la ejecucin de la funcin por lo menos una vez.
Realizar logout de un usuario

Para realizar el logout de un usuario que se encuentra autenticado usamos siempre el mtodo unauth(), qu
depende tambin de la referencia a nuestra aplicacin Firebase.
ref.unauth();
Como resultado de la ejecucin de este mtodo, si hubiese un usuario autenticado en la aplicacin,

simplemente se realizar el cierre de su sesin. Con ello veremos que se ejecuta otra vez la funcin definida
para el evento onAuth().
Vdeo del proceso de autenticacin

Todo el proceso que has visto explicado En este artculo se encuentra descrito en un vdeo tutorial que
hemos publicado en YouTube. Si tienes 18 minutos te recomendamos ver el vdeo detenidamente porque
encontrars mucha ms informacin de la que hemos podido resumir en el anterior texto.
En el vdeo encontrars paso a paso la realizacin de un registro de usuario, cmo se puede ms tarde
autenticarse con las credenciales de usuario y cmo utilizar el mtodo onAuth() para ser notificados ante
cualquier cambio de estado del usuario que est visitando la pgina. Si el uso de onAuth() no ha quedado del
todo claro, es importante que veas el vdeo porque se realiza el proceso de login y logout en varias
situaciones, de modo que podremos ir viendo como onAuth() va notificando todos los cambios en la
autenticacin.
Pgina 32 de 78
Manual de Firebase

http://desarrolloweb.com/articulos/autenticacion-firebase-js-usuario-password.html
Disponible online en http://desarrolloweb.com/articulos/autenticacion-firebase-js-usuario-password.html
Autenticacin de usuarios con redes sociales en Firebase 3

Cmo autenticar usuarios en una aplicacin usando cuentas de Facebook, Twitter, Google o
Github, de una manera sencilla con Firebase.
Firebase nos entrega todo lo que necesitaramos para realizar una aplicacin sin tener que dedicarnos a
hacer la parte del backend. Entre los servicios de Backend la autenticacin de usuarios es una parte esencial
de todo backend y Firebase la gestiona de una manera muy simple para el desarrollador.
Como vimos en el ltimo artculo del Manual de Firebase, podemos loguear al usuario mediante usuario y
clave, pero tambin mediante diversos conectores de redes sociales, para que nuestro usuario pueda usar sus
cuentas de Facebook, Twitter, Google o Github para entrar en nuestra app, sin necesidad de crearse un
nuevo usuario. De esta ltima parte nos encargaremos en este artculo.
Actualizacin: En este artculo vamos a abarcar tanto el cdigo con Firebase 2 como el cdigo con
Firebase 3. Siendo los conceptos de autenticacin comunes a ambas versiones, as como a la mayora del
desarrollo para la web. Para que quede clara la organizacin de este artculo cabe decir que
comenzaremos con una serie de conceptos importantes sobre los sistemas de autenticacin. Luego
veremos ya el cdigo sobre cmo se implementan en Firebase, v2 y v3, dividiendo los apartados de
manera que quede clara la identificacin de cada cdigo y su correspondiente versin.
Administrar el servicio de autenticacin

Antes de poder autenticar a un usuario con redes sociales tenemos que realizar unas pequeas
configuraciones en la consola de Firebase. Estas configuraciones son propias para cada red social y no han
cambiado desde Firebase 2 a Firebase 3. La nica novedad que podrs apreciar es que han cambiado el
diseo de la consola, pero bsicamente los campos para configurar son exactamente los mismos. Por tanto,
este punto es comn para cualquier versin de Firebase.
En el panel de control de Firebase podemos administrar las alternativas de autenticacin de los usuarios de
Pgina 33 de 78
Manual de Firebase
la aplicacin. Tenemos que comenzar habilitando aquella autenticacin que se requiera, con la red social que
necesitemos. Para ello encontraremos un checkbox que deber estar marcado para permitir autenticar a los
visitantes en cada una de las redes que deseemos.
Adems tendremos que entregar las credenciales de la app creada en la correspondiente red social. Estas
credenciales las creamos desde la propia pgina de la red que deseemos. Generalmente existe un rea para
desarrolladores donde se pueden crear apps en esa red, asociadas a nuestro usuario.
El proceso de crear un App vara para cada caso. En general es algo rpido y no necesita aprobacin por
parte de la red social, simplemente la creas a travs de su pgina. Sin embargo el modo de actuar cambia con
cada red social que ests trabajando.
Todas al final te entregan dos cadenas que debes usar para configurar el servicio de autenticacin desde el
Dashboard de tu app en Firebase.
App Id: Es el id de tu aplicacin. Ese identificador es pblico, cualquiera lo puede ver.
App Secret: Esta es una llave de tu app, que se necesita para confirmar que t eres realmente el
dueo de esa app. Ese dato es privado y debera guardarse en un sitio seguro.
Nota: En la documentacin de Firebase est muy bien detallado el proceso de creacin de apps en cada
una de las redes sociales, por lo que de momento te recomendamos leerlo all. Ahora nos vamos a
centrar en el cdigo para autenticar usuarios y no tanto en la operativa para cada app de red social. Por
si te sirve, la operacin que necesitas hacer con la red social se llama autenticacin "oAuth".
El otro paso que no se nos puede olvidar es configurar la URL de redireccin oAuth. Esto es algo que te
informan en la consola de Firebase, que tiene una forma como https://tuapp.firebaseapp.com/__/auth/handler. Esta URL la copias desde la pgina de administracin de la app en
la consola de Firebase (seccin Auth / Mtodo de inicio de sesin / Red social deseada) y luego la tienes
que configurar en la pgina de administracin de la App generada en la red socia con la que quieras
autenticar.
Pgina 34 de 78
Manual de Firebase
Cmo funciona el proceso de autenticacin social

Antes de ver cdigo (que enseguida vers que es muy sencillo) vamos a explicar cmo funciona el sistema
de autenticacin social. Bsicamente sabes que cada usuario usar su propia cuenta de la red social.
Para establecer el login de una manera segura, el visitante escribir sus credenciales de acceso en una pgina
de la red social y no en tu propio sitio. Es decir, t, como dueo de una aplicacin, nunca vas a conocer la
clave de una cuenta de Facebook o Twitter o similares, sino que sta se introducir de manera privada en
dicha red social. Esto se hace as por razones obvias de seguridad.
Por tanto, en el proceso de autenticacin debe redirigir al usuario a la pgina de su red social y despus del
intento de acceso autenticado, se debe redirigir de vuelta a tu aplicacin con un resultado. En ese ir y venir,
pueden intervenir dos mecanismos. O bien la pgina de autenticacin en la red social se abre en un popup,
o bien se realiza una redireccin. Estos dos mecanismos se podran combinar incluso, de modo que si uno
de ellos no es posible de realizarse, se intente mediante el otro mecanismo.
Cdigo para la implementacin de una autenticacin con Facebook en Firebase 3

En la nueva versin de Firebase, lanzada en 2016, se cambi ligeramente la estructuracin del API de
autenticacin. Por tanto, a partir de este punto explicaremos el cdigo para Firebase 3. Ms adelante podrs
ver tambin el cdigo para Firebase 2.
Pgina 35 de 78
Manual de Firebase
Ya que estamos en Firebase 3, debemos comenzar inicializando nuestra aplicacin. No vamos a entrar en
este detalle ya que debe estar claro anteriormente. Si no es as, puedes leer el artculo de Introduccin a
Firebase 3.
Para la parte de autenticacin social debemos comenzar por configurar nuestro proveedor oAuth, (red
social Facebook, Twitter, Google o GitHub). Consta de dos pasos, uno en el que creamos el "provider"
adecuado y otro en el que podemos agregar "scopes". En el caso de Facebook, conseguimos el proveedor
con el siguiente cdigo:
var provider = new firebase.auth.FacebookAuthProvider();
A continuacin de manera opcional podemos indicar aquellos "scopes" sobre los que queremos que nos
autorice el usuario. El "scope" en resumen es el mbito de datos que queremos que la red social nos
proporcione sobre un usuario. stos aparecen en la ventana de login con la red social e indican al usuario
qu es lo que quiere nuestra aplicacin hacer con su cuenta de Facebook, Twitter o lo que sea. Por
supuesto, cada red social tiene una lista de posibles mbitos sobre los que podemos requerir permiso.
provider.addScope('user_friends');
Tiene dos mtodos principales para realizar autenticacin, por medio de un popup y por medio de una
redireccin. Son dos mecanismos que puedes usar dependiendo del navegador del usuario, sistema
operativo, etc. En principio casi siempre se usa popups, pero para los sistemas que no lo permiten se puede
dar la alternativa de login por redireccin. En la parte final de este artculo, cuando comenzamos a ver el
cdigo de Firebase 2, se explica con ms detalle la diferencia entre estas dos alternativas, popup o
redireccin.
Para el acceso al API de autenticacin de Firebase podemos comenzar accediendo al servicio de
autenticacin:
var authService = firebase.auth();
Una vez tienes el servicio de autenticacin, con la siguiente lnea de cdigo lanzaramos el proceso de login
con el provider generado anteriormente.
authService.signInWithPopup(provider)
Otra cosa que debes de saber es que la respuesta de la llamada a los mtodos de autenticacin de Firebase te
responde con una promesa. Debes ya saber algunas cosas sobre promesas, porque las hemos visto en
artculos anteriores. Bsicamente las promesas de Firebase funcionan como las promesas del propio ES6.
De este modo podramos ejecutar acciones tanto para un resultado de autenticacin positivo como para un
error de autenticacin.
Pgina 36 de 78
Manual de Firebase
.then(function(result) {
//todo correcto
console.log('autenticado usuario ', result.user);
})
// error de login
console.log('Detectado un error:', error);
});
Ejemplo completo de login social con Firebase 3

Ahora puedes ver toda una pgina donde se realiza el proceso de autenticacin con Facebook. Recuerda que
para que el cdigo funcione debes haber configurado correctamente tu app en Facebook, as como la
aplicacin en la consola de Firebase.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Firebase Cliente Web</title>
</head>
<body>
<h1>Login con Firebase</h1>
<button id="loginfacebook">Autenticar con Facebook</button>
<script>
// Inicializo Firebase
var config = {
apiKey: "AIzaSyAK6ZTPi-aPUoJhTggEtTW2csVzU9I371Y",
authDomain: "nuevo-firebase.firebaseapp.com",
databaseURL: "https://nuevo-firebase.firebaseio.com",
storageBucket: "nuevo-firebase.appspot.com",
};
// creo el provider de autenticacin

var provider = new firebase.auth.FacebookAuthProvider();
// opcionalmente modifico el scope

provider.addScope('user_friends');
// accedo al servicio de autenticacin

// evento para el botn de login con facebook

document.getElementById('loginfacebook').addEventListener('click', function() {
// autentico con Facebook
//todo correcto
Pgina 37 de 78
Manual de Firebase
console.log('autenticado usuario ', result.user);

})
console.log('Detectado un error:', error);
});
})
</script>
</body>
</html>
A partir de ahora, en este artculo encuentras el modo de login social con Firebase 2. En principio si ests en
Firebase 3 no hara mucha falta que lo leyeras, sin embargo, se explica con mucho ms detalle algunos
puntos interesantes, como el caso de los mecanismos de popup y redireccin, as como otros detalles que
quizs te convenga conocer.
Autenticacin con popup en Firebase 2

En este sistema saltar una ventana emergente. Es importante sealar que esas ventanas emergentes,
comnmente conocidas como popups, muchas veces son bloqueadas por los navegadores. Para evitarlo
generalmente es suficiente con lanzarla como resultado a la pulsacin sobre algn elemento de la pgina, ya
que los bloqueadores de popups no se activan cuando se trata de abrir la ventana emergente como respuesta
a un evento click.
Nuestro cdigo para realizar una autenticacin por medio de popup, con el usuario de una red social es
como este:
var ref = new Firebase("https://tuapp.firebaseio.com/");
ref.authWithOAuthPopup("facebook", function(error, authData) {
if (error) {
console.log("Fallo en el login!", error);
} else {
console.log("Autenticacin correcta. User: ", authData);
}
});
Como ves, se usa el mtodo authWithOAuthPopup() al que se le indica el conector social que se quiera
usar. En este caso es "facebook", pero el cdigo sera exactamente igual para el acceso con cualquier otra
red.
Luego se indica una funcin callback con las acciones a realizar cuando se produzca el intento de login del
usuario. Aqu puedes gestionar tanto errores de autenticacin como accesos permitidos.
Nota: Si quieres de manera asncrona estar informado cuando se produzca una autenticacin, el
mecanismo es por el mtodo onAuth() que vimos en el anterior artculo sobre Autenticacin por medio
de usuario y password. Esto es interesante porque te podra permitir prescindir de la funcin callback
para los casos de autenticacin correcta y es clave para el mtodo de autenticacin por redireccin, que
enseguida te comentamos.
Pgina 38 de 78
Manual de Firebase
Autenticacin con redirect en Firebase 2

Si lo preferimos, o para los navegadores que no permiten popup como Chrome para iOS, podemos realizar
el mecanismo de autenticacin usando una redireccin. El cdigo es prcticamente el mismo:
ref.authWithOAuthRedirect("twitter", function(error, authData) {
if (error) {
console.log("Fallo en el login!", error);
} else {
//nunca voy a llegar, porque el hay una redireccin
}
});
Solo cambia el nombre del mtodo authWithOAuthRedirect() y el tema del callback, que ser imposible de
ejecutar debido a que Javascript no recuerda el estado de nuestro script cuando se recibe la rediccin de
vuelta a nuestra app.
Nota: En este caso, ya que en la redireccin no se puede detectar el retorno, no se llegar a ejecutar la
funcin callback para el caso positivo. Por ello ser importante conocer el mtodo onAuth(), que es
donde detectaremos que el usuario consigui autenticarse correctamente.
Qu escoger, redireccin o popup

Si te preguntas qu escoger entre popups o redirecciones, la respuesta puede ser una combinacin de ambas,
ya que en unos navegadores estn permitidas unas y otras no, as como en el desarrollo de aplicaciones
hbridas donde a veces tenemos solo un mecanismo disponible.
Para implementar esta doble alternativa podemos hacer uso de una tcnica "fallback". Para ello detectamos
el fallo en la funcin callback entregada a authWithOAuthPopup() y en ese caso lanzamos el proceso de
rediccin con redireccin.
ref.authWithOAuthPopup("google", function(error, authData) {
if (error) {
if (error.code === "TRANSPORT_UNAVAILABLE") {
// lanzamos el proceso mediante el otro mecanismo
ref.authWithOAuthRedirect("google", function(error) { /* resto de tu cdigo */ });
}
});
Usuario autenticado correctamente

Cuando tenemos un usuario autenticado correctamente todas las redes sociales nos prestan diversos tipos
de informacin personal. En los siguientes pasos querrs recoger datos adicionales y almacenarlos en tu
Pgina 39 de 78
Manual de Firebase
base de datos.
Todos esos datos los encuentras a travs del objeto authData, que recibes tanto en el callback de las
funciones con las que autenticas, en onAuth() o en getAuth(). Funciona de manera similar al proceso
explicado con el login y password, pero en el prximo artculo lo detallaremos para apartar cualquier tipo de
duda.
Para finalizar te ofrecemos la posibilidad de ver este vdeo, donde vers el proceso detallado sobre cmo
autenticar usando la red social Facebook. Adems vers cmo se crea una app en Facebook y cmo
configurarla, llevando tambin los datos de las llaves y el secreto a Firebase para configurar tu propia
aplicacin.

http://desarrolloweb.com/articulos/autenticacion-usuarios-rrss-firebase.html
Disponible online en http://desarrolloweb.com/articulos/autenticacion-usuarios-rrss-firebase.html
Flujo de autenticacin Javascript con Firebase usando usuarios de Google

En este ejercicio vamos a mostrar cmo realizar una pgina que permite autenticarse usando el
usuario de Google, solo con Javascript y el SDK de Firebase.
En un artculo anterior dedicado a la autenticacin de Firebase usando los usuarios de redes sociales
mostramos el cdigo para realizar un logueo sencillo con un usuario de Facebook. Usamos Javascript y
mantuvimos las cosas sencillas, aunque nos quedaron detalles en el tintero que vamos a abordar en esta
ocasin.
Adems, por abarcar otras redes vamos ahora a autenticar con usuarios de Google. El proceso es
prcticamente el mismo y resulta extremadamente sencillo, ya que lo haremos todo desde Javascript del lado
del cliente, sin necesidad de intervenir en el desarrollo de la parte backend.
En este artculo cubrimos el flujo completo:

Botn para hacer login
Detectar casos de xito o fracaso
Detectar cambios en el estado de la autenticacin
Pgina 40 de 78
Manual de Firebase
Hacer logout
Activar los mtodos de inicio de sesin

Si quieres que tus usuarios autentiquen con Google, tienes que comenzar activando el inicio de sesin
usando cuentas de este proveedor.
Desde la seccin de autenticacin, en la pestaa "Mtodo de inicio de sesin" encontrars la parte de
usuarios de Google que tendrs que habilitar para poder usarla.
Lo bueno de Google es que, al Firebase estar perfectamente integrado con Google Cloud, no necesitamos
crear una app en Google ni copiar valores de las llaves (api key / api secret). Esto nos evita la configuracin
de la mayor parte del servicio. No obstante recuerda que siempre tienes que activar el mtodo de inicio de
sesin.
Solo un detalle ms. Tu aplicacin debe tener posibilidad de hacer inicio de sesin desde el dominio donde
la vayas a ejecutar. Esto es algo que debes hacer tambin desde la consola de Firebase, en la misma pgina
de los mtodos de inicio de sesin, pero un poco ms abajo, seccin "Dominios de redireccionamiento de
OAuth". Vers que localhost ya est activado por defecto, pero tendrs que agregar cualquier otro dominio
o IP desde donde vayan a autenticarse usuarios, tanto para hacer pruebas como para poner el sitio en
produccin.
Estas son las nicas configuraciones que tendrs que hacer dentro de la consola de Firebase. El resto queda
del lado del cdigo Javascript.
Cdigo de autenticacin con Google y control del usuario

En la siguiente parte vas a ver cmo realizar el cdigo de nuestro ejemplo, que est dividido en un HTML
que contiene bsicamente los botones de login / logout y un elemento donde mostraremos la informacin
Pgina 41 de 78
Manual de Firebase
del usuario logueado en un momento dado.

Luego en la parte de Javascript realizamos operativas necesarias para crear los manejadores de eventos de
los botones, de login y cerrar sesin.
Adems hay un tercer evento que se debe de crear, que est esperando cambios en el estado de
autenticacin. En el momento que se detectan activa (muestra u oculta) los correspondientes botones para
loguearse o cerrar la sesin.
Pensamos que no hacen falta muchas explicaciones porque realmente hemos ido explicando ya todo esto en
artculos del Manual de Firebase.
Como vers, todo forma parte de un archivo HTML con su correspondiente script. Recuerda sustituir los
datos de inicializacin de Firebase por los datos de tu propia aplicacin.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prueba de autenticacion firebase para google (sdk de Javascript)</title>
<style>
#datosuser{
font-size: .8em;
}
</style>
</head>
<body>
<button id="botonlogin">Haz login con Google</button>
<button id="botonlogout">Haz logout</button>
<p id="datosuser"></p>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>
<script>
// inicializar Firebase
var config = {
apiKey: "AISyDQRPLegmTkkwj66NoWLRo2WYI72c2qBazfE",
authDomain: "mi.firebaseapp.com",
databaseURL: "https://mi.firebaseio.com",
storageBucket: "mi.appspot.com",
messagingSenderId: "18347078000"
};
</script>
<script>
// accedo al servicio de autenticacin
// manejador de eventos para loguearse

document.getElementById('botonlogin').addEventListener('click', function() {
var provider = new firebase.auth.GoogleAuthProvider();
provider.addScope('email');
Pgina 42 de 78
Manual de Firebase
// logueado con xito

console.log('Hemos autenticado al usuario ', result.user);
})
// Fallo de login
console.log('Se ha encontrado un error:', error);
});
})
//manejador de eventos para cerrar sesin (logout)

document.getElementById('botonlogout').addEventListener('click', function() {
authService.signOut()
})
// manejador de eventos para los cambios del estado de autenticacin

authService.onAuthStateChanged(function(user) {
if (user) {
console.log('AuthStateChanged', user)
document.getElementById('datosuser').innerHTML = JSON.stringify(user);
document.getElementById('botonlogin').style.display = 'none';
document.getElementById('botonlogout').style.display = 'block';
} else {
document.getElementById('datosuser').innerHTML = 'Sin usuario logueado...'
document.getElementById('botonlogin').style.display = 'block';
document.getElementById('botonlogout').style.display = 'none';
}
});
</script>
</body>
</html>
Con esto terminamos. Como es una pgina web esttica podrs probar el script en cualquier lugar. Eso s,
recuerda que para ejecutarlo debes pasar por un servidor web. Y sobre todo, ten en cuenta activar el
dominio para inicio de sesin, tal como se explic en el artculo.

Disponible online en http://desarrolloweb.com/articulos/flujo-autenticacion-javascript-firebase.html
Datos personales de usuarios entregados por login social con Firebase

Cmo acceder y almacenar en nuestra propia base de datos la informacin personal de los usuarios
que hacen login social en nuestra aplicacin web Firebase.
La autenticacin web es una pieza fundamental de Firebase. Ya vimos en el pasado artculo que permitir el
login social en una aplicacin es una tarea muy sencilla, gracias a las funciones del API de Firebase. En esta
ocasin iremos un poco ms all y te explicaremos cmo recuperar y almacenar los datos de la persona que
se conecta.
Pgina 43 de 78
Manual de Firebase
Una vez que un usuario se ha logueado con el conector social correspondiente lo ms seguro es que quieras
captar datos personales de la cuenta, con los que personalizar la experiencia de uso de tu aplicacin.
Nombre, apellidos, email, imagen avatar son datos que habitualmente exponen las redes sociales para las
aplicaciones que hacen oAuth.
Dependiendo de la red social y de la informacin personal que necesites tendrs que recuperarla de un
modo u otro. Sabiendo adems que existen diferencias diversas entre los proveedores de oAuth que
Firebase nos permite usar:
Informacin que ser posible recabar. Por ejemplo, Twitter no permite saber el correo de los
usuarios.
Informacin que se entrega de manera predeterminada. Por ejemplo Facebook no expone el correo
de manera predeterminada pero Github s.
Permisos especiales que necesitas solicitar para obtener ms informacin de los usuarios, en el caso
de Google y Facebook, pues tiienen diversos niveles de permisos que se pueden solicitar de manera
extraordinaria cuando nos logueamos.
Objeto de datos del usuario

Como sabes, existen varias maneras de acceder al objeto de los datos del usuario autenticado. Esto lo
aprendimos en el primer artculo sobre Autenticacin en Firebase. A lo que ahora agregamos un nuevo
mtodo muy til, llamado getAuth(), que te proporciona la autenticacin de manera sncrona, es decir, en un
instante dado.
var ref = new Firebase("https://ejapp.firebaseio.com");
var authData = ref.getAuth();
Ese mtodo depende, como muchos otros, de una referencia a tu aplicacin. Al invocarlo te devuelve los
datos del usuario que est autenticado, o null, si no se autentic ningn usuario hasta el momento.
Nota: Recuerda adems que ese mismo objeto authData lo puedes obtener mediante la funcin callback
ejecutada tras el intento de autenticacin. Adems de manera asncrona mediante onAuth(). Todo eso ya
se explic.
Si nos hemos logueado con una red social en ese objeto encontraremos toda la informacin que esa red nos
proporciona. Ese objeto tendr una forma como se puede ver en la siguiente imagen:
Pgina 44 de 78
Manual de Firebase
Scope, para solicitar datos adicionales

Observars que en ese objeto de autenticacin a veces no estn todos los datos que necesitas, como por
ejemplo el email del usuario
Nota: Como decamos al principio del artculo, los datos que se proporcionan de manera
predeterminada dependen mucho de la red social. Durante el proceso de login los podemos alterar
solicitando nuevos permisos adicionales. Esto es vlido al autenticarse con Facebook, Google y Github.
Twitter no nos ofrece la posibilidad de solicitar permisos adicionales.
Para definir qu nuevos permisos, adicionales a los predeterninados, necesitas que se concedan a tu
aplicacin tienes la posibilidad de definir el "scope". Ahora vamos a ver cmo usar ese parmetro,
procedimiento que ser exactamente igual autentiques mediante el mtodo authWithOAuthPopup() o
authWithOAuthRedirect().
Nota: En el pasado artculo de autenticacin con redes sociales ya explicamos las bases para trabajo con
esos mtodos. Ahora veremos cmo indicarle permisos adicionales a travs del scope.

// cdigo para gestin del intento de autenticacin
}, {
scope: "email"
});
Eso indicar a Facebook que tu aplicacin tambin quiere leer el email del usuario y por tanto Facebook se
encargar de informar al usuario interesado que esta informacin ser accedida. Si el usuario otorga los
Pgina 45 de 78
Manual de Firebase
permisos entonces se podr loguear en nuestra pgina.

Si hubiese necesidad de acceder a varias informaciones extra, se sealarn todos los permisos en la
propiedad scope, separados por comas. Adems, en el cdigo siguiente vers que en ese parmetro adicional
tambin sirve para marcar la persistencia de la sesin del usuario.
ref.authWithOAuthPopup("github", function(error, authData) {
// procesar el intento de autenticacin una vez concluido
}, {
remember: "sessionOnly",
scope: "user,gist"
});
Almacenar los datos del usuario logueado con conector social

Ahora que tenemos el acceso a todos los datos que podamos necesitar, aprendamos a almacenarlos en la
aplicacin para mantenerlos con nosotros y personalizar la experiencia de usuario.
El perfil de los usuarios generalmente lo querrs guardar en una entidad, donde tendrs una coleccin de
todos los usuarios que se hayan registrado. De una manera similar a la que sigue.
user {
"user1": {
"nombre": "Miguel Angel Alvarez",
"email": "miguel@desarrolloweb.com"
}
"user2": {
"nombre": "Alvaro Martnez",
"email": "alvaro@desarrolloweb.com"
}
}
En el siguiente cdigo vers cmo realizar el login del usuario. En caso de detectar un logueo correctamente
se podr acceder a los datos del usuario mediante el parmetro authData y almacenarlo en la base de datos.
var ref = new Firebase("https://ejapp.firebaseio.com/");
if(error) {
// gestionar un error en el intento de autenticacin
} else {
// gestionar el acceso permitido, almacenando el perfil
var refUser = ref.child("user").child(authData.uid);
refUser.set({
email: authData.facebook.email,
nombreCompleto: authData.facebook.displayName
});
}
},{
scope: 'email'
Pgina 46 de 78
Manual de Firebase
});
Esta estrategia no funcionara tan bien si estamos usando el mtodo authWithOAuthRedirect(), puesto que
al producirse la redireccin no seremos capaces de ejecutar el cdigo de la funcin callback. Podemos llevar
esa lgica hacia el mtodo onAuth, que tambin se ejecuta al detectar el logueo positivo.
var ref = new Firebase("https://ejapp.firebaseio.com/");
ref.onAuth(function(authData){
if(authData) {
console.log('el usuario est autenticado');
var refUser = ref.child("user").child(authData.uid);
refUser.set({
email: authData.facebook.email,
nombreCompleto: authData.facebook.displayName
})
} else {
console.log('el usuario NO est autenticado');
}
});
Eso es todo. Como has podido comprobar, el cdigo que se necesita es bastante elemental, gracias a
Firebase. Para otras redes sociales ser un cdigo exactamente igual, o con mnimas diferencias porque el
objeto de autenticacin tendr juegos de propiedades diferentes y algunas veces hasta otros nombres.

Disponible online en http://desarrolloweb.com/articulos/datos-personales-login-social-firebase.html
Pgina 47 de 78
Manual de Firebase
Otros asuntos importantes de Firebase

Otros artculos sobre servicios importantes de Firebase que sin duda necesitars para desarrollar
aplicaciones.
Reglas de seguridad en Firebase

Esta es una introduccin a las reglas de seguridad en Firebase, por qu se hacen, cmo se
implementan y ejemplos sencillos para mantener seguros los datos de tu aplicacin.
Firebase como Backend as a Service debe implementar reglas de seguridad para poder definir qu se puede
hacer con los datos almacenados en la base de datos, quin puede leer o escribir, entre otras cosas.
Obviamente es algo necesario, porque si gestionas usuarios lo ms seguro es que stos escriban en algn
momento datos privados, que no quieras que otros usuarios puedan leer. Si tienes roles en la aplicacin y
por ejemplo solo los administradores pueden crear determinados tipos de tem, tendrs que proteger tu
aplicacin para que no todo el mundo pueda escribir en esos item.
En general, Firebase nos ofrece un sistema sencillo para escribir las reglas de seguridad de una aplicacin,
por medio de un archivo de texto que tiene notacin JSON. Es fcil de realizar los primeros pasos, pero
cuando tienes una aplicacin grande con un montn de reglas stas se hacen difciles de leer o mantener,
por lo que la recomendacin nuestra es aprender "Bolt", un lenguaje propio de Firebase (bastante parecido
a Javascript) que compila produciendo el JSON que necesitars para implementar las reglas en tu backend.
De momento no vamos a entrar todava en Bolt, pero ah queda el aviso.
Definir el JSON de las reglas de seguridad de Firebase

Como hemos dicho, las reglas de seguridad de Firebase son bastante fciles de escribir, sin embargo, el
lenguaje a veces es un poco abstracto. Adems, dado que debemos escribir reglas que den cabida a todas las
posibles situaciones, la dificultad puede ser elevada para dar con la frmula correcta, sobre todo si no ests
acostumbrado a trabajar con este sistema.
En este artculo vamos a experimentar reglas sencillas por lo que comprobars que todo resulta bastante
fcil. Luego en aplicaciones mayores ser donde encontremos ms problemas y dnde surgen las dudas.
Pgina 48 de 78
Manual de Firebase
Llegaremos all.
Comencemos echando un vistazo a las reglas de seguridad que encontramos en una aplicacin firebase
recin creada.
{
"rules": {
".read": true,
".write": true
}
}
Como ves se utiliza una notacin JSON para definir las reglas en este caso estamos otorgando permisos de
lectura y escritura para cualquier entidad que est en nuestra base de datos Firebase.
La regla para el permiso de lectura comienza con ".read", mientras que la regla para el permiso de escritura
se escribe en el tem ".write". El valor true indica un permiso bajo cualquier situacin, lgicamente esto est
bien para que nuestra aplicacin nos permita empezar a trabajar pero no ser lo adecuado cuando
pongamos esta aplicacin en produccin.
Nota: Adems de ".read" y ".write", en Firebase tambin podemos escribir reglas en ".validate" para
poder validar datos antes que stos sean escritos dentro de la aplicacin. Esta validacin de datos es
fundamental para asegurarse que las cosas que se guardan en la base de datos tienen la forma que
debera tener, pero no la hemos cubierto en el presente artculo.
La estructura del archivo de reglas en JSON debe corresponder con la estructura que hayas definido en tu
base de datos Firebase. De momento para nuestro ejemplo vamos a pensar que existir una entidad llamada
"perfiles". De ella colgaran todos los datos de los perfiles de usuario.
perfiles {
user_id1: {
name: "Miguel"
bio: "Fundador de DesarrolloWeb.com"
},
user_id2: {
name: "Alvaro"
bio: "Co-fundador de EscuelaIT"
}
}
Si esta fuera la nica entidad en nuestra aplicacin, podramos tener una estructura de reglas de seguridad
como la que sigue:
{
"rules": {
Pgina 49 de 78
Manual de Firebase
"perfiles": {
".read": true,
".write": false
}
}
}
As estaramos dando permisos de seguridad para permitir la lectura de todos los perfiles, pero no permitir
la escritura.
Variables en el sistema de reglas de seguridad

Hasta ahora suponemos que no habr problema alguno para entender todo este sistema. Sin embargo la
cosa se va a ir complicando un poco si queremos ser ms precisos con las cosas que se pueden hacer o no
se pueden hacer en la aplicacin.
Hemos dicho que cada usuario tiene su propio perfil, pero ahora nos dicen que solo debemos permitir que
el perfil de usuario sea escrito por aquel usuario, dueo de su propia informacin perfil. Sin embargo, para
nuestra aplicacin s que sera posible que un usuario sea capaz de leer el perfil de otro usuario, pero
nicamente queremos dar acceso de lectura a usuarios correctamente autenticados en la aplicacin.
Para cumplir esos requisitos necesitamos usar diversas variables que nos facilita Firebase cuando estamos
escribiendo las reglas de seguridad. Hay unas cuantas variables que iremos viendo en este artculo y otros
que le seguirn. De momento vamos a aprender a manejar las que necesitamos para las reglas que nos han
pedido cubrir.
Identificador del usuario autenticado: A travs de la variable "auth" tenemos disponible la propiedad "uid"
que nos indica el identificador de un usuario Firebase. Si no hay un usuario logueado en la app, simplemente
encontraremos null como valor de "auth".
Identificador de un item en una entidad: Tambin es posible acceder al identificador del elemento que se
pretende leer o escribir dentro de las reglas de seguridad. Por ejemplo, en nuestro ejemplo cada perfil est
en un documento que cuelga del identificador del usuario. Si queremos usar ese identificador en una regla
tenemos que declarar una "Variable [[--body--]]quot;.
{
"rules": {
"perfiles": {
"$user_id": {
".read": true,
".write": false
}
}
}
}
Ahora dentro de las reglas ".read" o ".write" (o las mencionadas ".validate" que no estamos viendo todava)
podremos acceder a "$user_id" para saber el identificador del usuario que se intenta leer o escribir.
Pgina 50 de 78
Manual de Firebase
Reglas para satisfacer la seguridad de acceso a los datos de perfil de usuario

Sabemos que cuesta adaptarse a todos estos conocimientos, pero con lo que hemos explicado deberas
poder entender estas reglas de seguridad implementadas.
{
"rules": {
"perfiles": {
"$user_id": {
".read": "auth != null",
".write": "$user_id === auth.uid"
}
}
}
}
Bsicamente estamos aplicando seguridad a la entidad "perfiles". Dentro de la entidad tenemos declarada la
"Variable [[--body--]]quot; "$user_id" que nos dice cul es el identificado de usuario que se est intentando
leer o escribir.
".read": "auth != null",
Esto quiere decir que, cuando el usuario autenticado sea distinto de null (tenemos cualquier usuario
correctamente logueado) se otorgar permiso de lectura.
".write": "$user_id === auth.uid"
Esto quiere decir que el permiso de escritura slo se conceder cuando el identificador del usuario al que se
pretende acceder sea igual del identificador de usuario que est logueado en el sistema.
Conclusin
Comenzar a usar las reglas de seguridad de Firebase es sencillo, sin embargo si quieres ser preciso y muy
especfico comienzan a encontarse problemas, bsicamente porque el JSON se hace un poco lioso de
escribir y difcil de mantener. La seguridad es un tema muy importante y hay que ser muy cuidadoso. Si
quieres ser detallista observars que necesitas bastante trabajo, algo que se soluciona muy bien cuando
comienzas a usar "Bolt compiler".
Con esto que has aprendido tienes un pequeo porcentaje de los conocimientos necesarios para establecer
las reglas de seguridad de tu aplicacin, pero es un buen comienzo para ir practicando cosas. Nos quedan
ver diversas otras variables disponibles, la validacin de datos, el acceso a listados de items o a items
particulares, varios niveles de "Variables [[--body--]]quot;, el compilador "Bolt" y una buena cantidad de
buenas prcticas y consideraciones para no dejar cabos sueltos en algo tan importante como es la seguridad.
Seguiremos explorando el sistema en nuevos artculos del Manual de Firebase. Mientras tanto te dejamos el
vdeo donde explicamos las Regas de seguridad bsicas en Firebase, seguro que le sacas un gran partido.
Pgina 51 de 78
Manual de Firebase

http://desarrolloweb.com/articulos/reglas-seguridad-firebase.html
Disponible online en http://desarrolloweb.com/articulos/reglas-seguridad-firebase.html
Introduccin a Firebase Storage

Explicamos todo lo que debes saber para comenzar con el servicio Storage de Firebase, junto con
un ejemplo sencillo para hacer el upload, operacin put, desde una pgina web.
En la nueva versin de Firebase uno de los servicios estrella es el de "Storage" que nos permite subir
archivos a la nube y compartirlos entre usuarios de la aplicacin. Era una de las demandas ms comunes por
parte de los desarrolladores en Firebase que afortunadamente ya tenemos con nosotros. Gracias a ello, tanto
desde la web como desde dispositivos somos ahora capaces de cargar y manipular archivos, sin tener que
escribir cdigo de la parte del backend.
Firebase Storage funciona usando el servicio Google Cloud Storage por debajo. Existe un depsito de
almacenamiento, llamado "bucket" donde podemos enviar datos que estarn asociados a nuestra aplicacin.
Sin embargo, nosotros no interactuaremos directamente con Google Storage, sino que usaremos el SDK
que nos ofrece una operativa simplificada y muy similar a la que ya manejamos cuando escribimos datos en
la base de datos en tiempo real.
En resumen, Firebase es una envoltura del servicio de almacenamiento de Google, beneficindose de varias
ventajas y potencia de la nube de Google y manteniendo un cdigo sencillo y enteramente del lado del
cliente. Adems gracias a la integracin del servicio de almacenamiento de Firebase podemos crear reglas de
seguridad que usen los datos y usuarios de nuestra aplicacin, de modo que podemos mantener los archivos
de cada persona privados o bien compartirlos con otros usuarios que se desee.
En este artculo del Manual de Firebase queremos dar una pequea introduccin al servicio de Storage y
ofrecer un primer script con el que podrs probarlo.
Cmo est organizado el servicio de storage

El almacenamiento en la nube que nos ofrece Firebase est organizado en una estructura jerrquica, igual
que las carpetas en un disco duro normal, o los datos en la "Realtime Database". Tambin usamos el
carcter "/" para separar los niveles, igual que en referencias de la base de datos o carpetas del disco.
Pgina 52 de 78
Manual de Firebase
carpeta/carpeta/archivo.png
Para navegar por las carpetas existen unos mtodos especficos, que para facilitarnos la vida nos sonarn
mucho a los que ya estamos familiarizados con el sistema de acceso a los datos en tiempo real.
Del lado de Javascript tenemos que comenzar accediendo al servicio donde se encuentra el API de Storage.
var storageService = firebase.storage();
Una vez tenemos nuestro servicio, podemos acceder a toda la serie de funciones que se encuentran en l. El
paso que generalmente realizars a continuacin es enlazar con una referencia. Puedes entender una
referencia como una ruta dentro del sistema de almacenamiento, como una ruta en el sistema de base de
datos o una ruta a un archivo de tu disco duro.
var referencia = storageService.ref('ruta/a/un/lugar/de/almacenamiento');
Otra alternativa sera obtener una referencia raz y luego con el mtodo child() navegar a una referencia
interior.
var referencia = storageService.ref();
var referencia = referencia.child('images');
Subir un archivo a Storage Firebase

Subir un archivo es tan sencillo como, partiendo de una referencia, invocar el mtodo put() que se encargar
de realizar todo el trabajo por nosotros. Este mtodo recibe dos parmetros, el propio archivo a subir y un
objeto con metadatos. El parmetro de metadatos es opcional pero esencial para implementar mecanismos
importantes con respecto al tratamiento de archivos.
El mtodo nos devuelve un objeto de la clase "UploadTask" (firebase.storage.UploadTask) con el que
podemos monitorizar el estado del upload del archivo mediante eventos que explicaremos en el punto
siguiente de este artculo, as como realizar acciones como cancelar una subida de archivo.
var uploadTask = referencia.put(file, metadata);
Nota: La parte de obtener ese archivo ("Blob" o "File") mediante el navegador ya es otro asunto y lo
puedes hacer con APIs HTML5. El API File permite acceder a archivos del disco duro del usuario, que
haya seleccionado mediante un campo INPUT type file. El API Blob bsicamente permite crear objetos
con datos generados desde Javascript, es decir, que no necesariamente corresponden con archivos que
tengas en tu disco duro. Veremos un ejemplo ms tarde.
Pgina 53 de 78
Manual de Firebase
Suscribirse a eventos relacionados con la carga de archivos

Igual que hay eventos que tienen que ver con la autenticacin, el SDK de Firebase implementa eventos que
se disparan cuando ocurren cosas que tienen que ver con la parte de almacenamiento.
El evento "state_changed" lo podemos gestionar a partir del objeto de la clase UploadTask que hemos
recibido como respuesta a una operacin put(). Es el que nos permite suscribirnos a cambios de estado del
proceso de upload del archivo.
Este evento se invoca con el mtodo on() sobre el objeto de la clase UploadTask, al que se le tienen que
indicar varios parmetros.
El evento, "state_changed"
La funcin callback "Next": que permite hacer cosas durante la carga. Es como un "observer" que
se invoca repetidas veces y en el que somos capaces de obtener datos como podra ser el porcentaje
de subida del archivo o el estado del upload. Si no se quiere definir ese observador se puede enviar
simplemente un null.
La funcin callback "Error": que es como cualquier error de Firebase y ser invocada en caso que la
carga del archivo falle.
La funcin callback "Complete": que se invocar cuando la carga del archivo haya terminado.
uploadTask.on('state_changed', null, function(error){
console.log("Se ha producido un error:, ", error);
}, function() {
console.log("Carga del archivo completada");
});
Como puedes ver, hemos enviado como funcin "Next" el valor null, porque no queremos monitorizar el
estado de la carga durante el tiempo de carga. Luego tenemos las dos funciones para detectar posibles
errores y la carga completada.
El "snapshot" de un proceso de carga

Durante el proceso de carga de un archivo, y una vez que ya ha terminado este proceso, podemos acceder a
una instantnea del estado del upload o al resultado final de la carga. A partir del snapshot podemos obtener
informacin diversa, como por ejemplo el estado actual, los bytes transferidos, o la URL donde qued ese
archivo en la nube.
El snapshot pertenece tambin al objeto de la clase UploadTask y podemos acceder a l de la siguiente
manera. No vamos a ver todas las posibilidades ahora, pero s algunas bsicas:
uploadTask.snapshot.totalBytes: Los bytes totales del archivo a ser enviados para su carga.
uploadTask.snapshot.bytesTransferred: Los bytes transferidos hasta un instante dado.
uploadTask.snapshot.state: El estado actual de la subida. uploadTask.snapshot.downloadURL: una cadena la
direccin donde est disponible ese archivo en la nube.
Ejercicio completo de upload de un archivo a Firebase

Pgina 54 de 78
Manual de Firebase
Ahora vamos a irnos a la parte prctica y veremos un cdigo completo que realiza las funciones de upload
de un archivo. Pero antes debes saber que de manera predeterminada Firebase exige que para subir archivos
deba haberse autenticado el usuario mediante cualquiera de los mecanismos. En este ejemplo usaremos
autenticacin annima, pero ten en cuenta que debe estar habilitada en la consola de Firebase.
Ten en cuenta tambin que tendrs que colocar tus propios datos de aplicacin Firebase para que funcione.
Explicamos cmo obtener tus datos de inicializacin de Firebase en el artculo sobre Introduccin a
Firebase 3.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Subir archivos con Firebase</title>
</head>
<body>
<input type="file" id="campoarchivo">
<div id="mensaje"></div>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAKAAAPi-aPffdsliTggEtTW23s222I371Y",
authDomain: "tuapp.firebaseapp.com",
databaseURL: "https://tuapp.firebaseio.com",
storageBucket: "tuapp.appspot.com",
};
// Servicios de APIs Firebase

var storageService = firebase.storage();
window.onload = function() {
// realizamos la autenticacin annima (debe estar activada en la consola de Firebase)
authService.signInAnonymously()
console.error('Detectado error de autenticacin', error);
});
// asociamos el manejador de eventos sobre el INPUT FILE

document.getElementById('campoarchivo').addEventListener('change', function(evento){
evento.preventDefault();
var archivo
= evento.target.files[0];
subirArchivo(archivo);
});
}
// funcin que se encargar de subir el archivo

function subirArchivo(archivo) {
// creo una referencia al lugar donde guardaremos el archivo
var refStorage = storageService.ref('micarpeta').child(archivo.name);
Pgina 55 de 78
Manual de Firebase
// Comienzo la tarea de upload

var uploadTask = refStorage.put(archivo);
// defino un evento para saber qu pasa con ese upload iniciado

uploadTask.on('state_changed', null,
function(error){
console.log('Error al subir el archivo', error);
},
function(){
console.log('Subida completada');
mensajeFinalizado(uploadTask.snapshot.downloadURL, uploadTask.snapshot.totalBytes);
}
);
}
// a esta funcin la invocamos para mostrar el mensaje final despus del upload
function mensajeFinalizado(url, bytes) {
var elMensaje = document.getElementById('mensaje');
var textoMensaje = '<p>Subido el archivo!';
textoMensaje += '<br>Bytes subidos: ' + bytes;
textoMensaje += '<br><a href="' + url + '">Ver el fichero</a></p>';
elMensaje.innerHTML = textoMensaje;
}
</script>
</body>
</html>
Hemos comentado el cdigo para que no te pierdas. Estamos seguros que despus de la lectura del artculo
y los comentarios eres capaz de identificar toda la operativa de carga de un fichero a Firebase. Si lo pruebas
solo ten en cuenta colocar tus propios datos de inicializacin de Firebase.
Es un script de carga simplificado lo suficiente para que sea sencillo de entender. En otros artculos lo
editaremos para hacerlo un poco ms sofisticado y que sea capaz de mostrarnos el progreso de una subida,
algo muy importante para las cargas de archivos grandes.

Disponible online en http://desarrolloweb.com/articulos/introduccion-firebase-storage.html
Firebase Tools
Qu son las Firebase Tools, cmo obtenerlas y un resumen de los comandos que nos ofrecen para
mantener, desarrollar y desplegar aplicaciones en Firebase.
Firebase Tools es un paquete de herramientas pensadas para el desarrollo de aplicaciones Firebase. Son
tiles y hasta imprescindibles cuando vas a crear aplicaciones, permitiendo realizar diversos tipos de
operativas, como servir una pgina en local o hacer el despliegue de una aplicacin.
Decimos imprescindibles, aunque lo cierto es que podras empezar a desarrollar sin necesidad de tener las
Pgina 56 de 78
Manual de Firebase
Firebase Tools. Sin embargo, para el hosting de Firebase no existe la posibilidad de acceder por FTP, ni
tampoco ssh o algo parecido, por lo que la nica manera de subir tus archivos es usando las Firebase Tools.
Instalar firebase-tools
El primer paso ser obtener las herramientas, que instalas con npm, por lnea de comandos:
npm install -g firebase-tools
Nota: En este tutorial trabajamos con las firebase-tools 3.x, por lo que si tienes las Firebase Tools
antiguas, rama 2.x, las tendras que actualizar.
Esta instalacin permite que tengamos disponible de manera global el comando "firebase", que a su vez
tendr varios sub-comandos para realizar diferentes cosas. Puedes comenzar lanzando el comando de ayuda
para ver todo lo que firebase-tools te proporciona:
firebase --help
Login / logout en Firebase

Para muchos de los comandos de Firebase Tools necesitas tener permisos concedidos. Obviamente mucha
operativa trabaja con tu cuenta de Firebase y necesitas estar logueado.
Existen dos comandos muy sencillos, uno de los cuales puedes ejecutar ya mismo.
firebase login
Ese comando abrir un navegador para que des permisos a Firebase Tools, para lo que tendrs que
introducir la clave de tu cuenta de Google, con la que entras en la consola de Firebase.
firebase logout
Pgina 57 de 78
Manual de Firebase
Ese comando servir para retirar los permisos a firebase tools, algo importante en ciertos casos, porque si
no lo haces, cualquiera con acceso a ese ordenador sera capaz de realizar cualquier accin con tus
aplicaciones.
Servidor web integrado

Como sabes, para que tus pginas con Firebase funcionen necesitas acceder a ellas por medio de http, o sea,
pasando por un servidor web. Ahora Firebase te incluye ese servidor, por lo que te ahorra tener configurado
cualquier otro server en tu ordenador. Es un servidor sencillo, de archivos estticos, pero podrs usarlo
perfectamente ya que con Firebase no hay programacin del lado del servidor.
El comando para lanzar el servidor web integrado es:
firebase serve
Si lo lanzas sobre cualquier carpeta donde no hayas inicializado una aplicacin usar como "document root"
esa carpeta desde donde lo ejecutaste. Vers que te aparece justamente un mensaje en ingls informando de
esa situacin. Pero iniciando una aplicacin, como veremos a continuacin, evitars que te aparezca ese
mensaje de aviso y adems podrs configurar la raz del servidor en otras carpetas.
Inicializar una aplicacin Firebase

Otra de las cosas ms tpicas que querrs hacer con Firebase es inicializar una aplicacin. Este paso es
imprescindible para luego poder desplegar esa aplicacin en el hosting que te ofrece Firebase.
Inicializamos la aplicacin de Firebase con el comando:
firebase init
Este proceso recabar una serie de informaciones por lnea de comandos, para configurar tu aplicacin.
Nota: Para poder completar el proceso debes haber logueado previamente con tu cuenta Google, como
hemos dicho anteriormente.
Lo primero que te dice es que indiques qu quieres inicializar (What Firebase CLI features do you want to
setup for this folder?), ofreciendo dos posibilidades, las reglas de seguridad y el hosting. Puedes apretar la
barra espaciadora para seleccionar o no cualquiera de las opciones, aunque generalmente querrs ambas
cosas, para lo que pulsas enter.
Luego te preguntar qu aplicacin de Firebase, de las que has creado en la consola, quieres que se asocie a
esta aplicacin que se est inicializando.
A partir de ah seguramente podrs proporcionarle otros datos que necesita el comando, pero voy a dar un
algunos tips, que si eres nuevo en Firebase pueden contestarte alguna duda.
Pgina 58 de 78
Manual de Firebase
What file should be used for Database Rules? Aqu te est pidiendo el archivo donde vas a escribir las
reglas de seguridad en local. Si ya tienes un archivo como "rules.json" o algo parecido, simplemente
indcaselo. Pero OJO, en la siguiente pregunta te pedir si quieres que lo sobreescriba con un cdigo inicial,
dile que no, para que no te borre tus reglas actuales. Si no tienes un archivo de reglas puedes dejar la opcin
que te aparece por defecto "database.rules.json" pulsando enter. Entonces te crear tal archivo entre los de
tu proyecto.
What do you want to use as your public directory? Aqu te est preguntando sobre la carpeta raz de
publicacin, o document root. Puedes indicarle el lugar donde tienes tu index.html, o si quieres la carpeta
que te propone (public), en cuyo caso te la crear y colocar un index.html inicial.
Configure as a single-page app (rewrite all urls to /index.html)? Esto es para que le indiques si tu web
va a ser una SPA (single page application) o aplicacin de una sola pgina. Ya sabes, una aplicacin web
donde solo hay un index.html y todas las rutas de la aplicacin realmente se sirven desde el mismo fichero.
Una vez ejecutado el firebase init te crear dos archivos: firebase.json y .firebaserc que contendrn la
informacin entrada en este proceso, en los formatos que Firebase necesita.
Despliegue de una aplicacin

Ya que tienes tu aplicacin inicializada, puedes desplegarla en los servidores de hosting de Firebase. Es un
alojamiento gratuito que puedes usar incluso con tu propio nombre de dominio, lo que resulta muy til (y
generoso).
El deploy es un juego de nios, ya que la informacin necesaria para realizarlo se ha configurado
previamente con el "firebase init". Lo realizas con este comando:
firebase deploy
Ahora todo ser automtico y al final te aparecer un mensaje con la URL del dominio donde puedes ver tu
web una vez publicada en el servidor de Firebase.
Existen otros comandos menos necesarios para la operativa del da a da, dentro de las Firebase Tools, te
recomiendo que consultes la ayuda o bien accedas al repositorio de Github donde est el cdigo de firebasetools para encontrar ms informacin.

Disponible online en http://desarrolloweb.com/articulos/firebase-tools.html
Pgina 59 de 78
Manual de Firebase
Polymerfire
Explicaciones sobre el uso de Firebase en aplicaciones realizadas con la librera Polymer. Polymer tiene una
serie de componentes que permiten trabajar con Firebase de una manera muy gil y sencilla. Los
analizaremos con varios ejemplos que seguro que sorprendern y gustarn al lector.
Introduccin a Polymerfire (Firebase con Polymer)

Pasos para realizar una aplicacin Firebase con Polymer, usando Firebase 3 y los componentes de
Polymerfire.
En este artculo vamos a dar unos primeros pasos con "polymerfire" que son un conjunto de componentes
Polymer para el trabajo con los servicios de Firebase. Polymerfire usa la nueva versin de Firebase, es decir,
Firebase 3.x, por lo que es la librera de componentes adecuada para desarrollar nuevas aplicaciones con el
servicio de Google.
Ten en cuenta que, en el momento de escribir este artculo Polymerfire est en versin 0.9.3, por lo que
todava irn agregando nuevas cosas. A da de hoy permite trabajar con la base de datos en tiempo real, pero
es de suponer que irn agregando componentes para trabajar con otros servicios disponibles dentro de
Firebase.
Polymerfire simplifica mucha operativa del trabajo con Firebase, pudiendo desarrollar a alto nivel,
simplemente declarando mediante componentes las cosas que stos deben realizar. Por debajo los
componentes se encargarn de usar el SDK estndar de Javascript y realizar aquellas cosas para las que los
hayamos configurado. En resumen, sin una lnea de Javascript podras trabajar con Firebase. Pero no te
lleves a engao, para una aplicacin real ser importante que conozcas cmo es el API de Javascript de
Firebase, porque los componentes no sern capaces de hacer absolutamente todas las cosas que puedas
llegar a necesitar.
Nota: Doy por hecho que ests familiarizado tanto con Firebase como con Polymer. Si no es as
simplemente consulta el Manual de Firebase o el Manual de Polymer.
Pgina 60 de 78
Manual de Firebase
Inicializar una aplicacin Firebase

Ya que estamos trabajando con Firebase, vamos a tomarnos la molestia de inicializar la aplicacin. Esto,
aunque no es un requisito imprescindible, nos permitir dos cosas:
1. Usar el servidor web integrado con Firebase, sin que se tenga que quejar de no haber inicializado la
aplicacin previamente.
2. Publicar luego nuestro ejemplo en el hosting gratuito de Firebase.
Esto lo haces con el comando:
firebase init
Nota: Obviamente, necesitas tener las herramientas de Firebase instaladas. Lee el artculo de las
firebase-tools para ms informacin detallada sobre este proceso.
Instalar Polymerfire
Ahora instalars Polymerfire en la carpeta del proyecto donde ests trabajando. Previamente habrs inciado
Bower con el comando "bower init", que es algo en lo que no vamos a entrar porque est explicado
previamente y porque tienes un completo artculo sobre Bower.
bower install --save polymerfire
Esto te instalar de una vez los componentes de Polymerfire y tambin todas sus dependencias, entre las
que encuentras varias, como el SDK de Firebase para Javascript, el propio Polymer y otras.
Nota: Polymerfire es sencillo de usar. Realmente no necesitas ms para comenzar, pero lo cierto es que
existen muchos otros componentes de Polymer que tambin se llevan muy bien con Firebase y ofrecen
cosas tan interesantes como la posibilidad de mantener en local los datos de tu aplicacin, incluso si el
ordenador del cliente pierde la conexin a Internet. Esa parte, un poco ms avanzada, la podremos ver
ms adelante.
Pgina 61 de 78
Manual de Firebase
Componente firebase-app
El trabajo con los componentes de Polymer para Firebase se divide entre varios custom elements de
Polymer. El primero que debes conocer es "firebase-app". Este componente hace la funcin de configurar
tu aplicacin y mantiene la configuracin disponible para cualquier otro componente que la quiera usar.
Para usarlo puedes partir de este cdigo:
<firebase-app
name="nombreApp"
api-key="PON AQU TU API-KEY"
auth-domain="PON AQU TU AUTH-DOMAIN"
database-url="PON AQU TU DATABASE-URL">
</firebase-app>
Los valores con los que configurars ese elemento estn en la consola de Firebase. En el artculo de
introduccin a la nueva versin de Firebase ya te explicamos cmo obtenerlos.
Mencin especial merece el valor "name", que es el nombre de la aplicacin que tendrs para esta
configuracin. Nosotros hemos colocado como valor "nombreApp" en este ejemplo, pero t colocars
cualquier cosa. No es necesario que se llame igual que la app de Firebase que has creado en la consola. Es
solo un nombre interno que se usar dentro de tu desarrollo con Polymer.
Nota: Nunca te olvides de hacer el correspondiente "import" de los componentes que quieras usar. Los
de Polymerfire estarn en la carpeta "bower_components/polymerfire/".
Componente firebase-document
Definida tu aplicacin, ya ests en la posibilidad de usar otros componentes de Polymerfire para ir haciendo
cosas interesantes. Creemos que lo ms sencillo es comenzar por el componente "firebase-document" que
sirve para acceder a un documento de la base de datos en tiempo real y mantenerlo sincronizado.
Nota: Un documento es cualquier informacin que tienes en la base de datos de Firebase. Sabes que es
una base de datos "documental" en la que se usa JSON para guardar informacin. Cada dato ser un
objeto JSON con sus propiedades y valores. Eso es un documento.
La sincronizacin que implementa "firebase-document" se produce a dos direcciones:

Si cambia el dato en la base de datos remota, Firebase se encargar de hacernos llegar ese dato a
nuestro firebase-document, sin que tengamos que hacer nada.
Pgina 62 de 78
Manual de Firebase
Si modificamos nosotros el objeto que nos brinda "firebase-document", asignando cualquier nuevo
valor, ese dato viajar automticamente a la base de datos de Firebase, que a su vez sincronizara el
dato con cualquier otro cliente que lo est consumiendo.
Usars una sintaxis como esta para implementar este componente:
<firebase-document
app-name="nombreApp"
path="/objeto"
data="{{misdatos}}"
></firebase-document>
Lo primero que ves es el atributo "app-name". Este debe tener el valor que se haya colocado anteriormente
en el "name" del componente "firebase-app". As le ests diciendo a firebase-document qu configuracin
de app debe usar. Es muy importante este campo, porque sin l no te funcionar.
luego encuentras el atributo "path". En l colocas el camino al documento que quieres acceder de la base de
datos de Firebase.
Nota: Es importante sealar que para el acceso o modificacin de los datos de Firebase se tienen en
cuenta los permisos definidos en las reglas de seguridad. Ojo al detalle sobre todo en proyectos que
iniciamos, porque las bases de datos de Firebase 3 vienen protegidas para que solo se pueda leer o
escribir si existe un usuario autenticado. En este artculo no entramos todava en autenticacin de
usuarios y tendras que modificar las reglas para que permitieran acceso al documento para que te
funcionen los ejemplos. Este detalle est ms detalladamente explicado en el vdeo que encontrars al
final del artculo.
Por ltimo tienes "data", al que le estamos asignando un valor por binding: {{misdatos}}. Ese valor es
importante porque ser donde dentro del componente tendrs acceso a los datos que te traiga el firebasedocument.
Nota: Fjate que hacemos el binding con dos llaves, porque queremos que sea en dos direcciones, como
antes hemos especificado. Recuerda que en el Manual de Polymer tienes ms informacin sobre el
binding.
Mostrar datos que te expone firebase-document

Seguro que si ya ests familiarizado con Polymer no tendrs mucha dificultad para ahora mostrar todos los
datos que necesites, de aquellos a los que has accedido con el elemento firebase-document.
Esos datos los tienes todos en el objeto que has bindeado a la propiedad "data", que en nuestro caso se
llamaba "misdatos".
Ahora solo te quedara mostrar en el template de tu componente aquellos datos que quieres visualizar.
Pgina 63 de 78
Manual de Firebase
Vamos a suponer que el documento que te has trado tiene una propiedad llamada "mipropiedad" y que la
quieres meter dentro de un prrafo.
<p>Este es el dato que quiero mostrar [[misdatos.mipropiedad]]</p>
Nota: Ten en cuenta que los mecanismos de binding en Polymer solo se dan si ests dentro de un
componente o bien, si no ests en un componente, usando el "template autobind" aka "template dombind":
<template is="dom-bind">
Aqu s se produce binding!!
</template>
Vdeo de los primeros pasos con Polymerfire
Este primer ejercicio con Polymerfire no tiene mucho ms. No hemos visto el cdigo completo, porque
estamos seguros que con tus conocimientos en Polymer sers capaz de unir las piezas. Si no es as,
simplemente mira este vdeo en el que vers mucha informacin que te aclarar diversos puntos que puedan
estar poco claros para ti.

http://desarrolloweb.com/articulos/introduccion-polymerfire.html
Disponible online en http://desarrolloweb.com/articulos/introduccion-polymerfire.html
Componente firebase-query de Polymerfire

Uno de los componentes de Polymerfire, para el trabajo con la base de datos de Firebase, que nos
ofrece el acceso a colecciones de elementos.
En el pasado artculo explicamos qu es Polymerfire y nos introdujimos en el inicio de un proyecto Firebase
+ Polymer usando este paquete de Custom Elements basados en Polymer. En resumen nos permiten
realizar operativas de acceso a la base de datos en tiempo real de Firebase de una manera declarativa,
simplemente usando elementos de HTML que configuramos mediante sus propiedades.
Ahora, sobre esa base de conocimiento, vamos a seguir aprendiendo acerca de Firebase, acercndonos al
trabajo con colecciones de elementos, que nos traeremos va firebase-query. Este componente te permite no
solamente acceder a datos de Firebase, sino mantenerlos sincronizados con todos los usuarios que puedan
estar conectados a la misma fuente de datos.
Usaremos la nueva versin de Firebase, la 3.x, que tiene un nuevo SDK y nuevos componentes de Polymer
Pgina 64 de 78
Manual de Firebase
para el acceso a los servicios de Firebase.
Nota: Para quien ya conozca los antiguos componentes de Firebase en versin 2.x, el componente
firebase-query actual sustituye al antiguo firebase-collection.
Coleccin Vs arrays en Polymerfire

Comenzaremos aclarando qu es una coleccin de elementos, que vendra a ser lo mismo que un array. Ten
en cuenta que en Firebase no hay arrays y lo que tenemos son colecciones porque realmente se crean por
medio de objetos en los que tenemos "n" elementos, cada uno de ellos bajo una propiedad de objeto, que
generalmente tendr un identificador creado por Firebase al insertarlos. Este detalle es muy importante y no
lo vamos a comentar ms porque fue ampliamente explicado en el artculo Trabajo con colecciones en
Firebase y Javascript.
Lo que pasa es que, para la construccin de estructuras de repeticin con Polymer usamos el template domrepeat y ste necesita de un array para iterar, por lo que nuestros componentes firebase-query estn
preparados para convertir en un array lo que en Firebase se almacena como una coleccin.
Componente firebase-query
El componente firebase-query se encarga de hacer todo el trabajo de ir hasta Firebase para recoger un
conjunto de datos, proporcionarlos en una aplicacin Polymer y mantenerlos sincronizados con la base de
datos remota. En caso que se modifiquen los datos en local los expone en la base de datos de Firebase y,
por su puesto, si se modifican en Firebase se actualizan en la parte de Polymer.
Para ello, de manera declarativa, configuramos el componente indicando la aplicacin que vamos a usar, as
como el lugar donde est la coleccin de elementos dentro de la base de datos de Firebase. Una vez
recibidos los datos, el componente nos los ofrecer en una de sus propiedades.
<firebase-query
app-name="testpf"
path="/contactos"
data="{{contactos}}">
</firebase-query>
Pgina 65 de 78
Manual de Firebase
Esta es la descripcin de los atributos configurados en el componente, esenciales para su funcionamiento.

app-name: sirve para indicar el nombre de la aplicacin que usamos como servicio. Atencin a este
valor, porque lo tendrs que definir mediante el componente firebase-app que fue un asunto ya
tratado en la introduccin a Polymerfire.
path: la ruta al lugar de la base de datos donde est la coleccin que necesitamos acceder.
data: es la propiedad donde firebase-query colocar el array resultado de acceder a la coleccin.
Nota: Ten muy en cuenta las reglas de seguridad, que nos dicen quin puede acceder a la informacin y
bajo qu condiciones. En las reglas de seguridad predeterminadas no se permite acceso a datos si no es
por un usuario autenticado. Tenlo en cuenta, autenticando usuarios o modificando las reglas para que
los ejemplos te funcionen correctamente.
Es importante pararse en el atributo data="{{contactos}}". Aqu se produce un bindeo de la informacin

que hay en Firebase a una propiedad llamada "contactos" dentro del componente que se est programando.
Ese binding debe de ser, generalmente, a dos bandas (notacin dobles llaves) para que se produzca la
deseada sincronizacin con la base de datos en tiempo real.
Recorrido a los datos de la coleccin

Esto ya es una parte que depende directamente de Polymer, ya que los recorridos se realizan con un
template de repeticin que est definido en la propia librera de web components.
Bsicamente el cdigo ser como el siguiente:
<template is="dom-repeat" items="[[contactos]]" as="contacto">
<p>
Nombre: [[contacto.name]], email: [[contacto.email]]
</p>
</template>
Bsicamente tenemos el array "contactos" que es el que se usa como fuente para generar la repeticin.
Dentro del template, que se repetir para cada contacto del array, conoceremos al elemento actual con la
variable "contacto". No vamos a entrar mucho ms en este tipo de estructuras ya que son materia del
Manual de Polymer.
Sincronizacin con la base de datos en tiempo real

Como hemos mencionado ya, la gracia de usar la database de Firebase es que los datos se mantienen
sincronizados. Al mostrar el array no nos tenemos que preocupar en nada sobre esta sincronizacin pero si
queremos modificar el array s que es importante tener en cuenta algunos detalles. En concreto:
1. Si un dato cambia en el origen, Polymer y los componentes Polymerfire se encargarn de todo para
que los datos mostrados sean los actuales. En otras palabras, la actualizacin del template se
realizar de manera transparente para el desarrollador.
2. Pero para modificar el array debemos tener en cuenta diversos detalles, puesto que el enlace hacia
Pgina 66 de 78
Manual de Firebase
Firebase est sujeto a la necesidad de usar funciones del SDK de Firebase.

En este artculo queremos mostrarte cmo agregaras un elemento al array. Como decimos, no lo agregars
con la funcin push() nativa de Javascript, sino con push() de la librera de Firebase.
Imagina que tienes un objeto que quieres agregar en una variable:
var nuevocontacto = {
name: 'Miguel Angel Alvarez',
email: 'miguel@desarrolloweb.com'
}
Ese objeto lo agregars a travs de la funcin push(), que depende de una referencia a la base de datos de
Firebase. Tal referencia la puedes obtener a partir del componente, por su propiedad "ref".
Lo ms cmodo es que coloques un identificador al componente, para luego poder acceder al componente
para cualquier operacin:
<firebase-query
id="firebaseq"
app-name="testpf"
path="/contactos"
data="{{contactos}}">
</firebase-query>
Ahora, dentro de un mtodo de Polymer podrs acceder al componente a travs de this.$.firebaseq y a

continuacin a su referencia en la propiedad "ref", sobre la cual realizaremos el correspondiente push(). El
cdigo sera parecido a este:
this.$.firebaseq.ref.push(nuevocontacto);
Nota: De momento, para acceso al SDK de Firebase no vemos mtodos ayudantes, en la versin actual
del componente firebase-query. Tenemos que partir de la referencia mencionada y despus usar ya el
SDK nativo de Firebase para Javascript.
Disponible online en http://desarrolloweb.com/articulos/componente-firebase-query-polymerfire.html
Componente firebase-auth
El componente de Polymerfire que nos provee del servicio de autenticacin de usuarios en
aplicaciones Firebase y Polymer.
Despus de haber abordado en artculos anteriores los componentes de acceso a datos de Firebase para
Pgina 67 de 78
Manual de Firebase
aplicaciones Polymer, ahora nos vamos a detener en el componente de autenticacin de usuarios, que es un
poco ms complejo que los anteriores.
El componente de autenticacin nos permite de una manera declarativa configurar el sistema de
autenticacin de usuarios de Firebase, pudiendo autenticar por diversos medios, como usuario/clave, de
forma annima y por medio de usuarios de diversas redes sociales. Y lo hace a muy alto nivel, sin que nos
tengamos que ocupar de la mayora de las situaciones relativas a la seguridad.
Podramos usar el componente firebase-auth con una nica lnea de cdigo, permitiendo autenticacin
solamente con escribir unas pocas propiedades en atributos de una etiqueta HTML y una invocacin a un
mtodo Javascript, lo que es realmente asombroso. Aunque para ciertos usos, como autenticar con
password, s que necesitaremos usar algo ms de cdigo.
Nota: Recuerda que antes de usar el componente firebase-auth debes haber configurado tu aplicacin
usando el elemento firebase-app. Encontrars ms informacin en la introduccin a Polymerfire.
Mtodos de autenticacin
En Firebase existen diversos mtodos de autenticacin posibles:
Annima
Por usuario y clave
Por usuarios de redes sociales: Google, Facebook, Twitter, Github
Suponemos que ests familiarizado con esto, ya que ha sido objeto de estudio en el Manual de Firebase. Lo
que no podemos dejar de remarcar es que hay que activar en la consola de Firebase cada uno de los
mecanismos que queramos permitir en nuestra app.
Al iniciarse una aplicacin Firebase no est activo ningn mecanismo de autenticacin, por lo que tendrs
que comenzar por ah. Simplemente se trata de entrar en la consola de Firebase y habilitar el / los que
desees.
Adems, en el caso del login por redes sociales, oAuth, tendrs que configurar algunas informaciones en la
consola. Sobre esto ya hemos visto alguna cosa en el artculo de Autenticacin de usuarios con redes
sociales en Firebase.
Pgina 68 de 78
Manual de Firebase
Nota: Una novedad en la recin publicada versin de Firebase (la 3) es que, gracias a la integracin con
Google, no es necesario configurar nada para poder usar este proveedor de login. Simplemente tenemos
que habilitarlo, como cualquier otro mecanismo de autenticacin, pero la parte de configuracin de la
API Key de oAuth, llave secreta o url de callback no hace ya falta introducirla, lo que lo hace un
mecanismo muy cmodo para usar en cualquier aplicacin sin necesidad de ms configuraciones.
Autenticacin Firebase declarativa

Como ya sabes, en Polymer est encapsulada la complejidad de los componentes dentro de su registro, por
lo que programaremos en muchos casos de manera declarativa, configurando los componentes por medio
del HTML. En el caso de la autenticacin con Firebase llegamos a niveles extraordinarios de complejidad,
todo un sistema de login de usuarios, expresada tan solo con unas sencillas configuraciones.
La etiqueta de un componente firebase-auth tendr un aspecto como el siguiente:
<firebase-auth
id="fauth"
app-name="testpf"
></firebase-auth>
En esas lneas estamos definiendo los siguientes atributos:

id: simplemente para referirnos a ese componente, si es que lo necesitamos ms adelante. app-name:
colocamos el nombre de una aplicacin configurada que queramos usar. Esa aplicacin se declar en el
componente firebase-app que ya conoces.
Simplemente con esos atributos ya puedes hacer una autenticacin, aunque ahora veremos otros tiles. Pero
nuestro componente firebase-auth podra tener ms atributos configurados:
<firebase-auth
id="fauth"
app-name="testpf"
provider="facebook"
signed-in="{{signedIn}}"
user="{{user}}"
></firebase-auth>
En este caso estamos indicando nuevas informaciones:

provider: este es el proveedor de autenticacin. Solo se usa el provider en caso que quieras loguear por
medio de redes sociales, porque la autenticacin annima o por password no lo necesita. De manera
predeterminada es "google".
signed-in: este atributo es bastante til. Te expone un valor boleano que que indica si el usuario est o no
est correctamente autenticado. Es habitual hacer lo que ves en el anterior cdigo, que se bindea a una
Pgina 69 de 78
Manual de Firebase
propiedad del componente, que luego podrs usar para saber si hay o no un usuario correcto activo.
user: este es el objeto con todos los datos de usuario a los que accedes cuando hay uno logueado en tu
aplicacin. A travs de ese objeto podrs acceder al identificador de usuario as como datos que te exponga
la red social con la que ests conectando. Como con signed-in, lo normal es que lo bindees a una propiedad.
Lanzar el proceso de autenticacin

El proceso de login lo debes de lanzar imperativamente con Javascript. Para ello el componente tiene una
serie de mtodos que nos permiten lanzar distintos procesos de autenticacin.
Para el caso de la autenticacin annima, dentro del cdigo de cualquier mtodo del componente, realizaras
el login mediante la siguiente sentencia:
this.$.fauth.signInAnonymously();
Nota: Estamos suponiendo que tu componente firebase-auth tiene el id="fauth", como en los ejemplos
anteriores, pero obviamente en tu aplicacin podrs usar cualquier otro identificador.
Observa que primeramente accedemos al componente firebase-auth a travs de su identificador: this.$.fauth

y luego invocamos el mtodo para el login annimo. Este mtodo te devolver una promesa de la que
hablaremos en un punto ms adelante.
Para el caso de autenticacin por medio de usuario y contrasea existe un mtodo que se encarga de lanzar
el proceso, al que enviars las cadenas del email y la clave del usuario. El mtodo tambin devuelve una
promesa.
signInWithEmailAndPassword(email, clave)
Nota: Obviamente el mtodo no "vive" solo, necesitas acceder a l a travs del objeto del elemento
firebase-auth, como hemos visto antes en el ejemplo de autenticacin annima.
Para el caso de autenticacin con oAuth, usando los usuarios de redes sociales, tendrs dos posibilidades.
Login con un popup y login por redirect. Estos dos mecanismos producen el mismo resultado, pero uno
usa redirecciones para autenticar en la red social mientras que el otro usa una ventana emergente. Ya se
explicaron las diferencias en el artculo de autenticacin con conectores sociales.
Recuerda, no obstante, que la definicin de la red social a usar la realizas con la propiedad "provider" del
componente, como hemos visto antes. Aunque tambin lo puedes expresar mediante un parmetro
opcional indicado en la funcin que lanza el proceso de autenticacin.
Pgina 70 de 78
Manual de Firebase
signInWithPopup(provider)
signInWithRedirect(provider)
Ambos mtodos tambin producen como respuesta una promesa.

Promesas para comprobar el resultado del proceso de autenticacin
Todos los mtodos que acabamos de ver producen como devolucin una promesa que nos permite saber
qu ocurri al intentar autenticar. Esas promesas las debes de conocer ya, pues ya son un estndar en
Javascript.
Nota: Realmente no ests obligado a usarlas, puesto que cuando se produce la autenticacin, por los
mecanismos de binding ya puedes saber que se han producido cambios en la autenticacin, por ejemplo
mediante la propiedad "signed-in" o el propio objeto de usuario, de los que hemos hablado antes.
En el caso negativo recibes un objeto de error, desde el que podrs obtener informacin que presentar al
usuario. En el caso positivo recibes un objeto desde el que podrs obtener informacin del usuario que se
acaba de autenticar.
this.$.fauth.signInWithPopup()
.then(function(respuesta) {
console.log('entr', respuesta.user);
})
console.log('error' + error);
});
Con esto ya tienes todo lo que necesitas saber para comenzar a autenticar usuarios en aplicaciones Firebase
+ Polymer usando los componentes Polymerfire. Ahora solo queda disfrutar de tu tiempo, porque
realmente todo el trabajo pesado ya lo tienes hecho.

Disponible online en http://desarrolloweb.com/articulos/componente-firebase-auth.html
Pgina 71 de 78
Manual de Firebase
Firebase desde el servidor

Firebase tambin se puede acceder desde el backend, y de hecho es algo que aplicaciones medianas y
complejas necesitarn con toda probabilidad, pues no toda la lgica de aplicacin o de negocio se puede
implementar con seguridad del lado del cliente. Adems hay ciertas funcionalidades de los servicios de
Firebase que solo se puede hacer desde un entorno seguro de servidor.
Firebase 3 desde el servidor NodeJS

Cmo configurar tu aplicacin de Firebase para acceder desde NodeJS, configurable en un
servidor, desde el que hacer tareas administrativas.
Firebase es una plataforma para desarrollo de aplicaciones que tiene como caracterstica el permitir
desarrollar slo programando la parte del frontend. Nos ofrece lo que se llama un "backend as a service", as
que no tienes que crear tu propio backend, sino usar el que te ofrece Firebase, configurando segn tus
necesidades. Todo eso ya lo sabemos Entonces por qu puedo necesitar acceder a Firebase desde un
servidor?
Quizs cuando las exigencias de tus aplicaciones vayan siendo mayores observars que determinados tipos
de operaciones no se pueden dejar solo en la parte del backend, principalmente debido a la seguridad y a
ciertas reglas de negocio que no se pueden dejar simplemente en la parte del frontend, pero tambin para
desarrollar mdulos que no puedes hacer desde la parte del frontend.
Ejemplos puede haber muchos. Por poner unos casos genricos:
Enviar email a tus usuarios avisando de sucesos producidos en la aplicacin.
Escribir en ciertas zonas de la base de datos que no deberan tener permiso desde el frontend, para
asegurarse que nadie escribe cosas que no debe.
Colocar datos extra en el token de autenticacin para poder acceder a ellos desde las reglas de
seguridad de la base de datos o del servicio de storage.
Para todo ello podemos conectar desde un servidor con la aplicacin Firebase y acceder a las
funcionalidades del SDK desde un entorno seguro.
Pgina 72 de 78
Manual de Firebase
Java Vs Node
Existen dos lenguajes que podemos escoger actualmente para hacer esta actividad: Java o NodeJS. Ambos
permiten las mismas operativas, usando SDKs distintos. En principio es indiferente cul de los lenguajes
usar, aunque quizs la eleccin depende de:
Si ests familiarizado con Javascript o el desarrollo web en general tendr ms sentido escoger
NodeJS, pues el SDK es exactamente el mismo que usas para el Javascript del lado del cliente.
Si ests ms familiarizado con el desarrollo web en Java, o el desarrollo de apps nativas para
Android, quizs te interese ms Java.
Insistimos que la eleccin depender ms de costumbres y preferencias. En cuanto a requisitos del servidor
y esas cosas, quizs con Java la configuracin de la mquina pueda ser un poco ms compleja pero si
conoces Java no ser un problema para ti.
Nota: Cuando mencionamos un "servidor", obviamente, puede ser cualquier ordenador conectado a
Internet que tenga instalados los correspondientes lenguajes. Para desarrollo usars tu propio ordenador
en local, pero en produccin generalmente ser un servidor contratado. Como alojamientos compartidos
que soporten Java o NodeJS hay pocos, quizs querrs contratar un servidor cloud o VPS para instalar
tus aplicaciones necesarias y configurarlas a tu gusto.
En este artculo vamos a introducirnos en la configuracin de tu aplicacin en un servidor NodeJS, ya que

es ms orientado al desarrollo web y seguramente los lectores (as como yo mismo) tengan ms experiencia
en Javascript.
Ten en cuenta los requisitos para comenzar, aunque prcticamente cualquier persona los tendr ya que solo
consta de NodeJS versin 0.10 o posterior.
Nota: Debes tener en cuenta que este mtodo de acceso a Firebase desde el servidor te dar privilegios
totales contra Firebase. Esto debes usarlo solo en un entorno de backend seguro. Si lo que ests
queriendo hacer es uso del backend para un conjunto de funcionalidades limitadas a las que accedern
usuarios comunes de tu aplicacin, entonces debes iniciar Firebase con el mismo procedimiento con el
que inicias del lado del frontend.
Instalar el SDK de Firebase para NodeJS

El SDK para NodeJS es el mismo que para Javascript, por lo que podrs usar exactamente el mismo
Javascript. No obstante, con el desarrollo para NodeJS usas generalmente npm, por lo que comenzaremos
instalando el script de Firebase con el comando:
npm install --save firebase-admin
Pgina 73 de 78
Manual de Firebase
Nota: Por si no lo sabes, la opcin --save sirve para que guarde la dependencia en el archivo
package.json. Ese archivo tiene que estar creado previamente, algo que se hace con el comando "npm
init" y respondiendo la serie de preguntas del asistente que nos aparece.
Nota: Si no ests familiarizado con el desarrollo de NodeJS, por favor lee los primeros artculos del
Manual de NodeJS.
Inicializar nuestra aplicacin Firebase

El siguiente paso es inicializar la aplicacin de Firebase. Para ello necesitas hacer un par de pasos.
1.- El primero de ellos es en la consola de Firebase, para descargar un JSON con las credenciales
de tu cuenta. Lo consigues as:
Desde tu app en Firebase, en la rueda dentada de las opciones de la izquierda, selecciona "Permisos"
Aparecers en la consola de los servicios de Google Cloud. All tienes que irte a la parte de la izquierda,
donde pone "Cuentas de servicio" y luego en "Crear cuenta de servicio"
En el formulario que encuentras tienes que asignar un nombre a la cuenta de servicio, decirle que suministre
Pgina 74 de 78
Manual de Firebase
una nueva clave privada, de tipo JSON y pulsar el botn "crear".
Otra operacin que debes realizar es darle permisos al 'service account', al menos de editor de proyecto, en
el desplegable de la siguiente imagen.
Pgina 75 de 78
Manual de Firebase
Pulsamos entonces el botn de "Crear" y habremos terminado la configuracin en la consola, para permitir
acceso desde nuestras aplicaciones del lado del servidor. El JSON con la nueva llave y otros datos de
configuracin de Firebase, se descargar automticamente mediante el propio navegador. Lo tendrs que
copiar en la carpeta de tu proyecto.
2.- Inicializar la aplicacin Firebase, ya con Cdigo NodeJS. Esto requiere que crees un archivo
"index.js" (o el nombre que prefieras) y comiences a codificar la inicializacin de la aplicacin NodeJS,
necesaria para comenzar a trabajar con Firebase.
Lo primero que querrs hacer es el require de la librera "firebase-admin".
var firebase = require('firebase-admin');
Eso lo que hace es poner disponible desde nuestro script Node la librera de Firebase para administrador
desde un servidor Backend. A continuacin colocars el cdigo para traerte el JSON que has descargado
desde Firebase, al crear el "Service Account".
var serviceAccount = require("./TuProyecto-6g5f351ac7ec.json");
Ojo en el cdigo anterior, porque en el campo "ServiceAccount" tendrs que colocar la ruta al JSON
descargado anteriormente (que has copiado en la carpeta de tu proyecto). En mi caso la ruta es simplemente
"./" seguido del nombre del archivo, porque tanto mi script .js como el json descargado estn en la misma
carpeta). Tambin tendrs que poner la URL de tu propia base de datos de Firebase y no la ma.
A continuacin inicializas la aplicacin con las credenciales del Service Account descargado.
Pgina 76 de 78
Manual de Firebase
firebase.initializeApp({
credential: firebase.credential.cert(serviceAccount),
databaseURL: "https://projetopensar-f73e8.firebaseio.com"
});
Desarrollar tus propios scripts para acceso a los servicios de Firebase

A partir de ahora tendrs la posibilidad de crear cualquier tipo de script que realice uso de los servicios de
Firebase. En NodeJS, como hemos mencionado, el API es el mismo que el de Javascript del lado del cliente,
por lo que todo lo que has aprendido en el Manual de Firebase hasta el momento es aplicable aqu.
En este caso vamos a ver un sencillo script de acceso a la base de datos en tiempo real, pero podras
implementar otros servicios como el de autenticacin.
var db = firebase.database();
var ref = db.ref("users");
ref.on("child_added", function(snapshot) {
// Aqu podra desarrollar una funcionalidad de mantenimiento de mi app,
// que se ejecutar cada vez que se crea un nuevo elemento en "users".
// De momento coloco simplemente unos mensajes en la consola.
var el = snapshot.val();
console.log(el);
console.log(snapshot.key);
});
Para ejecutar ese archivo te diriges a la carpeta de tu proyecto desde el terminal y lanzas el comando "node"
seguido del nombre del archivo donde has colocado el script (ver luego el cdigo completo si tienes dudas).
cd mi/proyecto
node index
Nota: Como debes saber, al invocar desde consola un programa escrito en NodeJS no necesitas indicar
su extensin .js. Si lo indicas no pasa nada y por supuesto funciona tambin.
Entonces vers los datos que tengas en la coleccin "users", o aquella que hayas colocado en el cdigo, y el
nuevo objeto generado en cada nueva insercin. La salida, que obtienes en el terminal de lnea de
comandos, sera algo como esto:
{ nombre: 'Miguel Angel Alvarez Snchez' }
iduser1
{ name: 'user desarrolloweb.com' }
otro
Pgina 77 de 78
Manual de Firebase
El script de nodejs se ejecuta por tiempo ilimitado, escuchando siempre los eventos de Firebase que se
vayan produciendo. Puedes salir del script desde tu consola con CTRL + C.
Con esto lo tienes todo! has conseguido conectar Firebase desde el servidor. Es el primer paso para hacer
cualquier cosa que necesites y no puedas delegar en la parte de frontend.

Disponible online en http://desarrolloweb.com/articulos/firebase3-servidor-nodejs.html
Pgina 78 de 78

Manual Firebase

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Manual Firebase

Hochgeladen von

Copyright:

Verfügbare Formate

Manual de Firebase

Introduccin: Manual de Firebase

Autores del manual

Miguel Angel Alvarez

Primeros pasos con Firebase

Cmo iniciar con Firebase

editamos es un JSON, ya que el sistema de Firebase es de base de datos documental.

Hacer un Hola Mundo en Firebase

Instalar Firebase en un proyecto web

Acceso a los datos por referencia

Nota: Lgicamente, sustituirs "juegosdemesa" por el nombre de tu aplicacin en la cadena

Evento "value" para sincronizarme con el dato

Conexiones por Sockets

Vdeo de introduccin a Firebase

Para ver este vdeo es necesario visitar el artculo original en:

Nuevos servicios de Firebase

Primeros pasos en el desarrollo para la web con Firebase

Services Firebase, novedades en el API

Nuevas reglas de seguridad predeterminadas

para escrituras, deba realizarse con un usuario correctamente autenticado.

Vdeo de novedades y primeros pasos con el nuevo Firebase

Para ver este vdeo es necesario visitar el artculo original en:

Este artculo es obra de Miguel Angel Alvarez

Base de datos en tiempo real

Escribir datos en Firebase desde Javascript

Nota: Aprende sobre la operativa de Bower en el artculo de introduccin a Bower.

Aunque ahora no entramos en ello, no te olvides a continuacin, ya en un script tuyo, de realizar la

Escribir datos en Firebase con Firebase 3

Trabajo con promesas de Firebase 3

Breves notas sobre el uso de referencias

// accedo al servicio de trabajo con la base de datos en tiempo real

// obtengo una referencia

// escribo en esa referencia

// realizo uso de las promesas

// obtengo una referencia

// escribo en esa referencia

Escribir datos en Firebase 2 y conceptos adicionales de inters para

los objetos referencia.

Obtener una referencia

Mtodo set() para asignar un objeto a una referencia

informacin que queremos asignar a la referencia como parmetro a set().

El mtodo set() siempre sobrescribe

Y sobre esta referencia cargo ahora otro objeto:

Ni rastro de las propiedades antiguas "name" o "company".

Actualizar datos con update()

Vdeo explicativo de la escritura de datos en Firebase

Para ver este vdeo es necesario visitar el artculo original en:

Trabajo con colecciones en Firebase y Javascript

En Firebase no hay arrays

Mtodo push() para insertar un item en una coleccin

var ref = new Firebase("https://ejemplo.firebaseio.com/juegos");

Acceso a elementos de una coleccin

Cmo suscribirse a cambios en los elementos

Vdeo con una prctica de lectura y escritura de colecciones

Para ver este vdeo es necesario visitar el artculo original en:

Sistema de autenticacin de Firebase

Autenticacin en Firebase y Javascript por medio de usuario y password

Habilitar la autenticacin de usuarios por medio de email y password

Registro de usuarios en Firebase

Autenticando usuarios mediante Firebase

Definicin de un evento de cambio en el estado de autenticacin

Realizar logout de un usuario

Como resultado de la ejecucin de este mtodo, si hubiese un usuario autenticado en la aplicacin,

Vdeo del proceso de autenticacin