Guía completa Firebase

Manual de Firebase
http://desarrolloweb.com/manuales/manual-firebase.html Página 1 de 78
Manual de Firebase
Introducción: 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
computación en la nube se conoce como BaaS (Backend as a Service) en el que la tarea principal para el
desarrollo backend será la configuración, en vez de la programación.
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, analítica, etc.
Firebase es compatible con la web, mediante programación Javascript y con numerosas librerías para
trabajar en sistemas diversos como AngularJS, React o Polymer. Pero también es compatible con
dispositivos iOS y Android, así como -por medio de un API REST- en cualquier otra plataforma o
tecnología 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 aplicación. 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 más rápida.
En este manual comenzamos con el trabajo con Firebase en Javascript, y pretendemos abordar otras
tecnologías de desarrollo en breve.
Encuentras este manual online en:

http://desarrolloweb.com/manuales/manual-firebase.html
Manual de Firebase
Autores del manual
Las siguientes personas han participado como autores escribiendo artículos de este manual.
Miguel Angel Alvarez
Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online

EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997,
transformando su hobby en su trabajo.
Manual de Firebase
Primeros pasos con Firebase
En estos artículos veremos cómo dar los primeros pasos con Firebase, tanto para la versión antigua de
Firebase como para la versión nueva. El la nueva versión cambiaron algunas cosas, como el script de
inicialización y una manera nueva de acceder a los servicios ofrecidos por Firebase. Te lo explicamos todo
para que no te pierdas cuando estás comenzando.
Introducción a Firebase
Servicio capaz de proveernos de un Backend en la nube con una fuente de datos en tiempo real y
librerías 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 través de
múltiples dispositivos, evitando muchas de las tareas engorrosas en las que tendríamos que dedicar tiempo
al programar.
Para que nos entendamos, es básicamente una base de datos remota, alojada en la nube y capaz de ser
accedida desde navegadores y apps para dispositivos, que tiene como principal característica que responde
en tiempo real a los cambios realizados en los datos. En la práctica, 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.
ACTUALIZACIÓN: Este artículo se refiere a la versión 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
artículo sobre las nuevas características de Firebase.
Si accedes a la página de inicio de firebase verás una animación de lo que sería una aplicación en tiempo real.
En ella cualquier actualización enviada a través de la web o un móvil se traslada a cualquier otro navegador
o dispositivo que está accediendo a la aplicación. Lo bueno es que esa comunicación se realiza de manera
interna en Firebase sin que el programador tenga que intervenir para nada.
Manual de Firebase
Firebase cuenta con una serie de librerías mediante las cuales podemos conectarnos y mantenernos suscritos
a los cambios de los datos, compatibles con los sistemas más comunes como son iOS, Android y Web, pero
también a varios lenguajes de programación del lado del servidor como podrían ser Python o PHP.
El otro servicio que Firebase nos ofrece principalmente es el de la autenticación, de modo que podremos
realizar login en el sistema y crear aplicaciones multiusuario sin tener que programar toda la parte de la
autenticación. 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
aplicación centrándonos únicamente en la parte del frontend, dejando el backend gestionado por completo
con Firebase.
Cómo iniciar con Firebase
Para iniciar un proyecto con Firebase tenemos que registrarnos en el servicio. Es gratuito siempre que
nuestra aplicación esté en fase de desarrollo. Cuando queramos poner el proyecto en producción 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 más que nuestro tiempo. Al entrar en
el sistema se nos ofrece la posibilidad de usar una aplicación creada para nosotros de prueba, con un
nombre aleatorio, o crear una nueva aplicación con el nombre que nosotros deseemos.
Una vez creada nuestra aplicación podemos administrarla desde un panel de control que nos ofrece las
opciones que resumimos a continuación:
Data: nos ofrece el acceso para visualizar y editar nuestro modelo de datos. Básicamente lo que
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 sección donde podemos escribir las reglas de acceso a
los recursos dentro de Data, así como la validación que se aplicará para decidir si se permite o no
una escritura de información.
Simulator: desde donde podemos simular accesos en diversas situaciones para verificar si tendrían o
no permisos para realizar ciertas operaciones.
Analytics: Una serie de reportes estadísticos con los que podemos monitorar el estado de la
aplicación y la cantidad de recursos que están siendo destinados para su funcionamiento (usuarios
concurrentes, transferencia, etc).
Login & Auth: desde aquí se puede controlar cuáles son los mecanismos que estarán disponibles
para la autenticación de usuarios, tanto email y clave como por redes sociales, junto con los datos de
configuración.
Hosting: Inicialmente con una ayuda para aprovechar lo que sería un espacio de alojamiento donde
desplegar la app realizada. Una vez activado también se pueden controlar aquí las configuraciones
del hosting.
Secrets: por último una página desde donde se administran claves del API de nuestra App que serán
utilizadas para accesos del lado del servidor y autenticación por medio de JSON Web Tokens.
Hacer un Hola Mundo en Firebase
Haremos a continuación lo que sería equivalente a un "Hola Mundo" en Firebase. Básicamente vamos a
acceder a un dato que hay en nuestra base de datos y experimentar como las modificaciones de ese dato
repercuten en mi aplicación que lo está mostrando al usuario. De hecho, comprobaremos que ese dato, una
vez modificado, se actualiza automáticamente en todos los clientes conectados. Quizás parezca mucha
operativa pero Firebase ya te ofrece la mayoría del trabajo listo sin que necesites preocuparte.
Comenzamos editando información de nuestra base de datos, creando un dato que podamos leer. En
próximos artículos mostraremos cómo hacer esto mediante el API de Firebase, así que de momento y para
facilitarnos las cosas, lo haremos desde la sección "Data" del gestor de nuestra aplicación. Te valdrá para
hacer estas pruebas cualquier aplicación que dispongas. Si la acabas de crear comprobarás que la situación
inicial de nuestros datos está con un valor "null", osea, vacío.
Vamos a agregar un nuevo dato con el icono "+" que aparece al lado de "null" cuando acercas el ratón a esa
área de la pantalla.
Verás en seguida un formulario para asignar un nuevo juego de datos en tu aplicación. Aquí debemos
rellenar los pares clave/valor que necesitemos introducir dentro del modelo de esta aplicación. De
momento simplemente vamos a escribir una clave y un valor, pulsando luego el botón "Add".
Manual de Firebase
Ahora tenemos un primer dato en nuestra aplicación. 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 librería Javascript que contiene el código del API
que este sistema nos proporciona para acceder a los datos.
Lo más cómodo es que la instales usando Bower con el correspondiente comando:
bower install firebase
Una vez descargadas las dependencias, verás el archivo firebase.js dentro de bower_components/firebase.
Nota: Seguramente estés familiarizado con esta operativa de gestión de dependencias, pero si no es así
accede al artículo de Bower.
Ahora en la página .html que quieras usar Firebase debes colocar el script firebase.js en la cabecera. Eso nos
permitirá usar el API de Firebase.
Manual de Firebase
<script src="bower_components/firebase/firebase.js"></script>
Acceso a los datos por referencia
Para acceder a información de nuestra aplicación 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 través 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 artículos.
Estas referencias se crean a través de una llamada a la función Firebase(), indicándole como parámetro el
nodo de nuestro modelo que queremos referenciar. Los nodos están compuestos por una ruta definida con
el nombre de tu aplicación, algo como https://ejemplo.firebaseio.com y luego una ruta. Si no indicas
ninguna ruta simplemente accederás a la raíz de tus datos y si especificas una ruta podrás acceder a un nodo
más interior.
Para nuestro primer ejemplo vamos a indicar como referencia la raíz del modelo de datos. Creamos esa
referencia con el siguiente código Javascript:
var ref = new Firebase("https://juegosdemesa.firebaseio.com/");
Nota: Lógicamente, sustituirás "juegosdemesa" por el nombre de tu aplicación en la cadena

"https://juegosdemesa.firebaseio.com/".
Sin embargo, aunque nuestra referencia apunte a la raíz, puedo dirigirme a uno de sus hijos con el método
child().
ref.child("appName")
Evento "value" para sincronizarme con el dato
En Firebase cuando accedes a una información puede tener un estado determinado, pero sin embargo al ser
una aplicación 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 facilitándome el nuevo estado de manera automática.
Por tanto, mientras que en otro tipo de sistemas consultarías 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 más 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 librerías como jQuery, nos suscribimos a eventos con el
método on(). El evento al que nos vamos a suscribir es "value".
ref.child("appName").on("value", function(snapshot){
Manual de Firebase
console.log(snapshot.val());
document.getElementById("titular").textContent = snapshot.val();
});
El método on() me permite suscribirme indicando el nombre del evento que me interesa, en este caso
"value" y la función que queremos registrar como manejadora del evento. En esa función recibiremos el
"snapshot" que es una instantánea del dato que tenemos en Firebase. Cuando cambie se disparará de nuevo
el método recibiendo la siguiente instantánea.
Para acceder al valor de la instantánea usamos el método 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 rápido en recibir los cambios que
hayan realizado en el modelo. Cuando un cliente abre una página donde se usa Firebase se mantiene abierto
un canal de comunicación con el servidor bidireccional, que permite comunicarse desde el cliente al servidor
y desde el servidor a todos los clientes.
Para experimentarlo abre la página que acabas de programar. Por si no ha quedado claro lo que deberías
tener, te mostramos el código 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 sección "Data",
simplemente cambia el dato que hay en el campo "appName" que habíamos creado al principio. El cambio
debería trasladarse casi al instante hacia todos los navegadores que tuvieses visualizando en esa página. Si no
Manual de Firebase
es así revisa los pasos anteriores y consulta el vídeo que encontrarás un poco más abajo.
Nota: Firebase también 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 utilizarás desde lenguajes
de servidor como PHP o Python. Sin embargo, las comunicaciones por sockets son mucho más rápidas
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 comunicación permanece abierto y los datos fluyen de un lado a otro sin
más. Además los sockets permiten una comunicación 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 estén produciendo.
Vídeo de introducción a Firebase
Para facilitarte las cosas te contamos en vídeo todo este proceso de trabajo con Firebase que te hemos
relatado en el artículo, agregando consideraciones y consejos diversos.
En el vídeo podrás 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 vídeo es necesario visitar el artículo original en:

http://desarrolloweb.com/articulos/introduccion-firebase-backend-nube.html
Este artículo 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 versión 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 vídeos sobre Firebase aquí en
DesarrolloWeb.com, en los que hemos podido conocer muchas de sus características. A lo largo del Manual
de Firebase encontrarás muchos tips interesantes y descripciones de uso de su API.
Pero en esta ocasión nos hemos visto obligados a volver un poco hacia atrás, porque se ha presentado en
mayo de 2016 una gran revisión 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 autenticación
Hosting de archivos estáticos
Manual de Firebase
Y ahora se ha transformado en una completa suite de características y utilidades realmente impactante que sí
resuelve la mayoría de las necesidades que los desarrolladores tienen al crear las aplicaciones. Es una
tremenda actualización, de mucho interés, porque la mayoría de las cosas que ahora se ofrecen venían
siendo demandadas por los desarrolladores durante los últimos meses o años.
Nuevos servicios de Firebase
Ahora Firebase nos ofrece nuevas características, de mayor o menor importancia. Algunas son para el
desarrollo de todo tipo de aplicaciones y otras están mayoritariamente centradas en el desarrollo de apps
para móviles.
En mi opinión 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
línea de código backend. Los archivos pueden cargarse sin importar las condiciones de red, en
background, y si una subida se interrumpe, se reanuda automáticamente cuando vuelve la conexión,
continuando por donde se había parado. Todo esto lo hace especialmente indicado para usuarios
con pobres conexiones de red. Además usa Google Cloud Storage, por lo que la escalabilidad es casi
infinita.
Notificaciones: Ahora somos capaces de enviar notificaciones a los móviles del usuario, usando
servidores de notificaciones de Google.
Sistema de comprobación de los correos de los registrados: Anteriormente no había posibilidad de
confirmar los correos de los usuarios registrados y aunque esto depende del servicio de
autenticación que ya existía, es una de las novedades más demandadas.
Analítica: de uso de la aplicación, principalmente enfocado al uso móvil.
Además hay una serie de servicios adicionales que conoceremos si visitamos el nuevo website. Iremos
revisando en adelante todas esas características como Cloud Messaging, Remote Config, Test Lab, Crash
Reporting, App Indexing, Dynamic Links, Invites, AdWords y AdMov.
También destaca una nueva escala de precios con una versión gratuita con más generosas posibilidades, que
nos permite usar Firebase incluso en apps que están ya en producción, 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 pequeña introducción a las novedades.
Afortunadamente la mayoría de los conceptos y modos de trabajo son los mismos.
Manual de Firebase
Nueva consola: Ahora existe una consola totalmente renovada para la gestión de una app Firebase, a la
que le han agregado diversas nuevas utilidades para cubrir la configuración de muchos nuevos servicios.
Sustituye al antiguo "dashboard" de Firebase y accedes desde el sitio web de Firebase.
Para crear una nueva aplicación encontrarás un botón bien visible.
En la ventana que aparece escribimos los datos de nuestro nuevo proyecto y al crearlo nos lleva
directamente a la administración de esta nueva app.
Desde allí encontraremos muchas nuevas opciones, acceso a la documentación etc.
Añadir un proyecto a una aplicación web: En la consola de administración de una app encontramos
varios enlaces visibles fácilmente para poder añadir 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 podrás agregar a tu página.
El acceso a estos datos se hace con este icono:
En la caja de diálogo que veremos tenemos que copiar el código de inicialización de la app Firebase. Ese
Manual de Firebase
código debemos pegarlo en nuestro proyecto, justo antes de realizar cualquier tipo de operación con
Firebase.
Una vez inicializada la aplicación 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 sería 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 comenzábamos generando un objeto Firebase a partir
de una URL de nuestra aplicación. Pero ahora, como decimos, está dividido en tres principales objetos, que
obtenemos por medio de tres métodos que dependen del objeto Firebase.
firebase.auth(), nos devuelve un objeto sobre el que podemos acceder al API de Autenticación.
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.
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 artículos.
Una operación de escritura se puede realizar mediante el método 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 artículo Escribir datos en Firebase. Es un artículo
en el que estamos usando el API antigua, pero te explica varios conceptos que son exactamente iguales
en esta versión de Firebase, junto con la descripción y características del método set() y otros que
también 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 información y posteriormente cada vez que esa información cambie, para
ser notificados en tiempo real.
db.ref("metadata").on('value', function(snapshot){
});
Si ya conocías Firebase no tendrás problemas en entender este código anterior. Si no lo conoces cabe decir
que la función manejadora del evento "value" recibe un "snapshot" que no es más que la instantánea 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 método val(): snapshot.val().
Nota: Puedes acceder al artículo 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 verás
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 también 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 encontrarás a continuación. No obstante cabe decir que
las nuevas reglas de seguridad con las que nace una app Firebase fuerzan a que, tanto para lecturas como
Manual de Firebase
para escrituras, deba realizarse con un usuario correctamente autenticado.
Por eso, si estás probando las anteriores instrucciones de set() o el evento "value" para recuperar
información, apreciarás que te arroja errores de permiso denegado. En este caso, solo para experimentar y
con cuidado de no mantener esas reglas en producción, es solo cambiar las condiciones write y read para
poner los valores "true".
Insistimos, mira el siguiente video para mayores aclaraciones. Además explicaremos más cosas para reglas
de seguridad en breve.
Vídeo de novedades y primeros pasos con el nuevo Firebase
En el siguiente vídeo encontrarás más o menos lo que te hemos explicado en este artículo 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
Conclusión
En siguientes artículos seguiremos explicando Firebase y los distintos servicios que ahora incluye.
Continuaremos el Manual de Firebase ya con las nuevas características 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 computación en la nube y muestra que está de muy buena salud.
Esto es una excelente noticia para los desarrolladores también, porque ahora con Firebase serán capaces de
hacer muchas más cosas sin tener que invertir tiempo en la programación de la parte del backend.

Disponible online en http://desarrolloweb.com/articulos/nuevo-firebase.html
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 artículos exploramos el SDK para la web con Javascript, mediante los cuales podemos
acceder a los datos de la aplicación, tanto para lecturas como escrituras.
Escribir datos en Firebase desde Javascript

Cómo realizar la escritura y modificación de un dato de tipo objeto dentro de Firebase, usando
programación para web con Javascript.
En este artículo explicamos cómo 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 versión publicada en
2016). El motivo es que este artículo se escribió originalmente con Firebase 2 y ahora lo estamos
actualizando para Firebase 3. Ambos procedimientos están divididos en bloques diferentes del artículo, para
no mezclar conceptos, aunque la mayoría de las cosas son comunes en una y otra versión.
Debes estudiarlo después de haber leído la parte de introducción a Firebase, que hemos publicado en el
artículo Introducción a Firebase 3. Comenzaremos explicando la parte de escritura de datos con Firebase 3
y resumiremos la información bastante, para ser breves. Aunque, como esta operativa es similar a la que
veníamos realizando en Firebase 2, puedes leer todo el artículo si necesitas afianzar más el conocimiento.
Instalar Firebase 3
Esta parte ya la hemos comentado en el artículo de introducción 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
Manual de Firebase
Nota: Aprende sobre la operativa de Bower en el artículo de introducción a Bower.
Luego colocaremos el script de Firebase en nuestra página, de la descarga realizada con Bower:
Aunque ahora no entramos en ello, no te olvides a continuación, ya en un script tuyo, de realizar la

inicialización de la aplicación Firebase con el snippet que encuentras en la consola. Insisto, todo esto está
explicado en el artículo de introducción 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 través
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 métodos set() o update() sobre una referencia. Así escribes
justamente dentro de esa referencia aquella información 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 código se ejecute
normalmente se necesitará dar permisos de lectura a esa referencia de la base de datos. Más adelante en
el manual de Firebase encuentras información sobre las reglas de seguridad.
En la etapa de desarrollo puedes configurar unas reglas de seguridad más 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 también y explicado con más detalle en el artículo de introducción a
Firebase 3.
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
información contenida en la referencia, poniendo la información nueva que se está seteando. Por su parte
update() hace lo que conocemos como un "merge", es decir, cualquier información existente se actualiza a la
información que se le está entregando y cualquier información que ya hubiera (y no se esté actualizando en
el update), se mantiene.
Nota: Por favor, para más información sobre las operativas de set() y update() lee el artículo hasta el
final, porque esto no ha cambiado y ya se había explicado convenientemente con ejemplos para la
anterior versión 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 código como respuesta a diversas situaciones. Las promesas forma parte del estándar de ES6, pero
Firebase ya las implementan porque favorecen bastante la escritura y mantenimiento del código, 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 código que
se ejecutará posteriormente al intento de escritura, pudiendo diferenciar entre un caso exitoso y un posible
error.
En concreto, el método set() o update() nos devuelven una promesa, sobre la que podemos invocar tanto
un método then() como un método catch(). A then() le pasamos la función que tiene el código que
deseamos ejecutar cuando la escritura se ejecutó correctamente. A catch() le pasamos la función que se
ejecutará si esa escritura produjo un error.
Todo eso en código 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 estás trabajando con datos, unos pueden estar dentro de otros y otros
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 anidación se separan mediante el carácter 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, tendríamos una estructura como esta:
users: {
iduser1: {
nombre: 'Miguel Angel Alvarez',
email: 'malvarez@desarrolloweb.com'
},
iduser2: {
nombre: 'Alvaro Martínez',
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 anidación con la "/".
var referencia = databaseService.ref('users/iduser1');
Si quiero acceder únicamente al nombre del usuario primero, entonces mi referencia quedaría así:
var referencia = databaseService.ref('users/iduser1/nombre');
Como alternativa, puedes navegar entre referencias por medio del método child() del API de Firebase:
var referencia = databaseService.ref('users').child('iduser1').child('nombre');
referencia.set('Miguel Angel Alvarez Sánchez');
En el siguiente código 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>
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 Sánchez');
</script>
</body>
</html>
Escribir datos en Firebase 2 y conceptos adicionales de interés para

desarrolladores Firebase
En esta segunda parte del artículo vamos a conocer el uso de dos métodos del API de Firebase 2 para
escribir datos en la base de datos que nos ofrece el servicio. Serán los métodos set() y update() que poseen
Manual de Firebase
los objetos referencia.
Nota: La mayoría de la información que encontrarás a continuación tiene validez también para Firebase
3, cambia solo el método para obtener una referencia de la base de datos y el método 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
artículo de iniciación a Firebase, porque hay varios conceptos que vamos a dar por sabidos en esta ocasión.
A lo largo de este texto te explicaremos a introducir un objeto, con diferentes propiedades y valores, en
Firebase y luego cómo 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 artículo anterior. Para ello creamos un
nuevo objeto referencia ayudados por la función Firebase().
var ref = new Firebase("https://ejemplo.firebaseio.com/appData");
Esta operación 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 crearás cierto orden y en la jerarquía que tengas de elementos en el JSON tus datos se
encontrarán en un lugar u otro. En esta ocasión estamos accediendo a un documento que cuelga de la raíz
llamado "appData".
Podrás apreciar que esta referencia nos lleva a un documento que no existe todavía dentro de tu aplicación
Firebase. Esto no es problema, no va a producir ningún error, ya que a Firebase no le importa que la
referencia te lleve a una dirección que está vacía. Además dentro de poco insertaremos datos ahí.
Método set() para asignar un objeto a una referencia
Dada nuestra referencia, con el método set() podemos asignarle un valor. Podría ser una simple cadena o un
número, pero también un objeto todo lo complejo que deseemos. Simplemente indicamos aquella
Manual de Firebase
información que queremos asignar a la referencia como parámetro a set().
var obj ={
name: "Juegos de Mesa",
company: "EscuelaIT",
email: "contacto@escuela.it"
};
ref.set(obj);
En este código 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 aplicación Firebase verás que se crea el juego de datos
sobre la referencia "appData".
Por si algo no queda claro, te proporcionamos el código entero del .html con el que podrías 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 método set() siempre sobrescribe
Una cosa que debemos ser conscientes y que es fuente de errores común cuando estamos iniciando en
Firebase es que set() sobreescribe cualquier cosa que haya en una referencia.
Por ejemplo, si mi aplicación tiene datos en una referencia como los que se asignaron en el paso anterior:
appData: {
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 después de
la operación 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
método update().
var obj2 ={
language: "es"
};
ref.update(obj2);
El método update(), a diferencia de set(), no machaca lo que hubiera anteriormente en una referencia, sino
que hace un merge (fusión) de la información nueva con la vieja. Si en la referencia anteriormente había un
dato que se está mencionando en el update (como "email" en este anterior código), 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 artículos explicaremos otro método interesante, llamado push(), que nos permite enviar
elementos, generalmente para crear colecciones de datos, a Firebase.
Vídeo explicativo de la escritura de datos en Firebase
Puedes experimentar estos dos métodos en tu propia aplicación Firebase para ir entendiéndolos mejor. A
pesar de estar haciendo cosas sencillas es normal que todavía se te presenten algunas dudas al tratarse de un
nuevo sistema. Si es tu caso hemos preparado el siguiente vídeo.
Manual de Firebase
En este videotutorial verás cómo creamos un objeto usando set() y cómo se actualiza nuestro juego de datos
en Firebase. Luego mostramos la diferencia entre hacer una operación de update y una de set.
Por último mostramos cómo se puede acceder a los datos de Firebase desde otra página web, que estará
suscrita a los eventos producidos cuando se cambie el valor de un dato, para actualizarlo en la página
automáticamente.

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 práctica 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 básicamente un ejercicio en el que
insertaremos datos en una colección y luego otro ejercicio para mostrar esos datos, que a su vez tendrá dos
grandes bloques: la operativa para mostrar nuevos elementos en la colección cuando sean creados y la
operativa para actualizar la página 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 artículo de
iniciación a Firebase.
También vimos anteriormente cómo realizar operaciones de escritura y lectura de documentos, la diferencia
ahora es que no vamos a escribir y leer un documento, sino una colección. Por ejemplo, en tu base de datos
de Firebase podrías tener un usuario con sus datos. Cada usuario es un "documento". Pero nuestra
aplicación podrá manejar un número indeterminado de usuarios, por lo que tendremos una colección de
usuarios.
En Firebase no hay arrays
Manual de Firebase
Esto es un detalle importante de conocer previamente nos enfrentemos a esta práctica. Merece la pena verlo
con detalle detenidamente más adelante, pero de momento simplemente lo vamos a mencionar para ir
directamente a la práctica.
Tenlo en cuenta, en Firebase no tenemos arrays. Por eso, aunque lo más inmediato sería pensar que nuestra
colección de usuarios se encuentra en un array, lo cierto es que no va a ser así. La colección en Firebase está
compuesta por un objeto cuyas propiedades son el índice de la colección y el valor es el objeto de cada item.
Lo verás 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 alfanumérica 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 más adelante para nuestra operativa en la
programación.
Método push() para insertar un item en una colección
En Firebase cuando queremos insertar un item en una colección, y no nos importa que identificador se le
asigne, podemos usar push().
El método 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 método set() para cargar cualquier dato.
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 recién creado.
ref.push({
propiedad: "Valor"
});
Además, como segundo parámetro, push() podría recibir una función callback que se ejecute cuando el dato
se haya guardado dentro de Firebase.
En el siguiente código insertamos tres objetos juego sobre una referencia.
var juego1 = {
name: "Colonos de Catán",
author: "Klaus Teuber",
yearPublished: 1995
ref.push(juego1);
var juego2 = {
name: "Carcassonne",
author: "Klaus-Jürgen 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 colección
Espero que recuerdes las explicaciones de los anteriores artículos en las que hablamos de la necesidad de
usar eventos para acceder a datos de Firebase, básicamente 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 colección y realizar algo para cada uno de esos item,
como mostrarlo en pantalla, tenemos que usar el evento "child_added" sobre la referencia.
Manual de Firebase
Este evento "child_added" se ejecuta cada vez que un objeto es añadido a una colección. De modo que se
disparará el evento cuando:
1. Una vez por cada item existente en la colección en el caso que estemos accediendo a una colección
por primera vez.
2. Posteriormente al primer acceso el evento se disparará una vez para cada item que se introduzca
dentro de la colección.
De modo que, para nuestra necesidad, acceder a los elementos de una colección, usaremos este evento, que
nos servirá para recuperar los item actuales hacer cosas con cada item que pueda llegar a introducirse más
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 instantánea del elemento actual. Si hay 10
elementos en la colección este manejador se ejecutará 10 veces y en cada ejecución tendremos el item actual.
Ya solo nos quedaría hacer cosas con ese snapshot.
Para la operativa te interesará conocer dos métodos 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 código, 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());
});
Podrás comprobar que se listan los elementos iniciales de la colección y, si más adelante se agregan nuevos
elementos, se listarán igualmente.
Cómo suscribirse a cambios en los elementos
El evento que acabamos de conocer, "child_added", solo nos notificará de nuevos elementos agregados a la
colección. Pero sin duda más pronto que tarde querrás saber cuándo los elementos de una colección han
sufrido cambios. Eso lo consigues con el evento "child_changed".
Cada vez que un item en una colección 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
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());
});
Vídeo con una práctica de lectura y escritura de colecciones
Para completar las explicaciones anteriores hemos creado un vídeo que esperamos pueda aclararte mucho
mejor toda la operativa de acceso a colecciones, tanto para lectura como escritura.
En este vídeo verás cómo se crean colecciones y se almacenan en la base de datos de Firebase. Luego
veremos cómo acceder a colecciones, para mostrar sus valores y suscribirse a los cambios que se produzcan,
tanto cuando se inserten nuevos item a la colección 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
Manual de Firebase
Sistema de autenticación de Firebase
A continuación vamos a explorar las funcionalidades del sistema de autenticación 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.
Autenticación en Firebase y Javascript por medio de usuario y password

Mecanismos para autenticación de usuarios en aplicaciones bajo el servicio de Firebase, con
código 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 autenticación de usuarios, que vamos a introducir en este artículo.
Para el desarrollo de aplicaciones con Firebase contamos con un completo sistema, capaz implementar
todas las fases del proceso de autenticación de usuarios en una web o aplicación 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, recuperación de contraseñas perdidas, login y logout del sistema, etc.
Firebase tiene diversos mecanismos de autenticación, por medio del típico par usuario / clave y por medio
de diversas redes sociales. Además tiene otro sistema "custom" que nos permite derivar el proceso de
autenticación a lógicas de negocio más complejas que puedas tener en el backend tu aplicación actual. En
este artículo abordaremos el proceso de registro y autenticación por medio de email y contraseña.
Habilitar la autenticación de usuarios por medio de email y password
Antes de comenzar a realizar ninguna otra acción debemos configurar nuestra aplicación Firebase para que
permita autenticación por medio de email y password. Esto se realiza desde el panel de administración de tu
aplicación, en el sitio web de Firebase.
Entrando en la aplicación que estemos usando, tienes que ir a la sección "Login & Auth" y luego a la
pestaña "Email & Password". Ahí encontrarás un checkbox etiquetado como "Enable Email & Password
Manual de Firebase
Authentication" que deberá estar marcado para permitir este modelo de autenticación de usuarios.
Registro de usuarios en Firebase
Para abordar el sistema de autenticación de Firebase comenzaremos explicando cómo se registra un usuario
dentro del servicio de Backend. Trataremos de realizar ejemplos sencillos para comenzar, usando las
alternativas más elementales. Pero recuerda que siempre tienes la documentación en el propio sitio de
Firebase, donde podrás encontrar más información.
Para registrar usuario necesitamos invocar el método createUser() sobre una referencia. La ruta de nuestra
referencia será simplemente la raíz de nuestra base de datos, es decir, la URL principal de nuestra aplicación
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 estén registrados. En el código anterior has visto cómo crear este objeto usuario por
medio de un literal de objeto JavaScript, pero lo más normal sería que ese objeto lo construyas por medio de
los datos recabados mediante un formulario.
Al método createUser() le enviamos dos parámetros. En el primero indicamos el objeto usuario que
acabamos de construir y en el segundo indicamos una función callback, que nos permite ejecutar código
cuando el intento de crear el usuario haya sido finalizado. Esta función callback recibe a su vez como
parámetro 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 descripción del
problema que Firebase ha detectado.
Se verá mejor con el código que encuentras a continuación:
ref.createUser(user, function(error){
if(error){
console.log(error.code);
}else{
console.log("Tu usuario se ha registrado");
});
Autenticando usuarios mediante Firebase
Manual de Firebase
Una vez que hemos registrado nuestro primer usuario podemos proceder a realizar un intento de
autenticación con el mismo.
Para realizar el intento de autenticacion del usuario utilizamos el método authWithPassword() sobre una
referencia a nuestra base de datos Firebase, igual que antes..
Nota: Recuerda que firebase implementa diversos métodos de autenticación de usuarios y nosotros
estamos viendo ahora el que nos permitiría loguearnos por medio del usuario que se ha registrado en el
paso anterior. Para otros mecanismos se usan métodos diferentes de authWithPassword(). Más adelante
trataremos otros métodos de autenticación.
El método authWithPassword() recibe como parámetro el objeto usuario con las credenciales de acceso.
var user = {
email: "malvarez@desarrolloweb.com",
password: "1234"
};
ref.authWithPassword(user);
Nota: Fíjate que el objeto usuario "user" el mismo que habíamos construido anteriormente. Volvemos a
repetir que lo normal no será utilizar un literal de objeto, sino recibir los datos de autenticación por
medio de un formulario.
El método de autenticación authWithPassword() también podría recibir como parámetro una función
callback para realizar acciones cuando se tiene resultado del intento de acceso del usuario, pero nosotros
ahora vamos a conocer otra vía para ser notificados cuando se haya producido un cambio en el estado del
usuario (pasar de loguedado a no logueado o viceversa).
Definición de un evento de cambio en el estado de autenticación
Existen diversos mecanismos para saber si un usuario está logueado o no en una aplicación Firebase.
Vamos a implementar en esta ocasión uno que permite estar notificados de cualquier cambio en el estado de
autenticación del usuario, de manera asíncrona.
Se trata de usar el método onAuth(), que también pertenece a la referencia Firebase. Este método recibe
como parámetro una función que nos permite ejecutar acciones cuando se ha producido un cambio del
estado de autenticación del usuario. Veamos primero el código de la invocación de onAuth(), porque así
será más fácil entender cómo funciona.
ref.onAuth(function(data){
if(data){
console.log("El user está autenticado con identificador: ", data.uid);
Manual de Firebase
}else{
console.log("no tengo usuario autenticado");
});
Como puedes ver, la función enviada como parámetro al método onAuth() recibe a su vez un parámetro
que hemos nombrado en el código como "data". Ese parámetro contiene los hipotéticos datos de
autenticación del usuario. Realmente pueden ocurrir dos cosas:
Si el usuario no está autenticado, simplemente recibiremos un null como valor de ese parámetro. En el caso
de que el usuario sí estuviera autenticado en ese parámetro recibiremos los datos de autenticación del
usuario que está correctamente logueado.
De entre todos los datos que se pueden consultar por medio del objeto de autenticación 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 declaración de este evento onAuth() se ejecuta una primera vez la función indicada por
parámetro. Luego, en cada cambio autenticación, se volverá a ejecutar esa función. Por ello, aunque no
se realice ningún intento de autenticación durante el uso de tu aplicación, solo por haber definido este
evento onAuth(), siempre se verá el resultado de la ejecución de la función por lo menos una vez.
Realizar logout de un usuario
Para realizar el logout de un usuario que se encuentra autenticado usamos siempre el método unauth(), qué
depende también de la referencia a nuestra aplicación Firebase.
ref.unauth();
Como resultado de la ejecución de este método, si hubiese un usuario autenticado en la aplicación,

simplemente se realizará el cierre de su sesión. Con ello veremos que se ejecuta otra vez la función definida
para el evento onAuth().
Vídeo del proceso de autenticación
Todo el proceso que has visto explicado En este artículo se encuentra descrito en un vídeo tutorial que
hemos publicado en YouTube. Si tienes 18 minutos te recomendamos ver el vídeo detenidamente porque
encontrarás mucha más información de la que hemos podido resumir en el anterior texto.
En el vídeo encontrarás paso a paso la realización de un registro de usuario, cómo se puede más tarde
autenticarse con las credenciales de usuario y cómo utilizar el método onAuth() para ser notificados ante
cualquier cambio de estado del usuario que está visitando la página. Si el uso de onAuth() no ha quedado del
todo claro, es importante que veas el vídeo 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
autenticación.
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
Autenticación de usuarios con redes sociales en Firebase 3

Cómo autenticar usuarios en una aplicación usando cuentas de Facebook, Twitter, Google o
Github, de una manera sencilla con Firebase.
Firebase nos entrega todo lo que necesitaríamos para realizar una aplicación sin tener que dedicarnos a
hacer la parte del backend. Entre los servicios de Backend la autenticación 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 artículo del Manual de Firebase, podemos loguear al usuario mediante usuario y
clave, pero también 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 artículo.
Actualización: En este artículo vamos a abarcar tanto el código con Firebase 2 como el código con
Firebase 3. Siendo los conceptos de autenticación comunes a ambas versiones, así como a la mayoría del
desarrollo para la web. Para que quede clara la organización de este artículo cabe decir que
comenzaremos con una serie de conceptos importantes sobre los sistemas de autenticación. Luego
veremos ya el código sobre cómo se implementan en Firebase, v2 y v3, dividiendo los apartados de
manera que quede clara la identificación de cada código y su correspondiente versión.
Administrar el servicio de autenticación
Antes de poder autenticar a un usuario con redes sociales tenemos que realizar unas pequeñas
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 podrás apreciar es que han cambiado el
diseño de la consola, pero básicamente los campos para configurar son exactamente los mismos. Por tanto,
este punto es común para cualquier versión de Firebase.
En el panel de control de Firebase podemos administrar las alternativas de autenticación de los usuarios de
Manual de Firebase
la aplicación. Tenemos que comenzar habilitando aquella autenticación 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.
Además tendremos que entregar las credenciales de la app creada en la correspondiente red social. Estas
credenciales las creamos desde la propia página 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 varía para cada caso. En general es algo rápido y no necesita aprobación por
parte de la red social, simplemente la creas a través de su página. Sin embargo el modo de actuar cambia con
cada red social que estés trabajando.
Todas al final te entregan dos cadenas que debes usar para configurar el servicio de autenticación desde el
Dashboard de tu app en Firebase.
App Id: Es el id de tu aplicación. Ese identificador es público, cualquiera lo puede ver.

App Secret: Esta es una llave de tu app, que se necesita para confirmar que tú eres realmente el
dueño de esa app. Ese dato es privado y debería guardarse en un sitio seguro.
Nota: En la documentación de Firebase está muy bien detallado el proceso de creación 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 código para autenticar usuarios y no tanto en la operativa para cada app de red social. Por
si te sirve, la operación que necesitas hacer con la red social se llama autenticación "oAuth".
El otro paso que no se nos puede olvidar es configurar la URL de redirección oAuth. Esto es algo que te
informan en la consola de Firebase, que tiene una forma como https://tu-
app.firebaseapp.com/__/auth/handler. Esta URL la copias desde la página de administración de la app en
la consola de Firebase (sección Auth / Método de inicio de sesión / Red social deseada) y luego la tienes
que configurar en la página de administración de la App generada en la red socia con la que quieras
autenticar.
Manual de Firebase
Cómo funciona el proceso de autenticación social
Antes de ver código (que enseguida verás que es muy sencillo) vamos a explicar cómo funciona el sistema
de autenticación social. Básicamente 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 página
de la red social y no en tu propio sitio. Es decir, tú, como dueño de una aplicación, 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 autenticación debe redirigir al usuario a la página de su red social y después del
intento de acceso autenticado, se debe redirigir de vuelta a tu aplicación con un resultado. En ese ir y venir,
pueden intervenir dos mecanismos. O bien la página de autenticación en la red social se abre en un popup,
o bien se realiza una redirección. Estos dos mecanismos se podrían combinar incluso, de modo que si uno
de ellos no es posible de realizarse, se intente mediante el otro mecanismo.
Código para la implementación de una autenticación con Facebook en Firebase 3
En la nueva versión de Firebase, lanzada en 2016, se cambió ligeramente la estructuración del API de
autenticación. Por tanto, a partir de este punto explicaremos el código para Firebase 3. Más adelante podrás
ver también el código para Firebase 2.
Manual de Firebase
Ya que estamos en Firebase 3, debemos comenzar inicializando nuestra aplicación. No vamos a entrar en
este detalle ya que debe estar claro anteriormente. Si no es así, puedes leer el artículo de Introducción a
Firebase 3.
Para la parte de autenticación 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 código:
var provider = new firebase.auth.FacebookAuthProvider();
A continuación 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 aplicación 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 métodos principales para realizar autenticación, por medio de un popup y por medio de una
redirección. 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 redirección. En la parte final de este artículo, cuando comenzamos a ver el
código de Firebase 2, se explica con más detalle la diferencia entre estas dos alternativas, popup o
redirección.
Para el acceso al API de autenticación de Firebase podemos comenzar accediendo al servicio de

autenticación:
var authService = firebase.auth();
Una vez tienes el servicio de autenticación, con la siguiente línea de código lanzaríamos 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 métodos de autenticación de Firebase te
responde con una promesa. Debes ya saber algunas cosas sobre promesas, porque las hemos visto en
artículos anteriores. Básicamente las promesas de Firebase funcionan como las promesas del propio ES6.
De este modo podríamos ejecutar acciones tanto para un resultado de autenticación positivo como para un
error de autenticación.
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 página donde se realiza el proceso de autenticación con Facebook. Recuerda que
para que el código funcione debes haber configurado correctamente tu app en Facebook, así como la
aplicación 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 autenticación
var provider = new firebase.auth.FacebookAuthProvider();
// opcionalmente modifico el scope
provider.addScope('user_friends');
// accedo al servicio de autenticación
// evento para el botón de login con facebook
document.getElementById('loginfacebook').addEventListener('click', function() {
// autentico con Facebook
//todo correcto
Manual de Firebase
console.log('autenticado usuario ', result.user);
})
console.log('Detectado un error:', error);
});
})
</script>
</body>
</html>
A partir de ahora, en este artículo encuentras el modo de login social con Firebase 2. En principio si estás en
Firebase 3 no haría mucha falta que lo leyeras, sin embargo, se explica con mucho más detalle algunos
puntos interesantes, como el caso de los mecanismos de popup y redirección, así como otros detalles que
quizás te convenga conocer.
Autenticación con popup en Firebase 2
En este sistema saltará una ventana emergente. Es importante señalar que esas ventanas emergentes,
comúnmente conocidas como popups, muchas veces son bloqueadas por los navegadores. Para evitarlo
generalmente es suficiente con lanzarla como resultado a la pulsación sobre algún elemento de la página, ya
que los bloqueadores de popups no se activan cuando se trata de abrir la ventana emergente como respuesta
a un evento click.
Nuestro código para realizar una autenticación 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("Autenticación correcta. User: ", authData);
});
Como ves, se usa el método authWithOAuthPopup() al que se le indica el conector social que se quiera
usar. En este caso es "facebook", pero el código sería exactamente igual para el acceso con cualquier otra
red.
Luego se indica una función callback con las acciones a realizar cuando se produzca el intento de login del
usuario. Aquí puedes gestionar tanto errores de autenticación como accesos permitidos.
Nota: Si quieres de manera asíncrona estar informado cuando se produzca una autenticación, el
mecanismo es por el método onAuth() que vimos en el anterior artículo sobre Autenticación por medio
de usuario y password. Esto es interesante porque te podría permitir prescindir de la función callback
para los casos de autenticación correcta y es clave para el método de autenticación por redirección, que
enseguida te comentamos.
Manual de Firebase
Autenticación 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 autenticación usando una redirección. El código es prácticamente 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 redirección
});
Solo cambia el nombre del método 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 redicción de
vuelta a nuestra app.
Nota: En este caso, ya que en la redirección no se puede detectar el retorno, no se llegará a ejecutar la
función callback para el caso positivo. Por ello será importante conocer el método onAuth(), que es
donde detectaremos que el usuario consiguió autenticarse correctamente.
Qué escoger, redirección o popup
Si te preguntas qué escoger entre popups o redirecciones, la respuesta puede ser una combinación de ambas,
ya que en unos navegadores están permitidas unas y otras no, así como en el desarrollo de aplicaciones
híbridas donde a veces tenemos solo un mecanismo disponible.
Para implementar esta doble alternativa podemos hacer uso de una técnica "fallback". Para ello detectamos
el fallo en la función callback entregada a authWithOAuthPopup() y en ese caso lanzamos el proceso de
redicción con redirección.
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 código */ });
});
Usuario autenticado correctamente
Cuando tenemos un usuario autenticado correctamente todas las redes sociales nos prestan diversos tipos
de información personal. En los siguientes pasos querrás recoger datos adicionales y almacenarlos en tu
Manual de Firebase
base de datos.
Todos esos datos los encuentras a través 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 próximo artículo lo detallaremos para apartar cualquier tipo de
duda.
Para finalizar te ofrecemos la posibilidad de ver este vídeo, donde verás el proceso detallado sobre cómo
autenticar usando la red social Facebook. Además verás cómo se crea una app en Facebook y cómo
configurarla, llevando también los datos de las llaves y el secreto a Firebase para configurar tu propia
aplicación.

http://desarrolloweb.com/articulos/autenticacion-usuarios-rrss-firebase.html

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

En este ejercicio vamos a mostrar cómo realizar una página que permite autenticarse usando el
usuario de Google, solo con Javascript y el SDK de Firebase.
En un artículo anterior dedicado a la autenticación de Firebase usando los usuarios de redes sociales
mostramos el código 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
ocasión.
Además, por abarcar otras redes vamos ahora a autenticar con usuarios de Google. El proceso es
prácticamente 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 artículo cubrimos el flujo completo:
Botón para hacer login

Detectar casos de éxito o fracaso
Detectar cambios en el estado de la autenticación
Manual de Firebase
Hacer logout
Activar los métodos de inicio de sesión
Si quieres que tus usuarios autentiquen con Google, tienes que comenzar activando el inicio de sesión
usando cuentas de este proveedor.
Desde la sección de autenticación, en la pestaña "Método de inicio de sesión" encontrarás la parte de

usuarios de Google que tendrás 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 configuración
de la mayor parte del servicio. No obstante recuerda que siempre tienes que activar el método de inicio de
sesión.
Solo un detalle más. Tu aplicación debe tener posibilidad de hacer inicio de sesión desde el dominio donde
la vayas a ejecutar. Esto es algo que debes hacer también desde la consola de Firebase, en la misma página
de los métodos de inicio de sesión, pero un poco más abajo, sección "Dominios de redireccionamiento de
OAuth". Verás que localhost ya está activado por defecto, pero tendrás que agregar cualquier otro dominio
o IP desde donde vayan a autenticarse usuarios, tanto para hacer pruebas como para poner el sitio en
producción.
Estas son las únicas configuraciones que tendrás que hacer dentro de la consola de Firebase. El resto queda
del lado del código Javascript.
Código de autenticación con Google y control del usuario
En la siguiente parte vas a ver cómo realizar el código de nuestro ejemplo, que está dividido en un HTML
que contiene básicamente los botones de login / logout y un elemento donde mostraremos la información
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 sesión.
Además hay un tercer evento que se debe de crear, que está esperando cambios en el estado de
autenticación. En el momento que se detectan activa (muestra u oculta) los correspondientes botones para
loguearse o cerrar la sesión.
Pensamos que no hacen falta muchas explicaciones porque realmente hemos ido explicando ya todo esto en
artículos del Manual de Firebase.
Como verás, todo forma parte de un archivo HTML con su correspondiente script. Recuerda sustituir los
datos de inicialización de Firebase por los datos de tu propia aplicación.
<!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 autenticación
// manejador de eventos para loguearse
document.getElementById('botonlogin').addEventListener('click', function() {
var provider = new firebase.auth.GoogleAuthProvider();
provider.addScope('email');
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 sesión (logout)
document.getElementById('botonlogout').addEventListener('click', function() {
authService.signOut()
})
// manejador de eventos para los cambios del estado de autenticación
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 página web estática podrás 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 sesión, tal como se explicó en el artículo.

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

Cómo acceder y almacenar en nuestra propia base de datos la información personal de los usuarios
que hacen login social en nuestra aplicación web Firebase.
La autenticación web es una pieza fundamental de Firebase. Ya vimos en el pasado artículo que permitir el
login social en una aplicación es una tarea muy sencilla, gracias a las funciones del API de Firebase. En esta
ocasión iremos un poco más allá y te explicaremos cómo recuperar y almacenar los datos de la persona que
se conecta.
Manual de Firebase
Una vez que un usuario se ha logueado con el conector social correspondiente lo más seguro es que quieras
captar datos personales de la cuenta, con los que personalizar la experiencia de uso de tu aplicación.
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 información personal que necesites tendrás que recuperarla de un
modo u otro. Sabiendo además que existen diferencias diversas entre los proveedores de oAuth que
Firebase nos permite usar:
Información que será posible recabar. Por ejemplo, Twitter no permite saber el correo de los
usuarios.
Información 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 más información 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 artículo sobre Autenticación en Firebase. A lo que ahora agregamos un nuevo
método muy útil, llamado getAuth(), que te proporciona la autenticación de manera síncrona, es decir, en un
instante dado.
var ref = new Firebase("https://ejapp.firebaseio.com");
var authData = ref.getAuth();
Ese método depende, como muchos otros, de una referencia a tu aplicación. Al invocarlo te devuelve los
datos del usuario que está autenticado, o null, si no se autenticó ningún usuario hasta el momento.
Nota: Recuerda además que ese mismo objeto authData lo puedes obtener mediante la función callback
ejecutada tras el intento de autenticación. Además de manera asíncrona mediante onAuth(). Todo eso ya
se explicó.
Si nos hemos logueado con una red social en ese objeto encontraremos toda la información que esa red nos
proporciona. Ese objeto tendrá una forma como se puede ver en la siguiente imagen:
Manual de Firebase
Scope, para solicitar datos adicionales
Observarás que en ese objeto de autenticación a veces no están todos los datos que necesitas, como por
ejemplo el email del usuario
Nota: Como decíamos al principio del artículo, 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 válido 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
aplicación tienes la posibilidad de definir el "scope". Ahora vamos a ver cómo usar ese parámetro,
procedimiento que será exactamente igual autentiques mediante el método authWithOAuthPopup() o
authWithOAuthRedirect().
Nota: En el pasado artículo de autenticación con redes sociales ya explicamos las bases para trabajo con
esos métodos. Ahora veremos cómo indicarle permisos adicionales a través del scope.
// código para gestión del intento de autenticación
}, {
scope: "email"
});
Eso indicará a Facebook que tu aplicación también quiere leer el email del usuario y por tanto Facebook se
encargará de informar al usuario interesado que esta información será accedida. Si el usuario otorga los
Manual de Firebase
permisos entonces se podrá loguear en nuestra página.
Si hubiese necesidad de acceder a varias informaciones extra, se señalarán todos los permisos en la
propiedad scope, separados por comas. Además, en el código siguiente verás que en ese parámetro adicional
también sirve para marcar la persistencia de la sesión del usuario.
ref.authWithOAuthPopup("github", function(error, authData) {
// procesar el intento de autenticación 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
aplicación para mantenerlos con nosotros y personalizar la experiencia de usuario.
El perfil de los usuarios generalmente lo querrás guardar en una entidad, donde tendrás una colección 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 Martínez",
"email": "alvaro@desarrolloweb.com"
En el siguiente código verás cómo realizar el login del usuario. En caso de detectar un logueo correctamente
se podrá acceder a los datos del usuario mediante el parámetro 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 autenticación
} 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'
Manual de Firebase
});
Esta estrategia no funcionaría tan bien si estamos usando el método authWithOAuthRedirect(), puesto que
al producirse la redirección no seremos capaces de ejecutar el código de la función callback. Podemos llevar
esa lógica hacia el método onAuth, que también 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 código que se necesita es bastante elemental, gracias a
Firebase. Para otras redes sociales será un código exactamente igual, o con mínimas diferencias porque el
objeto de autenticación tendrá juegos de propiedades diferentes y algunas veces hasta otros nombres.

Disponible online en http://desarrolloweb.com/articulos/datos-personales-login-social-firebase.html
Manual de Firebase
Otros asuntos importantes de Firebase
Otros artículos sobre servicios importantes de Firebase que sin duda necesitarás para desarrollar
aplicaciones.
Reglas de seguridad en Firebase

Esta es una introducción a las reglas de seguridad en Firebase, por qué se hacen, cómo se
implementan y ejemplos sencillos para mantener seguros los datos de tu aplicación.
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, quién puede leer o escribir, entre otras cosas.
Obviamente es algo necesario, porque si gestionas usuarios lo más seguro es que éstos escriban en algún
momento datos privados, que no quieras que otros usuarios puedan leer. Si tienes roles en la aplicación y
por ejemplo solo los administradores pueden crear determinados tipos de ítem, tendrás que proteger tu
aplicación 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 aplicación,
por medio de un archivo de texto que tiene notación JSON. Es fácil de realizar los primeros pasos, pero
cuando tienes una aplicación grande con un montón de reglas éstas se hacen difíciles de leer o mantener,
por lo que la recomendación nuestra es aprender "Bolt", un lenguaje propio de Firebase (bastante parecido
a Javascript) que compila produciendo el JSON que necesitarás para implementar las reglas en tu backend.
De momento no vamos a entrar todavía 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 fáciles de escribir, sin embargo, el
lenguaje a veces es un poco abstracto. Además, dado que debemos escribir reglas que den cabida a todas las
posibles situaciones, la dificultad puede ser elevada para dar con la fórmula correcta, sobre todo si no estás
acostumbrado a trabajar con este sistema.
En este artículo vamos a experimentar reglas sencillas por lo que comprobarás que todo resulta bastante
fácil. Luego en aplicaciones mayores será donde encontremos más problemas y dónde surgen las dudas.
Manual de Firebase
Llegaremos allí.
Comencemos echando un vistazo a las reglas de seguridad que encontramos en una aplicación firebase
recién creada.
"rules": {
".read": true,
".write": true
Como ves se utiliza una notación 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 situación, lógicamente esto está
bien para que nuestra aplicación nos permita empezar a trabajar pero no será lo adecuado cuando
pongamos esta aplicación en producción.
Nota: Además de ".read" y ".write", en Firebase también podemos escribir reglas en ".validate" para
poder validar datos antes que éstos sean escritos dentro de la aplicación. Esta validación de datos es
fundamental para asegurarse que las cosas que se guardan en la base de datos tienen la forma que
debería tener, pero no la hemos cubierto en el presente artículo.
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 aplicación, podríamos tener una estructura de reglas de seguridad
como la que sigue:
"rules": {
Manual de Firebase
"perfiles": {
".read": true,
".write": false
Así estaríamos 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 más precisos con las cosas que se pueden hacer o no
se pueden hacer en la aplicación.
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, dueño de su propia información perfil. Sin embargo, para
nuestra aplicación sí que sería 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 aplicación.
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 artículo y otros
que le seguirán. De momento vamos a aprender a manejar las que necesitamos para las reglas que nos han
pedido cubrir.
Identificador del usuario autenticado: A través 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: También 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 todavía)
podremos acceder a "$user_id" para saber el identificador del usuario que se intenta leer o escribir.
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 deberías
poder entender estas reglas de seguridad implementadas.
"rules": {
"perfiles": {
"$user_id": {
".read": "auth != null",
".write": "$user_id === auth.uid"
Básicamente estamos aplicando seguridad a la entidad "perfiles". Dentro de la entidad tenemos declarada la
"Variable [[--body--]]quot; "$user_id" que nos dice cuál 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 sólo se concederá cuando el identificador del usuario al que se
pretende acceder sea igual del identificador de usuario que está logueado en el sistema.
Conclusión
Comenzar a usar las reglas de seguridad de Firebase es sencillo, sin embargo si quieres ser preciso y muy
específico comienzan a encontarse problemas, básicamente porque el JSON se hace un poco lioso de
escribir y difícil de mantener. La seguridad es un tema muy importante y hay que ser muy cuidadoso. Si
quieres ser detallista observarás que necesitas bastante trabajo, algo que se soluciona muy bien cuando
comienzas a usar "Bolt compiler".
Con esto que has aprendido tienes un pequeño porcentaje de los conocimientos necesarios para establecer
las reglas de seguridad de tu aplicación, pero es un buen comienzo para ir practicando cosas. Nos quedan
ver diversas otras variables disponibles, la validación 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 prácticas y consideraciones para no dejar cabos sueltos en algo tan importante como es la seguridad.
Seguiremos explorando el sistema en nuevos artículos del Manual de Firebase. Mientras tanto te dejamos el
vídeo donde explicamos las Regas de seguridad básicas en Firebase, seguro que le sacas un gran partido.
Manual de Firebase

http://desarrolloweb.com/articulos/reglas-seguridad-firebase.html

Disponible online en http://desarrolloweb.com/articulos/reglas-seguridad-firebase.html
Introducción 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, operación put, desde una página web.
En la nueva versión 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 aplicación. Era una de las demandas más 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 código de la parte del backend.
Firebase Storage funciona usando el servicio Google Cloud Storage por debajo. Existe un depósito de
almacenamiento, llamado "bucket" donde podemos enviar datos que estarán asociados a nuestra aplicación.
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, beneficiándose de varias
ventajas y potencia de la nube de Google y manteniendo un código sencillo y enteramente del lado del
cliente. Además gracias a la integración del servicio de almacenamiento de Firebase podemos crear reglas de
seguridad que usen los datos y usuarios de nuestra aplicación, de modo que podemos mantener los archivos
de cada persona privados o bien compartirlos con otros usuarios que se desee.
En este artículo del Manual de Firebase queremos dar una pequeña introducción al servicio de Storage y
ofrecer un primer script con el que podrás probarlo.
Cómo está organizado el servicio de storage
El almacenamiento en la nube que nos ofrece Firebase está organizado en una estructura jerárquica, igual
que las carpetas en un disco duro normal, o los datos en la "Realtime Database". También usamos el
carácter "/" para separar los niveles, igual que en referencias de la base de datos o carpetas del disco.
Manual de Firebase
carpeta/carpeta/archivo.png
Para navegar por las carpetas existen unos métodos específicos, que para facilitarnos la vida nos sonarán
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 realizarás a continuación 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 sería obtener una referencia raíz y luego con el método 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 método put() que se encargará
de realizar todo el trabajo por nosotros. Este método recibe dos parámetros, el propio archivo a subir y un
objeto con metadatos. El parámetro de metadatos es opcional pero esencial para implementar mecanismos
importantes con respecto al tratamiento de archivos.
El método 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 artículo, 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 básicamente 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 más tarde.
Manual de Firebase
Suscribirse a eventos relacionados con la carga de archivos
Igual que hay eventos que tienen que ver con la autenticación, 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 operación put(). Es el que nos permite suscribirnos a cambios de estado del
proceso de upload del archivo.
Este evento se invoca con el método on() sobre el objeto de la clase UploadTask, al que se le tienen que
indicar varios parámetros.
El evento, "state_changed"
La función 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 podría 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 función callback "Error": que es como cualquier error de Firebase y será invocada en caso que la
carga del archivo falle.
La función 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 función "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 instantánea del estado del upload o al resultado final de la carga. A partir del snapshot podemos obtener
información diversa, como por ejemplo el estado actual, los bytes transferidos, o la URL donde quedó ese
archivo en la nube.
El snapshot pertenece también 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 básicas:
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
dirección donde está disponible ese archivo en la nube.
Ejercicio completo de upload de un archivo a Firebase
Manual de Firebase
Ahora vamos a irnos a la parte práctica y veremos un código 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
autenticación anónima, pero ten en cuenta que debe estar habilitada en la consola de Firebase.
Ten en cuenta también que tendrás que colocar tus propios datos de aplicación Firebase para que funcione.
Explicamos cómo obtener tus datos de inicialización de Firebase en el artículo sobre Introducción 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 autenticación anónima (debe estar activada en la consola de Firebase)
authService.signInAnonymously()
console.error('Detectado error de autenticación', 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);
});
// función 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);
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 función la invocamos para mostrar el mensaje final después 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 código para que no te pierdas. Estamos seguros que después de la lectura del artículo
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 inicialización de Firebase.
Es un script de carga simplificado lo suficiente para que sea sencillo de entender. En otros artículos lo
editaremos para hacerlo un poco más 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, cómo 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 página en local o hacer el despliegue de una aplicación.
Decimos imprescindibles, aunque lo cierto es que podrías empezar a desarrollar sin necesidad de tener las
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 línea 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 tendrías que actualizar.
Esta instalación 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 tendrás que
introducir la clave de tu cuenta de Google, con la que entras en la consola de Firebase.
firebase logout
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 sería capaz de realizar cualquier acción con tus
aplicaciones.
Servidor web integrado
Como sabes, para que tus páginas 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 estáticos, pero podrás usarlo
perfectamente ya que con Firebase no hay programación 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 aplicación usará como "document root"
esa carpeta desde donde lo ejecutaste. Verás que te aparece justamente un mensaje en inglés informando de
esa situación. Pero iniciando una aplicación, como veremos a continuación, evitarás que te aparezca ese
mensaje de aviso y además podrás configurar la raíz del servidor en otras carpetas.
Inicializar una aplicación Firebase
Otra de las cosas más típicas que querrás hacer con Firebase es inicializar una aplicación. Este paso es
imprescindible para luego poder desplegar esa aplicación en el hosting que te ofrece Firebase.
Inicializamos la aplicación de Firebase con el comando:
firebase init
Este proceso recabará una serie de informaciones por línea de comandos, para configurar tu aplicación.
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 querrás ambas
cosas, para lo que pulsas enter.
Luego te preguntará qué aplicación de Firebase, de las que has creado en la consola, quieres que se asocie a
esta aplicación que se está inicializando.
A partir de ahí seguramente podrás proporcionarle otros datos que necesita el comando, pero voy a dar un
algunos tips, que si eres nuevo en Firebase pueden contestarte alguna duda.
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
indícaselo. Pero OJO, en la siguiente pregunta te pedirá si quieres que lo sobreescriba con un código inicial,
dile que no, para que no te borre tus reglas actuales. Si no tienes un archivo de reglas puedes dejar la opción
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 raíz de
publicación, 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 aplicación de una sola página. Ya sabes, una aplicación web
donde solo hay un index.html y todas las rutas de la aplicación realmente se sirven desde el mismo fichero.
Una vez ejecutado el firebase init te creará dos archivos: firebase.json y .firebaserc que contendrán la
información entrada en este proceso, en los formatos que Firebase necesita.
Despliegue de una aplicación
Ya que tienes tu aplicación 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 niños, ya que la información necesaria para realizarlo se ha configurado

previamente con el "firebase init". Lo realizas con este comando:
firebase deploy
Ahora todo será automático 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 día a día, dentro de las Firebase Tools, te
recomiendo que consultes la ayuda o bien accedas al repositorio de Github donde está el código de firebase-
tools para encontrar más información.

Disponible online en http://desarrolloweb.com/articulos/firebase-tools.html
Manual de Firebase
Polymerfire
Explicaciones sobre el uso de Firebase en aplicaciones realizadas con la librería 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 sorprenderán y gustarán al lector.
Introducción a Polymerfire (Firebase con Polymer)

Pasos para realizar una aplicación Firebase con Polymer, usando Firebase 3 y los componentes de
Polymerfire.
En este artículo 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 versión de Firebase, es decir,
Firebase 3.x, por lo que es la librería de componentes adecuada para desarrollar nuevas aplicaciones con el
servicio de Google.
Ten en cuenta que, en el momento de escribir este artículo Polymerfire está en versión 0.9.3, por lo que
todavía irán agregando nuevas cosas. A día de hoy permite trabajar con la base de datos en tiempo real, pero
es de suponer que irán 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 encargarán de usar el SDK estándar de Javascript y realizar aquellas cosas para las que los
hayamos configurado. En resumen, sin una línea de Javascript podrías trabajar con Firebase. Pero no te
lleves a engaño, para una aplicación real será importante que conozcas cómo es el API de Javascript de
Firebase, porque los componentes no serán capaces de hacer absolutamente todas las cosas que puedas
llegar a necesitar.
Nota: Doy por hecho que estás familiarizado tanto con Firebase como con Polymer. Si no es así
simplemente consulta el Manual de Firebase o el Manual de Polymer.
Manual de Firebase
Inicializar una aplicación Firebase
Ya que estamos trabajando con Firebase, vamos a tomarnos la molestia de inicializar la aplicación. 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
aplicación 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 artículo de las
firebase-tools para más información detallada sobre este proceso.
Instalar Polymerfire
Ahora instalarás Polymerfire en la carpeta del proyecto donde estás trabajando. Previamente habrás 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 artículo sobre Bower.
bower install --save polymerfire
Esto te instalará de una vez los componentes de Polymerfire y también 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 más para comenzar, pero lo cierto es que
existen muchos otros componentes de Polymer que también se llevan muy bien con Firebase y ofrecen
cosas tan interesantes como la posibilidad de mantener en local los datos de tu aplicación, incluso si el
ordenador del cliente pierde la conexión a Internet. Esa parte, un poco más avanzada, la podremos ver
más adelante.
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 función de configurar
tu aplicación y mantiene la configuración disponible para cualquier otro componente que la quiera usar.
Para usarlo puedes partir de este código:
<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 configurarás ese elemento están en la consola de Firebase. En el artículo de
introducción a la nueva versión de Firebase ya te explicamos cómo obtenerlos.
Mención especial merece el valor "name", que es el nombre de la aplicación que tendrás para esta
configuración. Nosotros hemos colocado como valor "nombreApp" en este ejemplo, pero tú colocarás
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 estarán en la carpeta "bower_components/polymerfire/".
Componente firebase-document
Definida tu aplicación, ya estás en la posibilidad de usar otros componentes de Polymerfire para ir haciendo
cosas interesantes. Creemos que lo más 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 información 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 información. Cada dato será un
objeto JSON con sus propiedades y valores. Eso es un documento.
La sincronización 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.
Manual de Firebase
Si modificamos nosotros el objeto que nos brinda "firebase-document", asignando cualquier nuevo
valor, ese dato viajará automáticamente a la base de datos de Firebase, que a su vez sincronizaría el
dato con cualquier otro cliente que lo esté consumiendo.
Usarás 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 estás diciendo a firebase-document qué configuración
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 señalar que para el acceso o modificación 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 artículo no entramos todavía en autenticación de
usuarios y tendrías que modificar las reglas para que permitieran acceso al documento para que te
funcionen los ejemplos. Este detalle está más detalladamente explicado en el vídeo que encontrarás al
final del artículo.
Por último tienes "data", al que le estamos asignando un valor por binding: {{misdatos}}. Ese valor es
importante porque será donde dentro del componente tendrás acceso a los datos que te traiga el firebase-
document.
Nota: Fíjate 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 más información sobre el
binding.
Mostrar datos que te expone firebase-document
Seguro que si ya estás familiarizado con Polymer no tendrás 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 quedaría mostrar en el template de tu componente aquellos datos que quieres visualizar.
Manual de Firebase
Vamos a suponer que el documento que te has traído tiene una propiedad llamada "mipropiedad" y que la
quieres meter dentro de un párrafo.
<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 estás dentro de un
componente o bien, si no estás en un componente, usando el "template autobind" aka "template dom-
bind":
<template is="dom-bind">
Aquí sí se produce binding!!
</template>
Vídeo de los primeros pasos con Polymerfire
Este primer ejercicio con Polymerfire no tiene mucho más. No hemos visto el código completo, porque
estamos seguros que con tus conocimientos en Polymer serás capaz de unir las piezas. Si no es así,
simplemente mira este vídeo en el que verás mucha información 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 artículo 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, acercándonos al
trabajo con colecciones de elementos, que nos traeremos vía 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 versión de Firebase, la 3.x, que tiene un nuevo SDK y nuevos componentes de Polymer
Manual de Firebase
para el acceso a los servicios de Firebase.
Nota: Para quien ya conozca los antiguos componentes de Firebase en versión 2.x, el componente
firebase-query actual sustituye al antiguo firebase-collection.
Colección Vs arrays en Polymerfire
Comenzaremos aclarando qué es una colección de elementos, que vendría 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 más porque fue ampliamente explicado en el artículo Trabajo con colecciones en
Firebase y Javascript.
Lo que pasa es que, para la construcción de estructuras de repetición con Polymer usamos el template dom-
repeat y éste necesita de un array para iterar, por lo que nuestros componentes firebase-query están
preparados para convertir en un array lo que en Firebase se almacena como una colección.
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 aplicación 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 aplicación que vamos a usar, así
como el lugar donde está la colección 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>
Manual de Firebase
Esta es la descripción de los atributos configurados en el componente, esenciales para su funcionamiento.
app-name: sirve para indicar el nombre de la aplicación que usamos como servicio. Atención a este
valor, porque lo tendrás que definir mediante el componente firebase-app que fue un asunto ya
tratado en la introducción a Polymerfire.
path: la ruta al lugar de la base de datos donde está la colección que necesitamos acceder.
data: es la propiedad donde firebase-query colocará el array resultado de acceder a la colección.
Nota: Ten muy en cuenta las reglas de seguridad, que nos dicen quién puede acceder a la información 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 información

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 (notación dobles llaves) para que se produzca la
deseada sincronización con la base de datos en tiempo real.
Recorrido a los datos de la colección
Esto ya es una parte que depende directamente de Polymer, ya que los recorridos se realizan con un
template de repetición que está definido en la propia librería de web components.
Básicamente el código será como el siguiente:
<template is="dom-repeat" items="[[contactos]]" as="contacto">
<p>
Nombre: [[contacto.name]], email: [[contacto.email]]
</p>
</template>
Básicamente tenemos el array "contactos" que es el que se usa como fuente para generar la repetición.
Dentro del template, que se repetirá para cada contacto del array, conoceremos al elemento actual con la
variable "contacto". No vamos a entrar mucho más en este tipo de estructuras ya que son materia del
Manual de Polymer.
Sincronización 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 sincronización 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 encargarán de todo para
que los datos mostrados sean los actuales. En otras palabras, la actualización 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
Manual de Firebase
Firebase está sujeto a la necesidad de usar funciones del SDK de Firebase.
En este artículo queremos mostrarte cómo agregarías un elemento al array. Como decimos, no lo agregarás
con la función push() nativa de Javascript, sino con push() de la librería 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 agregarás a través de la función 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 más cómodo es que coloques un identificador al componente, para luego poder acceder al componente
para cualquier operación:
<firebase-query
id="firebaseq"
app-name="testpf"
path="/contactos"
data="{{contactos}}">
</firebase-query>
Ahora, dentro de un método de Polymer podrás acceder al componente a través de this.$.firebaseq y a

continuación a su referencia en la propiedad "ref", sobre la cual realizaremos el correspondiente push(). El
código sería parecido a este:
this.$.firebaseq.ref.push(nuevocontacto);
Nota: De momento, para acceso al SDK de Firebase no vemos métodos ayudantes, en la versión actual
del componente firebase-query. Tenemos que partir de la referencia mencionada y después 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 autenticación de usuarios en
aplicaciones Firebase y Polymer.
Después de haber abordado en artículos anteriores los componentes de acceso a datos de Firebase para
Manual de Firebase
aplicaciones Polymer, ahora nos vamos a detener en el componente de autenticación de usuarios, que es un
poco más complejo que los anteriores.
El componente de autenticación nos permite de una manera declarativa configurar el sistema de

autenticación de usuarios de Firebase, pudiendo autenticar por diversos medios, como usuario/clave, de
forma anónima y por medio de usuarios de diversas redes sociales. Y lo hace a muy alto nivel, sin que nos
tengamos que ocupar de la mayoría de las situaciones relativas a la seguridad.
Podríamos usar el componente firebase-auth con una única línea de código, permitiendo autenticación
solamente con escribir unas pocas propiedades en atributos de una etiqueta HTML y una invocación a un
método Javascript, lo que es realmente asombroso. Aunque para ciertos usos, como autenticar con
password, sí que necesitaremos usar algo más de código.
Nota: Recuerda que antes de usar el componente firebase-auth debes haber configurado tu aplicación
usando el elemento firebase-app. Encontrarás más información en la introducción a Polymerfire.
Métodos de autenticación
En Firebase existen diversos métodos de autenticación posibles:
Anónima
Por usuario y clave
Por usuarios de redes sociales: Google, Facebook, Twitter, Github
Suponemos que estás 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 aplicación Firebase no está activo ningún mecanismo de autenticación, por lo que tendrás
que comenzar por ahí. Simplemente se trata de entrar en la consola de Firebase y habilitar el / los que
desees.
Además, en el caso del login por redes sociales, oAuth, tendrás que configurar algunas informaciones en la
consola. Sobre esto ya hemos visto alguna cosa en el artículo de Autenticación de usuarios con redes
sociales en Firebase.
Manual de Firebase
Nota: Una novedad en la recién publicada versión de Firebase (la 3) es que, gracias a la integración con
Google, no es necesario configurar nada para poder usar este proveedor de login. Simplemente tenemos
que habilitarlo, como cualquier otro mecanismo de autenticación, pero la parte de configuración de la
API Key de oAuth, llave secreta o url de callback no hace ya falta introducirla, lo que lo hace un
mecanismo muy cómodo para usar en cualquier aplicación sin necesidad de más configuraciones.
Autenticación 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 autenticación 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 líneas estamos definiendo los siguientes atributos:
id: simplemente para referirnos a ese componente, si es que lo necesitamos más adelante. app-name:
colocamos el nombre de una aplicación configurada que queramos usar. Esa aplicación se declaró en el
componente firebase-app que ya conoces.
Simplemente con esos atributos ya puedes hacer una autenticación, aunque ahora veremos otros útiles. Pero
nuestro componente firebase-auth podría tener más 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 autenticación. Solo se usa el provider en caso que quieras loguear por
medio de redes sociales, porque la autenticación anónima 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 código, que se bindea a una
Manual de Firebase
propiedad del componente, que luego podrás 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
aplicación. A través de ese objeto podrás acceder al identificador de usuario así como datos que te exponga
la red social con la que estás conectando. Como con signed-in, lo normal es que lo bindees a una propiedad.
Lanzar el proceso de autenticación
El proceso de login lo debes de lanzar imperativamente con Javascript. Para ello el componente tiene una
serie de métodos que nos permiten lanzar distintos procesos de autenticación.
Para el caso de la autenticación anónima, dentro del código de cualquier método del componente, realizarías
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 aplicación podrás usar cualquier otro identificador.
Observa que primeramente accedemos al componente firebase-auth a través de su identificador: this.$.fauth

y luego invocamos el método para el login anónimo. Este método te devolverá una promesa de la que
hablaremos en un punto más adelante.
Para el caso de autenticación por medio de usuario y contraseña existe un método que se encarga de lanzar
el proceso, al que enviarás las cadenas del email y la clave del usuario. El método también devuelve una
promesa.
signInWithEmailAndPassword(email, clave)
Nota: Obviamente el método no "vive" solo, necesitas acceder a él a través del objeto del elemento
firebase-auth, como hemos visto antes en el ejemplo de autenticación anónima.
Para el caso de autenticación con oAuth, usando los usuarios de redes sociales, tendrás 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 artículo de autenticación con conectores sociales.
Recuerda, no obstante, que la definición de la red social a usar la realizas con la propiedad "provider" del
componente, como hemos visto antes. Aunque también lo puedes expresar mediante un parámetro
opcional indicado en la función que lanza el proceso de autenticación.
Manual de Firebase
signInWithPopup(provider)
signInWithRedirect(provider)
Ambos métodos también producen como respuesta una promesa.
Promesas para comprobar el resultado del proceso de autenticación
Todos los métodos que acabamos de ver producen como devolución una promesa que nos permite saber
qué ocurrió al intentar autenticar. Esas promesas las debes de conocer ya, pues ya son un estándar en
Javascript.
Nota: Realmente no estás obligado a usarlas, puesto que cuando se produce la autenticación, por los
mecanismos de binding ya puedes saber que se han producido cambios en la autenticación, 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 podrás obtener información que presentar al
usuario. En el caso positivo recibes un objeto desde el que podrás obtener información 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
Manual de Firebase
Firebase desde el servidor
Firebase también se puede acceder desde el backend, y de hecho es algo que aplicaciones medianas y
complejas necesitarán con toda probabilidad, pues no toda la lógica de aplicación o de negocio se puede
implementar con seguridad del lado del cliente. Además 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

Cómo configurar tu aplicación 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 característica el permitir
desarrollar sólo 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 según tus
necesidades. Todo eso ya lo sabemos ¿Entonces por qué puedo necesitar acceder a Firebase desde un
servidor?
Quizás cuando las exigencias de tus aplicaciones vayan siendo mayores observarás 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 también para
desarrollar módulos que no puedes hacer desde la parte del frontend.
Ejemplos puede haber muchos. Por poner unos casos genéricos:
Enviar email a tus usuarios avisando de sucesos producidos en la aplicación.

Escribir en ciertas zonas de la base de datos que no deberían tener permiso desde el frontend, para
asegurarse que nadie escribe cosas que no debe.
Colocar datos extra en el token de autenticación 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 aplicación Firebase y acceder a las
funcionalidades del SDK desde un entorno seguro.
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 cuál de los lenguajes
usar, aunque quizás la elección depende de:
Si estás familiarizado con Javascript o el desarrollo web en general tendrá más sentido escoger
NodeJS, pues el SDK es exactamente el mismo que usas para el Javascript del lado del cliente.
Si estás más familiarizado con el desarrollo web en Java, o el desarrollo de apps nativas para
Android, quizás te interese más Java.
Insistimos que la elección dependerá más de costumbres y preferencias. En cuanto a requisitos del servidor
y esas cosas, quizás con Java la configuración de la máquina pueda ser un poco más 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 usarás tu propio ordenador
en local, pero en producción generalmente será un servidor contratado. Como alojamientos compartidos
que soporten Java o NodeJS hay pocos, quizás querrás contratar un servidor cloud o VPS para instalar
tus aplicaciones necesarias y configurarlas a tu gusto.
En este artículo vamos a introducirnos en la configuración de tu aplicación en un servidor NodeJS, ya que

es más orientado al desarrollo web y seguramente los lectores (así como yo mismo) tengan más experiencia
en Javascript.
Ten en cuenta los requisitos para comenzar, aunque prácticamente cualquier persona los tendrá ya que solo
consta de NodeJS versión 0.10 o posterior.
Nota: Debes tener en cuenta que este método 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 estás
queriendo hacer es uso del backend para un conjunto de funcionalidades limitadas a las que accederán
usuarios comunes de tu aplicación, 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 podrás 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
Manual de Firebase
Nota: Por si no lo sabes, la opción --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 estás familiarizado con el desarrollo de NodeJS, por favor lee los primeros artículos del
Manual de NodeJS.
Inicializar nuestra aplicación Firebase
El siguiente paso es inicializar la aplicación 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"
Aparecerás 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
Manual de Firebase
una nueva clave privada, de tipo JSON y pulsar el botón "crear".
Otra operación que debes realizar es darle permisos al 'service account', al menos de editor de proyecto, en
el desplegable de la siguiente imagen.
Manual de Firebase
Pulsamos entonces el botón de "Crear" y habremos terminado la configuración en la consola, para permitir
acceso desde nuestras aplicaciones del lado del servidor. El JSON con la nueva llave y otros datos de
configuración de Firebase, se descargará automáticamente mediante el propio navegador. Lo tendrás que
copiar en la carpeta de tu proyecto.
2.- Inicializar la aplicación Firebase, ya con Código NodeJS. Esto requiere que crees un archivo
"index.js" (o el nombre que prefieras) y comiences a codificar la inicialización de la aplicación NodeJS,
necesaria para comenzar a trabajar con Firebase.
Lo primero que querrás hacer es el require de la librería "firebase-admin".
var firebase = require('firebase-admin');
Eso lo que hace es poner disponible desde nuestro script Node la librería de Firebase para administrador
desde un servidor Backend. A continuación colocarás el código para traerte el JSON que has descargado
desde Firebase, al crear el "Service Account".
var serviceAccount = require("./TuProyecto-6g5f351ac7ec.json");
Ojo en el código anterior, porque en el campo "ServiceAccount" tendrás 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 están en la misma
carpeta). También tendrás que poner la URL de tu propia base de datos de Firebase y no la mía.
A continuación inicializas la aplicación con las credenciales del Service Account descargado.
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 tendrás 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 podrías
implementar otros servicios como el de autenticación.
var db = firebase.database();
var ref = db.ref("users");
ref.on("child_added", function(snapshot) {
// Aquí podría 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 código 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 extensión .js. Si lo indicas no pasa nada y por supuesto funciona también.
Entonces verás los datos que tengas en la colección "users", o aquella que hayas colocado en el código, y el
nuevo objeto generado en cada nueva inserción. La salida, que obtienes en el terminal de línea de
comandos, sería algo como esto:
{ nombre: 'Miguel Angel Alvarez Sánchez' }
iduser1
{ name: 'user desarrolloweb.com' }
otro
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

Guía completa Firebase

Hochgeladen von

Dokumentinformationen

Originaltitel

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

Guía completa Firebase

Hochgeladen von

Copyright:

Verfügbare Formate

Manual de Firebase

Introducción: Manual de Firebase

Encuentras este manual online en:

Autores del manual

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online

Primeros pasos con Firebase

Cómo 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

Lo más cómodo es que la instales usando Bower con el correspondiente comando:

bower install firebase

Acceso a los datos por referencia

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

Nota: Lógicamente, sustituirás "juegosdemesa" por el nombre de tu aplicación en la cadena

Evento "value" para sincronizarme con el dato

Para acceder al valor de la instantánea usamos el método val().

Conexiones por Sockets

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

Vídeo de introducción a Firebase

Para ver este vídeo es necesario visitar el artículo original en:

Este artículo es obra de Miguel Angel Alvarez

Hasta ahora Firebase contaba con tres principales servicios:

Base de datos en tiempo real

Nuevos servicios de Firebase

Primeros pasos en el desarrollo para la web con Firebase

Para crear una nueva aplicación encontrarás un botón bien visible.

Desde allí encontraremos muchas nuevas opciones, acceso a la documentación etc.

Services Firebase, novedades en el API

Nuevas reglas de seguridad predeterminadas

para escrituras, deba realizarse con un usuario correctamente autenticado.

Vídeo de novedades y primeros pasos con el nuevo Firebase

Para ver este vídeo es necesario visitar el artículo original en:

Este artículo es obra de Miguel Angel Alvarez

Base de datos en tiempo real

Escribir datos en Firebase desde Javascript

bower install --save firebase

Nota: Aprende sobre la operativa de Bower en el artículo de introducción a Bower.

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

Escribir datos en Firebase con Firebase 3

var databaseService = firebase.database();

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

// escribo en esa referencia

campoTest: 'valor del test',

ahora: new Date().getTime()

Trabajo con promesas de Firebase 3

Todo eso en código se resume de la siguiente manera:

campoTest: 'Otro valor del test',

ahora: new Date().getTime()

console.log('dato almacenado correctamente');

console.log('detectado un error', error);

Breves notas sobre el uso de referencias

nombre: 'Miguel Angel Alvarez',

nombre: 'Alvaro Martínez',

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

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

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

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

referencia.set('Miguel Angel Alvarez Sánchez');

<title>Firebase Cliente Web</title>

<h1>Test con Firebase</h1>

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