Manual de Firebase http://desarrolloweb.com/manuales/manual-firebase.html Página 1 de 78 Manual de Firebase Introdu
Views 129 Downloads 3 File size 2MB
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
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
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
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
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)
Haz login con Google Haz logout
Este es el dato que quiero mostrar [[misdatos.mipropiedad]]
Nombre: [[contacto.name]], email: [[contacto.email]]