Manual 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

http://desarrolloweb.com/manuales/manual-firebase.html

Página 2 de 78

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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 3 de 78

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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 4 de 78

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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 5 de 78

Manual de Firebase

editamos es un JSON, ya que el sistema de Firebase es de base de datos documental. Security & Rules: Nos permite el acceso a una 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".

http://desarrolloweb.com/manuales/manual-firebase.html

Página 6 de 78

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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 7 de 78

Manual de Firebase



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){

http://desarrolloweb.com/manuales/manual-firebase.html

Página 8 de 78

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. Hola Firebase var ref = new Firebase("https://juegosdemesa.firebaseio.com/"); ref.child("appName").on("value", function(snapshot){ console.log(snapshot.val()); document.getElementById("titular").textContent = snapshot.val(); });

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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 9 de 78

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

http://desarrolloweb.com/manuales/manual-firebase.html

Página 10 de 78

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. http://desarrolloweb.com/manuales/manual-firebase.html

Página 11 de 78

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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 12 de 78

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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 13 de 78

Manual de Firebase

Luego, con este servicio podremos acceder al API de Firebase, en este caso para todo lo que respecta al "realtime database", para hacer operaciones de lectura / escritura sobre la base de datos. Aquí ya cambia poco sobre lo que se ha explicado en anteriores 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){ console.log(snapshot.val()); });

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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 14 de 78

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.

Para ver este vídeo es necesario visitar el artículo original en: 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.

Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 31/05/2016 Disponible online en http://desarrolloweb.com/articulos/nuevo-firebase.html

http://desarrolloweb.com/manuales/manual-firebase.html

Página 15 de 78

Manual de Firebase

Base de datos en tiempo real Te explicamos las bases de trabajo para el uso de uno de los servicios de Firebase, la base de datos en tiempo real. En estos 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

http://desarrolloweb.com/manuales/manual-firebase.html

Página 16 de 78

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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 17 de 78

Manual de Firebase

La diferencia entre set() y update() es que set() sustituye cualquier dato que haya en una referencia anteriormente, mientras que update() lo actualiza. Dicho de otra manera, set() hace que se borre cualquier 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', ahora: new Date().getTime() }) .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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 18 de 78

Manual de Firebase

dentro de otros, para conseguir cualquier estructura de almacenamiento que necesites. Lo importante ahora es que, a nivel de referencias, todos esos niveles de 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: '[email protected]' }, iduser2: { nombre: 'Alvaro Martínez', email: '[email protected]' } }

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. Firebase Cliente Web

http://desarrolloweb.com/manuales/manual-firebase.html

Página 19 de 78

Manual de Firebase

Test con Firebase

// 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');

// escribo en esa referencia referencia.set({ campoTest: 'valor del test', ahora: new Date().getTime() });

// realizo uso de las promesas referencia.set({ campoTest: 'Otro valor del test', ahora: new Date().getTime() }) .then(function() { console.log('dato almacenado correctamente'); }) .catch(function(error) { console.log('detectado un error', error); });

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

// escribo en esa referencia referencia.set('Miguel Angel Alvarez Sánchez');



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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 20 de 78

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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 21 de 78

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: "[email protected]" }; 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. Crear registros en Firebase var ref = new Firebase("https://juegosdemesa.firebaseio.com/appData"); var obj ={ name: "Juegos de Mesa", company: "EscuelaIT", email: "[email protected]" }; ref.set(obj); Ejemplo para escribir datos en Firebase

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: { name: "Juegos de Mesa", company: "EscuelaIT", email: "[email protected]" }

http://desarrolloweb.com/manuales/manual-firebase.html

Página 22 de 78

Manual de Firebase

Y sobre esta referencia cargo ahora otro objeto: var obj2 ={ email: "[email protected]", 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: { email: "[email protected]", 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 ={ email: "[email protected]", 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. http://desarrolloweb.com/manuales/manual-firebase.html

Página 23 de 78

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.

Para ver este vídeo es necesario visitar el artículo original en: http://desarrolloweb.com/articulos/escribir-datos-firebase-javascript.html Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 03/08/2016 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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 24 de 78

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. http://desarrolloweb.com/manuales/manual-firebase.html

Página 25 de 78

Manual de Firebase

var ref = new Firebase("https://ejemplo.firebaseio.com/juegos"); var refItem = ref.push(); refItem.set({ propiedad: "Valor" });

Esta operativa de generar el item con push() y luego invocar set() se puede reducir a un solo paso, enviando a push() el dato que queremos asignar al item recién creado. var ref = new Firebase("https://ejemplo.firebaseio.com/juegos"); 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 ref = new Firebase("https://ejemplo.firebaseio.com/juegos"); 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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 26 de 78

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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 27 de 78

Manual de Firebase

explicar. ref.on("child_changed", function(snapshot){ console.log("Detectado cambio en ", snapshot.key()); console.log("El nuevo valor es ", snapshot.val()); });

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.

Para ver este vídeo es necesario visitar el artículo original en: http://desarrolloweb.com/articulos/trabajo-colecciones-firebase-javascript.html Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 11/02/2016 Disponible online en http://desarrolloweb.com/articulos/trabajo-colecciones-firebase-javascript.html

http://desarrolloweb.com/manuales/manual-firebase.html

Página 28 de 78

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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 29 de 78

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: "[email protected]", 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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 30 de 78

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: "[email protected]", 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);

http://desarrolloweb.com/manuales/manual-firebase.html

Página 31 de 78

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. http://desarrolloweb.com/manuales/manual-firebase.html

Página 32 de 78

Manual de Firebase

Para ver este vídeo es necesario visitar el artículo original en: http://desarrolloweb.com/articulos/autenticacion-firebase-js-usuario-password.html Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 25/02/2016 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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 33 de 78

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://tuapp.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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 34 de 78

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. http://desarrolloweb.com/manuales/manual-firebase.html

Página 35 de 78

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. authService.signInWithPopup(provider)

http://desarrolloweb.com/manuales/manual-firebase.html

Página 36 de 78

Manual de Firebase

.then(function(result) { //todo correcto console.log('autenticado usuario ', result.user); }) .catch(function(error) { // 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. Firebase Cliente Web Login con Firebase

Autenticar con Facebook

// 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);

// 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 var authService = firebase.auth();

// evento para el botón de login con facebook document.getElementById('loginfacebook').addEventListener('click', function() { // autentico con Facebook authService.signInWithPopup(provider) .then(function(result) { //todo correcto

http://desarrolloweb.com/manuales/manual-firebase.html

Página 37 de 78

Manual de Firebase

console.log('autenticado usuario ', result.user); }) .catch(function(error) { console.log('Detectado un error:', error); }); })



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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 38 de 78

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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 39 de 78

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.

Para ver este vídeo es necesario visitar el artículo original en: http://desarrolloweb.com/articulos/autenticacion-usuarios-rrss-firebase.html Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 29/07/2016 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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 40 de 78

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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 41 de 78

Manual de Firebase

del usuario logueado en un momento dado. Luego en la parte de Javascript realizamos operativas necesarias para crear los manejadores de eventos de los botones, de login y cerrar 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. Prueba de autenticacion firebase para google (sdk de Javascript) #datosuser{ font-size: .8em; } Haz login con Google Haz logout // inicializar Firebase var config = { apiKey: "AISyDQRPLegmTkkwj66NoWLRo2WYI72c2qBazfE", authDomain: "mi.firebaseapp.com", databaseURL: "https://mi.firebaseio.com", storageBucket: "mi.appspot.com", messagingSenderId: "18347078000" }; firebase.initializeApp(config);

// accedo al servicio de autenticación var authService = firebase.auth();

// manejador de eventos para loguearse document.getElementById('botonlogin').addEventListener('click', function() { var provider = new firebase.auth.GoogleAuthProvider(); provider.addScope('email'); authService.signInWithPopup(provider) .then(function(result) {

http://desarrolloweb.com/manuales/manual-firebase.html

Página 42 de 78

Manual de Firebase

// logueado con éxito console.log('Hemos autenticado al usuario ', result.user); }) .catch(function(error) { // 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'; } });



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.

Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 05/12/2016 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. http://desarrolloweb.com/manuales/manual-firebase.html

Página 43 de 78

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:

http://desarrolloweb.com/manuales/manual-firebase.html

Página 44 de 78

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.

ref.authWithOAuthPopup("facebook", function(error, authData) { // 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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 45 de 78

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": "[email protected]" } "user2": { "nombre": "Alvaro Martínez", "email": "[email protected]" } }

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/"); ref.authWithOAuthPopup("facebook", function(error, authData) { 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'

http://desarrolloweb.com/manuales/manual-firebase.html

Página 46 de 78

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.

Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 10/05/2016 Disponible online en http://desarrolloweb.com/articulos/datos-personales-login-social-firebase.html

http://desarrolloweb.com/manuales/manual-firebase.html

Página 47 de 78

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. http://desarrolloweb.com/manuales/manual-firebase.html

Página 48 de 78

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": {

http://desarrolloweb.com/manuales/manual-firebase.html

Página 49 de 78

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. http://desarrolloweb.com/manuales/manual-firebase.html

Página 50 de 78

Manual de Firebase

Reglas para satisfacer la seguridad de acceso a los datos de perfil de usuario Sabemos que cuesta adaptarse a todos estos conocimientos, pero con lo que hemos explicado 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. http://desarrolloweb.com/manuales/manual-firebase.html

Página 51 de 78

Manual de Firebase

Para ver este vídeo es necesario visitar el artículo original en: http://desarrolloweb.com/articulos/reglas-seguridad-firebase.html Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 16/06/2016 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. http://desarrolloweb.com/manuales/manual-firebase.html

Página 52 de 78

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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 53 de 78

Manual de Firebase

Suscribirse a eventos relacionados con la carga de archivos Igual que hay eventos que tienen que ver con la 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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 54 de 78

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. Subir archivos con Firebase

// Initialize Firebase var config = { apiKey: "AIzaSyAKAAAPi-aPffdsliTggEtTW23s222I371Y", authDomain: "tuapp.firebaseapp.com", databaseURL: "https://tuapp.firebaseio.com", storageBucket: "tuapp.appspot.com", }; firebase.initializeApp(config);

// Servicios de APIs Firebase var authService = firebase.auth(); var storageService = firebase.storage();

window.onload = function() { // realizamos la autenticación anónima (debe estar activada en la consola de Firebase) authService.signInAnonymously() .catch(function(error) { 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);

http://desarrolloweb.com/manuales/manual-firebase.html

Página 55 de 78

Manual de Firebase

// Comienzo la tarea de upload var uploadTask = refStorage.put(archivo);

// defino un evento para saber qué pasa con ese upload iniciado uploadTask.on('state_changed', null, function(error){ console.log('Error al subir el archivo', error); }, function(){ console.log('Subida completada'); mensajeFinalizado(uploadTask.snapshot.downloadURL, uploadTask.snapshot.totalBytes); } ); }

// a esta función la invocamos para mostrar el mensaje final después del upload function mensajeFinalizado(url, bytes) { var elMensaje = document.getElementById('mensaje'); var textoMensaje = 'Subido el archivo!'; textoMensaje += 'Bytes subidos: ' + bytes; textoMensaje += 'Ver el fichero'; elMensaje.innerHTML = textoMensaje; }

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.

Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 27/06/2016 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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 56 de 78

Manual de Firebase

Firebase Tools. Sin embargo, para el hosting de Firebase no existe la posibilidad de acceder por FTP, ni tampoco ssh o algo parecido, por lo que la única manera de subir tus archivos es usando las Firebase Tools.

Instalar firebase-tools El primer paso será obtener las herramientas, que instalas con npm, por 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

http://desarrolloweb.com/manuales/manual-firebase.html

Página 57 de 78

Manual de Firebase

Ese comando servirá para retirar los permisos a firebase tools, algo importante en ciertos casos, porque si no lo haces, cualquiera con acceso a ese ordenador 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. http://desarrolloweb.com/manuales/manual-firebase.html

Página 58 de 78

Manual de Firebase

What file should be used for Database Rules? Aquí te está pidiendo el archivo donde vas a escribir las reglas de seguridad en local. Si ya tienes un archivo como "rules.json" o algo parecido, simplemente 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 firebasetools para encontrar más información.

Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 14/07/2016 Disponible online en http://desarrolloweb.com/articulos/firebase-tools.html

http://desarrolloweb.com/manuales/manual-firebase.html

Página 59 de 78

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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 60 de 78

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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 61 de 78

Manual de Firebase

Componente firebase-app

El trabajo con los componentes de Polymer para Firebase se divide entre varios custom elements de Polymer. El primero que debes conocer es "firebase-app". Este componente hace la 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:

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. http://desarrolloweb.com/manuales/manual-firebase.html

Página 62 de 78

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:

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 firebasedocument.

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. http://desarrolloweb.com/manuales/manual-firebase.html

Página 63 de 78

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. Este es el dato que quiero mostrar [[misdatos.mipropiedad]]

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 dombind":

Aquí sí se produce binding!!

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.

Para ver este vídeo es necesario visitar el artículo original en: http://desarrolloweb.com/articulos/introduccion-polymerfire.html Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 28/07/2016 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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 64 de 78

Manual de Firebase

para el acceso a los servicios de Firebase.

Nota: Para quien ya conozca los antiguos componentes de Firebase en 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 domrepeat 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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 65 de 78

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: Nombre: [[contacto.name]], email: [[contacto.email]]

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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 66 de 78

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: '[email protected]' }

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:

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. Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 02/09/2016 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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 67 de 78

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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 68 de 78

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:

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:

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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 69 de 78

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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 70 de 78

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); }) .catch(function(error) { 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.

Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 06/10/2016 Disponible online en http://desarrolloweb.com/articulos/componente-firebase-auth.html

http://desarrolloweb.com/manuales/manual-firebase.html

Página 71 de 78

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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 72 de 78

Manual de Firebase

Java Vs Node Existen dos lenguajes que podemos escoger actualmente para hacer esta actividad: Java o NodeJS. Ambos permiten las mismas operativas, usando SDKs distintos. En principio es indiferente 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

http://desarrolloweb.com/manuales/manual-firebase.html

Página 73 de 78

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 http://desarrolloweb.com/manuales/manual-firebase.html

Página 74 de 78

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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 75 de 78

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.

http://desarrolloweb.com/manuales/manual-firebase.html

Página 76 de 78

Manual de Firebase

firebase.initializeApp({ credential: firebase.credential.cert(serviceAccount), databaseURL: "https://projetopensar-f73e8.firebaseio.com" });

Desarrollar tus propios scripts para acceso a los servicios de Firebase A partir de ahora 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

http://desarrolloweb.com/manuales/manual-firebase.html

Página 77 de 78

Manual de Firebase

El script de nodejs se ejecuta por tiempo ilimitado, escuchando siempre los eventos de Firebase que se vayan produciendo. Puedes salir del script desde tu consola con CTRL + C. Con esto lo tienes todo! has conseguido conectar Firebase desde el servidor. Es el primer paso para hacer cualquier cosa que necesites y no puedas delegar en la parte de frontend.

Este artículo es obra de Miguel Angel Alvarez Fue publicado por primera vez en 26/11/2016 Disponible online en http://desarrolloweb.com/articulos/firebase3-servidor-nodejs.html

http://desarrolloweb.com/manuales/manual-firebase.html

Página 78 de 78