Firebase - Guía rápida

Según la documentación oficial de Firebase:

Firebase puede impulsar el backend de su aplicación, incluido el almacenamiento de datos, la autenticación de usuarios, el alojamiento estático y más. Concéntrese en crear experiencias de usuario extraordinarias. Nos haremos cargo del resto. Cree aplicaciones web y móviles nativas multiplataforma con nuestros SDK de Android, iOS y JavaScript. También puede conectar Firebase a su backend existente utilizando nuestras bibliotecas del lado del servidor o nuestra API REST.

Funciones de Firebase

Real-time Database - Firebase admite datos JSON y todos los usuarios conectados a él reciben actualizaciones en vivo después de cada cambio.
Authentication - Podemos utilizar autenticación anónima, contraseña o diferentes redes sociales.
Hosting - Las aplicaciones se pueden implementar a través de una conexión segura a los servidores de Firebase.

Ventajas de Firebase

Es simple y fácil de usar. No es necesario realizar una configuración complicada.
Los datos son en tiempo real, lo que significa que cada cambio actualizará automáticamente los clientes conectados.
Firebase ofrece un panel de control simple.
Hay varios servicios útiles para elegir.

Limitaciones de Firebase

El plan gratuito de Firebase está limitado a 50 conexiones y 100 MB de almacenamiento.

En el próximo capítulo, analizaremos la configuración del entorno de Firebase.

En este capítulo, le mostraremos cómo agregar Firebase a la aplicación existente. NecesitaremosNodeJS. Consulte el enlace de la siguiente tabla, si aún no lo tiene.

No Señor.	Software y descripción
1	NodeJS and NPM NodeJS es la plataforma necesaria para el desarrollo de Firebase. Consulte nuestra configuración del entorno NodeJS .

Paso 1: crea una cuenta de Firebase

Puede crear una cuenta de Firebase aquí .

Paso 2: crea la aplicación Firebase

Puede crear una nueva aplicación desde la página del panel. La siguiente imagen muestra la aplicación que creamos. Podemos hacer clic en elManage App para ingresar a la aplicación.

Paso 3a: crear una aplicación HTML / js básica

Solo necesita crear una carpeta donde se colocará su aplicación. Dentro de esa carpeta, necesitaremosindex.html y index.jsarchivos. Agregaremos Firebase al encabezado de nuestra aplicación.

index.html

<html>
   <head>
      <script src = "https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
      <script type = "text/javascript" src = "index.js"></script>
   </head>
	
   <body>

   </body>
</html>

Paso 3b: use NPM o Bower

Si desea utilizar su aplicación existente, puede utilizar los paquetes de Firebase NPM o Bowers. Ejecute uno de los siguientes comandos desde la carpeta raíz de su aplicación.

npm install firebase --save

bower install firebase

Los datos de Firebase representan objetos JSON. Si abre su aplicación desde el panel de Firebase, puede agregar datos manualmente haciendo clic en el+ firmar.

Crearemos una estructura de datos simple. Puedes consultar la imagen a continuación.

En el capítulo anterior, conectamos Firebase a nuestra aplicación. Ahora, podemos registrar Firebase en la consola.

console.log(firebase)

Podemos crear una referencia a la colección de nuestro jugador.

var ref = firebase.database().ref('players');

console.log(ref);

Podemos ver el siguiente resultado en la consola.

Este capítulo explicará la representación de arreglos de Firebase. Usaremos los mismos datos del capítulo anterior.

Podríamos crear estos datos enviando el siguiente árbol JSON a la colección del jugador.

['john', 'amanda']

Esto se debe a que Firebase no admite matrices directamente, pero crea una lista de objetos con números enteros como nombres de clave.

La razón para no usar matrices es porque Firebase actúa como una base de datos en tiempo real y si un par de usuarios manipularan matrices al mismo tiempo, el resultado podría ser problemático ya que los índices de las matrices cambian constantemente.

De la forma en que Firebase lo maneja, las claves (índices) siempre serán las mismas. Podríamos borrarjohn y amanda todavía tendría la clave (índice) 1.

En este capítulo, le mostraremos cómo guardar sus datos en Firebase.

Conjunto

los setEl método escribirá o reemplazará datos en una ruta especificada. Creemos una referencia a la colección del jugador y establezcamos dos jugadores.

var playersRef = firebase.database().ref("players/");

playersRef.set ({
   John: {
      number: 1,
      age: 30
   },
	
   Amanda: {
      number: 2,
      age: 20
   }
});

Veremos el siguiente resultado.

Actualizar

Podemos actualizar los datos de Firebase de manera similar. Observe cómo estamos usando elplayers/john camino.

var johnRef = firebase.database().ref("players/John");

johnRef.update ({
   "number": 10
});

Cuando actualizamos nuestra aplicación, podemos ver que los datos de Firebase se están actualizando.

En nuestro último capítulo, le mostramos cómo escribir datos en Firebase. A veces, necesita tener un identificador único para sus datos. Cuando desee crear identificadores únicos para sus datos, debe utilizar el método push en lugar del método set.

El método de empuje

los push()El método creará una identificación única cuando se envíen los datos. Si queremos crear nuestros reproductores de los capítulos anteriores con una identificación única, podríamos usar el fragmento de código que se proporciona a continuación.

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var playersRef = ref.child("players");
playersRef.push ({
   name: "John",
   number: 1,
   age: 30
});

playersRef.push ({
   name: "Amanda",
   number: 2,
   age: 20
});

Ahora nuestros datos se verán de manera diferente. El nombre será solo un par nombre / valor como el resto de las propiedades.

El método clave

Podemos obtener cualquier clave de Firebase usando el key()método. Por ejemplo, si queremos obtener el nombre de nuestra colección, podríamos usar el siguiente fragmento.

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var playersRef = ref.child("players");

var playersKey = playersRef.key();
console.log(playersKey);

La consola registrará el nombre de nuestra colección (jugadores).

Más sobre esto en nuestros próximos capítulos.

Los datos transaccionales se utilizan cuando necesita devolver algunos datos de la base de datos, luego hacer algunos cálculos con ellos y almacenarlos.

Digamos que tenemos un jugador dentro de nuestra lista de jugadores.

Queremos recuperar la propiedad, agregar un año de antigüedad y devolverla a Firebase.

los amandaRefestá recuperando la edad de la colección y luego podemos usar el método de transacción. Obtendremos la edad actual, agregaremos un año y actualizaremos la colección.

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');

var amandaAgeRef = ref.child("players").child("-KGb1Ls-gEErWbAMMnZC").child('age');

amandaAgeRef.transaction(function(currentAge) {
   return currentAge + 1;
});

Si ejecutamos este código, podemos ver que el valor de la edad se actualiza a 21.

En este capítulo, le mostraremos cómo leer los datos de Firebase. La siguiente imagen muestra los datos que queremos leer.

Podemos usar el on()método para recuperar datos. Este método toma el tipo de evento como"value" y luego recupera el snapshotde los datos. Cuando agregamosval() a la instantánea, obtendremos la representación de JavaScript de los datos.

Ejemplo

Consideremos el siguiente ejemplo.

var ref = firebase.database().ref();

ref.on("value", function(snapshot) {
   console.log(snapshot.val());
}, function (error) {
   console.log("Error: " + error.code);
});

Si ejecutamos el siguiente código, nuestra consola mostrará los datos.

En nuestro próximo capítulo, explicaremos otros tipos de eventos que puede utilizar para leer datos.

Firebase ofrece varios tipos de eventos diferentes para leer datos. Algunos de los más utilizados se describen a continuación.

valor

El primer tipo de evento es value. Le mostramos cómo utilizar el valor en nuestro último capítulo. Este tipo de evento se activará cada vez que cambien los datos y recuperará todos los datos, incluidos los niños.

child_added

Este tipo de evento se activará una vez por cada jugador y cada vez que se agregue un nuevo jugador a nuestros datos. Es útil para leer datos de listas porque obtenemos acceso al jugador agregado y al jugador anterior de la lista.

Ejemplo

Consideremos el siguiente ejemplo.

var playersRef = firebase.database().ref("players/");

playersRef.on("child_added", function(data, prevChildKey) {
   var newPlayer = data.val();
   console.log("name: " + newPlayer.name);
   console.log("age: " + newPlayer.age);
   console.log("number: " + newPlayer.number);
   console.log("Previous Player: " + prevChildKey);
});

Obtendremos el siguiente resultado.

Si agregamos un nuevo jugador llamado Bob, obtendremos los datos actualizados.

child_changed

Este tipo de evento se activa cuando los datos han cambiado.

Ejemplo

Consideremos el siguiente ejemplo.

var playersRef = firebase.database().ref("players/");

playersRef.on("child_changed", function(data) {
   var player = data.val();
   console.log("The updated player name is " + player.name);
});

Podemos cambiar Bob a Maria en Firebase para obtener la actualización.

child_removed

Si queremos acceder a los datos eliminados, podemos usar child_removed tipo de evento.

Ejemplo

var playersRef = firebase.database().ref("players/");

playersRef.on("child_removed", function(data) {
   var deletedPlayer = data.val();
   console.log(deletedPlayer.name + " has been deleted");
});

Ahora, podemos eliminar a Maria de Firebase para recibir notificaciones.

Este capítulo le mostrará cómo desvincular devoluciones de llamada en Firebase.

Desconectar devolución de llamada para el tipo de evento

Digamos que queremos separar una devolución de llamada para una función con value tipo de evento.

Ejemplo

var playersRef = firebase.database().ref("players/");

ref.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

Necesitamos usar off()método. Esto eliminará todas las devoluciones de llamada convalue tipo de evento.

playersRef.off("value");

Separar todas las devoluciones de llamada

Cuando queremos separar todas las devoluciones de llamada, podemos usar:

playersRef.off();

Firebase ofrece varias formas de ordenar datos. En este capítulo, mostraremos ejemplos de consultas simples. Usaremos los mismos datos de nuestros capítulos anteriores.

Ordenar por niño

Para ordenar datos por nombre, podemos usar el siguiente código.

Ejemplo

Consideremos el siguiente ejemplo.

var playersRef = firebase.database().ref("players/");

playersRef.orderByChild("name").on("child_added", function(data) {
   console.log(data.val().name);
});

Veremos los nombres en orden alfabético.

Ordenar por clave

Podemos ordenar los datos por clave de manera similar.

Ejemplo

Consideremos el siguiente ejemplo.

var playersRef = firebase.database().ref("players/");

playersRef.orderByKey().on("child_added", function(data) {
   console.log(data.key);
});

La salida será como se muestra a continuación.

Ordenar por valor

También podemos ordenar datos por valor. Agreguemos la colección de calificaciones en Firebase.

Ahora podemos ordenar los datos por valor para cada jugador.

Ejemplo

Consideremos el siguiente ejemplo.

var ratingRef = firebase.database().ref("ratings/");

ratingRef.orderByValue().on("value", function(data) {
   
   data.forEach(function(data) {
      console.log("The " + data.key + " rating is " + data.val());
   });
   
});

La salida será como se muestra a continuación.

Firebase ofrece varias formas de filtrar datos.

Límite al primero y al último

Entendamos qué límite es el primero y el último.

limitToFirst El método devuelve el número especificado de elementos a partir del primero.
limitToLast El método devuelve un número específico de elementos a partir del último.

Nuestro ejemplo muestra cómo funciona esto. Dado que solo tenemos dos jugadores en la base de datos, limitaremos las consultas a un jugador.

Ejemplo

Consideremos el siguiente ejemplo.

var firstPlayerRef = firebase.database().ref("players/").limitToFirst(1);

var lastPlayerRef = firebase.database().ref('players/').limitToLast(1);

firstPlayerRef.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

lastPlayerRef.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

Nuestra consola registrará el primer jugador de la primera consulta y el último jugador de la segunda consulta.

Otros filtros

También podemos usar otros métodos de filtrado de Firebase. losstartAt(), endAt() y el equalTo()se puede combinar con métodos de pedido. En nuestro ejemplo, lo combinaremos con elorderByChild() método.

Ejemplo

Consideremos el siguiente ejemplo.

var playersRef = firebase.database().ref("players/");

playersRef.orderByChild("name").startAt("Amanda").on("child_added", function(data) {
   console.log("Start at filter: " + data.val().name);
});

playersRef.orderByChild("name").endAt("Amanda").on("child_added", function(data) {
   console.log("End at filter: " + data.val().name);
});

playersRef.orderByChild("name").equalTo("John").on("child_added", function(data) {
   console.log("Equal to filter: " + data.val().name);
});

playersRef.orderByChild("age").startAt(20).on("child_added", function(data) {
   console.log("Age filter: " + data.val().name);
});

La primera consulta ordenará los elementos por nombre y filtrará del reproductor con el nombre Amanda. La consola registrará a ambos jugadores. La segunda consulta registrará "Amanda" ya que estamos terminando la consulta con este nombre. El tercero registrará "John" ya que estamos buscando un jugador con ese nombre.

El cuarto ejemplo muestra cómo podemos combinar filtros con el valor de "edad". En lugar de una cadena, estamos pasando el número dentro delstartAt() método ya que la edad está representada por un valor numérico.

En este capítulo, repasaremos las mejores prácticas de Firebase.

Evite anidar datos

Cuando obtenga los datos de Firebase, obtendrá todos los nodos secundarios. Por eso, no se dice que la anidación profunda sea la mejor práctica.

Desormalizar datos

Cuando necesite una funcionalidad de anidación profunda, considere agregar un par de colecciones diferentes; incluso cuando necesita agregar algunos datos duplicados y usar más de una solicitud para recuperar lo que necesita.

En este capítulo, le mostraremos cómo usar la autenticación de correo electrónico / contraseña de Firebase.

Crear usuario

Para autenticar a un usuario, podemos usar el createUserWithEmailAndPassword(email, password) método.

Ejemplo

Consideremos el siguiente ejemplo.

var email = "[email protected]";
var password = "mypassword";

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
   console.log(error.code);
   console.log(error.message);
});

Podemos comprobar el panel de Firebase y ver que se crea el usuario.

Registrarse

El proceso de inicio de sesión es casi el mismo. Estamos usando elsignInWithEmailAndPassword(email, password) para iniciar sesión en el usuario.

Ejemplo

Consideremos el siguiente ejemplo.

var email = "[email protected]";
var password = "mypassword";

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
   console.log(error.code);
   console.log(error.message);
});

Desconectar

Y finalmente podemos cerrar la sesión del usuario con el signOut() método.

Ejemplo

Consideremos el siguiente ejemplo.

firebase.auth().signOut().then(function() {
   console.log("Logged out!")
}, function(error) {
   console.log(error.code);
   console.log(error.message);
});

En este capítulo, le mostraremos cómo configurar la autenticación de Google en Firebase.

Paso 1: habilita la autenticación de Google

Abra el panel de Firebase y haga clic en Authen el menú del lado izquierdo. Para abrir la lista de métodos disponibles, debe hacer clic enSIGN_IN_METHODS en el menú de la pestaña.

Ahora puedes elegir Google de la lista, habilítelo y guárdelo.

Paso 2: crear botones

Dentro de nuestro index.html, agregaremos dos botones.

index.html

<button onclick = "googleSignin()">Google Signin</button>
<button onclick = "googleSignout()">Google Signout</button>

Paso 3: Iniciar sesión y cerrar sesión

En este paso, crearemos funciones de inicio de sesión y cierre de sesión. UsaremossignInWithPopup() y signOut() métodos.

Ejemplo

Consideremos el siguiente ejemplo.

var provider = new firebase.auth.GoogleAuthProvider();

function googleSignin() {
   firebase.auth()
   
   .signInWithPopup(provider).then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
		
      console.log(error.code)
      console.log(error.message)
   });
}

function googleSignout() {
   firebase.auth().signOut()
	
   .then(function() {
      console.log('Signout Succesfull')
   }, function(error) {
      console.log('Signout Failed')  
   });
}

Después de actualizar la página, podemos hacer clic en el Google Signinpara activar la ventana emergente de Google. Si el inicio de sesión es exitoso, la consola del desarrollador iniciará sesión como nuestro usuario.

También podemos hacer clic en el Google Signoutpara cerrar la sesión de la aplicación. La consola confirmará que el cierre de sesión fue exitoso.

En este capítulo, autenticaremos a los usuarios con la autenticación de Firebase Facebook.

Paso 1: habilitar la autenticación de Facebook

Necesitamos abrir el panel de Firebase y hacer clic Authen el menú lateral. A continuación, debemos elegirSIGN-IN-METHODen la barra de pestañas. Habilitaremos la autenticación de Facebook y dejaremos esto abierto ya que necesitamos agregarApp ID y App Secret cuando terminemos el paso 2.

Paso 2: crea la aplicación de Facebook

Para habilitar la autenticación de Facebook, necesitamos crear la aplicación de Facebook. Haga clic en este enlace para comenzar. Una vez que se crea la aplicación, necesitamos copiarApp ID y App Secret a la página de Firebase, que dejamos abierta en el paso 1. También necesitamos copiar OAuth Redirect URIdesde esta ventana a la aplicación de Facebook. Puedes encontrar+ Add Product dentro del menú lateral del panel de la aplicación de Facebook.

Escoger Facebook Loginy aparecerá en el menú lateral. Encontrarás el campo de entradaValid OAuth redirect URIs donde necesitas copiar el OAuth Redirect URI de Firebase.

Paso 3: conéctese al SDK de Facebook

Copie el siguiente código al comienzo del body etiqueta en index.html. Asegúrese de reemplazar el'APP_ID' a su ID de aplicación desde el panel de Facebook.

Ejemplo

Consideremos el siguiente ejemplo.

<script>
   window.fbAsyncInit = function() {
      FB.init ({
         appId      : 'APP_ID',
         xfbml      : true,
         version    : 'v2.6'
      });
   };

   (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   } (document, 'script', 'facebook-jssdk'));
	
</script>

Paso 4: crear botones

Configuramos todo en los primeros tres pasos, ahora podemos crear dos botones para iniciar y cerrar sesión.

index.html

<button onclick = "facebookSignin()">Facebook Signin</button>
<button onclick = "facebookSignout()">Facebook Signout</button>

Paso 5: crear funciones de autenticación

Este es el ultimo paso. Abiertoindex.js y copie el siguiente código.

index.js

var provider = new firebase.auth.FacebookAuthProvider();

function facebookSignin() {
   firebase.auth().signInWithPopup(provider)
   
   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      console.log(error.code);
      console.log(error.message);
   });
}

function facebookSignout() {
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}

En este capítulo, explicaremos cómo utilizar la autenticación de Twitter.

Paso 1: crea la aplicación de Twitter

Puede crear la aplicación de Twitter en este enlace . Una vez creada su aplicación, haga clic enKeys and Access Tokens donde puedes encontrar API Key y API Secret. Lo necesitará en el paso 2.

Paso 2: habilitar la autenticación de Twitter

En el menú lateral del panel de Firebase, debe hacer clic en Auth. Entonces abreSIGN-IN-METHODlengüeta. Haga clic en Twitter para habilitarlo. Necesitas agregarAPI Key y API Secret desde el paso 1.

Entonces necesitaría copiar el callback URLy péguelo en su aplicación de Twitter. Puede encontrar la URL de devolución de llamada de su aplicación de Twitter al hacer clic en elSettings lengüeta.

Paso 3: agregar botones

En este paso, agregaremos dos botones dentro del body etiqueta de index.html.

index.html

<button onclick = "twitterSignin()">Twitter Signin</button>
<button onclick = "twitterSignout()">Twitter Signout</button>

Paso 4: funciones de autenticación

Ahora podemos crear funciones para la autenticación de Twitter.

index.js

var provider = new firebase.auth.TwitterAuthProvider();

function twitterSignin() {
   firebase.auth().signInWithPopup(provider)
    
  .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      console.log(error.code)
      console.log(error.message)
   });
}

function twitterSignout() {
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed!')
   });
}

Cuando iniciamos nuestra aplicación, podemos iniciar sesión o cerrar sesión haciendo clic en los dos botones. La consola confirmará que la autenticación se realizó correctamente.

En este capítulo, le mostraremos cómo autenticar usuarios usando la API de GitHub.

Paso 1: habilitar la autenticación de GitHub

Abra el panel de Firebase y haga clic en Auth en el menú lateral y luego SIGN-IN-METHODen la barra de pestañas. Necesita habilitar la autenticación de GitHub y copiar elCallback URL. Lo necesitará en el paso 2. Puede dejar esta pestaña abierta, ya que tendrá que agregarClient ID y Client Secret una vez que termine el paso 2.

Paso 2: crea la aplicación Github

Siga este enlace para crear la aplicación GitHub. Necesitas copiar elCallback URL de Firebase al Authorization callback URLcampo. Una vez que se crea su aplicación, debe copiar elClient Key y el Client Secret desde la aplicación GitHub a Firebase.

Paso 3: crear botones

Agregaremos dos botones en el body etiqueta.

index.html

<button onclick = "githubSignin()">Github Signin</button>
<button onclick = "githubSignout()">Github Signout</button>

Paso 4: crear funciones de autenticación

Crearemos funciones para iniciar y cerrar sesión dentro del index.js archivo.

index.js

var provider = new firebase.auth.GithubAuthProvider();

function githubSignin() {
   firebase.auth().signInWithPopup(provider)
   
   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
		
      console.log(error.code)
      console.log(error.message)
   });
}

function githubSignout(){
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}

Ahora podemos hacer clic en los botones para activar la autenticación. La consola mostrará que la autenticación se realizó correctamente.

En este capítulo, autenticaremos a los usuarios de forma anónima.

Paso 1: habilitar la autenticación anónima

Este es el mismo proceso que en nuestros capítulos anteriores. Debes abrir el panel de Firebase, hacer clic enAuth del menú lateral y SIGN-IN-METHODdentro de la barra de pestañas. Debe habilitar la autenticación anónima.

Paso 2: función de inicio de sesión

Nosotros podemos usar signInAnonymously() método para esta autenticación.

Ejemplo

Consideremos el siguiente ejemplo.

firebase.auth().signInAnonymously()
.then(function() {
   console.log('Logged in as Anonymous!')
   
   }).catch(function(error) {
   var errorCode = error.code;
   var errorMessage = error.message;
   console.log(errorCode);
   console.log(errorMessage);
});

En este capítulo, le mostraremos cómo manejar el estado de conexión de Firebase.

Verifica la conexión

Podemos verificar el valor de la conexión usando el siguiente código.

index.js

var connectedRef = firebase.database().ref(".info/connected");

connectedRef.on("value", function(snap) {
   if (snap.val() === true) {
      alert("connected");
   } else {
      alert("not connected");
   }
});

Cuando ejecutamos la aplicación, la ventana emergente nos informará sobre la conexión.

Al usar la función dada anteriormente, puede realizar un seguimiento del estado de la conexión y actualizar su aplicación en consecuencia.

La seguridad en Firebase se maneja configurando el objeto similar a JSON dentro de las reglas de seguridad. Las reglas de seguridad se pueden encontrar cuando hacemos clic enDatabase dentro del menú lateral y luego RULES en la barra de pestañas.

En este capítulo, analizaremos un par de ejemplos simples para mostrarle cómo proteger los datos de Firebase.

Lee y escribe

El siguiente fragmento de código definido dentro de las reglas de seguridad de Firebase permitirá el acceso de escritura a /users/'$uid'/ para el usuario autenticado con el mismo uid, pero todo el mundo podía leerlo.

Ejemplo

Consideremos el siguiente ejemplo.

{
   "rules": {
      "users": {
         
         "$uid": {
            ".write": "$uid === auth.uid",
            ".read": true
         }
         
      }
   }
}

Validar

Podemos hacer cumplir la cadena de datos utilizando el siguiente ejemplo.

Ejemplo

{
   "rules": {
      
      "foo": {
         ".validate": "newData.isString()"
      }
      
   }
}

Este capítulo solo captó la superficie de las reglas de seguridad de Firebase. Lo importante es comprender cómo funcionan estas reglas, para que pueda combinarlas dentro de la aplicación.

En este capítulo, le mostraremos cómo alojar su aplicación en el servidor Firebase.

Antes de comenzar, agreguemos un poco de texto a index.htmletiqueta del cuerpo. En este ejemplo, agregaremos el siguiente texto.

<h1>WELCOME TO FIREBASE TUTORIALS APP</h1>

Paso 1: instala las herramientas de Firebase

Necesitamos instalar herramientas de base de fuego a nivel mundial en el command prompt ventana.

npm install -g firebase-tools

Paso 2: inicializa la aplicación Firebase

Primero necesitamos iniciar sesión en Firebase en el command prompt.

firebase login

Abra la carpeta raíz de su aplicación en el command prompt y ejecute el siguiente comando.

firebase init

Este comando inicializará su aplicación.

NOTE - Si ha utilizado una configuración predeterminada, la public Se creará la carpeta y index.htmldentro de esta carpeta será el punto de partida de su aplicación. Puede copiar el archivo de su aplicación dentro de la carpeta pública como solución.

Paso 3: implementar la aplicación Firebase

Este es el último paso de este capítulo. Ejecute el siguiente comando desde elcommand prompt para implementar su aplicación.

firebase deploy

Después de este paso, la consola registrará la URL de Firebase de sus aplicaciones. En nuestro caso, se llamahttps://tutorialsfirebase.firebaseapp.com. Podemos ejecutar este enlace en el navegador para ver nuestra aplicación.

↰ Previous page