Firebase - 快速指南

Firebase - Overview

根据官方Firebase文档 -

Firebase can power your app's backend, including data storage, user authentication, static hosting, and more. Focus on creating extraordinary user experiences. We will take care of the rest. Build cross-platform native mobile and web apps with our Android, iOS, and JavaScript SDKs. You can also connect Firebase to your existing backend using our server-side libraries or our REST API.

Firebase功能

Real-time Database - Firebase支持JSON数据，连接到它的所有用户在每次更改后都会收到实时更新。
Authentication - 我们可以使用匿名，密码或不同的社交身份验证。
Hosting - 可以通过与Firebase服务器的安全连接部署应用程序。

Firebase的优势

它简单易用。无需复杂的配置。
数据是实时的，这意味着每次更改都会自动更新连接的客户端。
Firebase提供简单的控制仪表板。
有许多有用的服务可供选择。

Firebase限制

Firebase免费计划限制为50个连接和100 MB的存储空间。

在下一章中，我们将讨论Firebase的环境设置。

Firebase - Environment Setup

在本章中，我们将向您展示如何将Firebase添加到现有应用程序。我们需要NodeJS 。如果您还没有，请检查下表中的链接。

Sr.No.	软件和描述
1	NodeJS and NPM NodeJS是Firebase开发所需的平台。查看我们的NodeJS环境设置。

第1步 - 创建Firebase帐户

您可以here创建Firebase帐户。

第2步 - 创建Firebase应用程序

您可以从仪表板页面创建新的应用程序。下图显示了我们创建的应用程序。我们可以单击“ Manage App按钮进入应用程序。

步骤3a - 创建基本的HTML/js应用程序

您只需创建一个放置应用程序的文件夹即可。在该文件夹中，我们需要index.html和index.js文件。我们会将Firebase添加到我们应用的标头中。

的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>

步骤3b - 使用NPM或Bower

如果您想使用现有应用，可以使用Firebase NPM或Bowers套餐。从应用程序根文件夹运行以下命令之一。

npm install firebase --save

bower install firebase

Firebase - Data

Firebase数据表示JSON对象。如果您从Firebase信息中心打开应用，则可以通过点击+号手动添加数据。

我们将创建一个简单的数据结构。您可以查看下面的图片。

在上一章中，我们将Firebase连接到了我们的应用程序。现在，我们可以将Firebase记录到控制台。

console.log(firebase)

我们可以创建对玩家收藏的引用。

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

我们可以在控制台中看到以下结果。

Firebase - Arrays

本章将解释数组的Firebase表示。我们将使用前一章中的相同数据。

我们可以通过将以下JSON树发送到播放器的集合来创建此数据。

['john', 'amanda']

这是因为Firebase不直接支持Arrays，但它会创建一个以整数作为键名的对象列表。

不使用数组的原因是Firebase充当实时数据库，如果有几个用户同时操作数组，结果可能会有问题，因为数组索引不断变化。

Firebase处理它的方式，键（索引）将始终保持不变。我们可以删除john而amanda仍然会有密钥（索引）1。

Firebase - Write Data

在本章中，我们将向您展示如何将数据保存到Firebase。

Set

set方法将在指定路径上写入或替换数据。让我们创建一个对玩家集合的引用并设置两个玩家。

var playersRef = firebase.database().ref("players/");
playersRef.set ({
   John: {
      number: 1,
      age: 30
   },
   Amanda: {
      number: 2,
      age: 20
   }
});

我们将看到以下结果。

Update

我们可以以类似的方式更新Firebase数据。注意我们如何使用players/john路径。

var johnRef = firebase.database().ref("players/John");
johnRef.update ({
   "number": 10
});

刷新我们的应用时，我们可以看到Firebase数据正在更新。

Firebase - Write List Data

在上一章中，我们向您展示了如何在Firebase中编写数据。有时您需要为数据设置唯一标识符。如果要为数据创建唯一标识符，则需要使用push方法而不是set方法。

推送方法

push()方法将在push()数据时创建唯一的id。如果我们想要使用唯一ID创建前面章节中的玩家，我们可以使用下面给出的代码段。

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

现在我们的数据会有所不同。该名称将只是一个名称/值对，就像其他属性一样。

关键方法

我们可以使用key()方法从Firebase获取任何密钥。例如，如果我们想获取我们的集合名称，我们可以使用以下代码段。

var ref = new Firebase('https://tutorialsfirebase.firebaseio.com');
var playersRef = ref.child("players");
var playersKey = playersRef.key();
console.log(playersKey);

控制台将记录我们的集合名称（玩家）。

更多相关内容将在下一章中介绍。

Firebase - Write Transactional Data

当您需要从数据库返回一些数据然后使用它进行一些计算并将其存储回来时，将使用事务数据。

让我们说我们的玩家列表中有一个玩家。

我们想要检索属性，添加一年的年龄并将其返回Firebase。

amandaRef正在从集合中检索年龄，然后我们可以使用事务方法。我们将获得当前年龄，添加一年并更新集合。

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

如果我们运行此代码，我们可以看到年龄值更新为21 。

Firebase - Read Data

在本章中，我们将向您展示如何阅读Firebase数据。下图显示了我们要读取的数据。

我们可以使用on()方法来检索数据。此方法将事件类型视为"value" ，然后检索数据的snapshot 。当我们将val()方法添加到快照时，我们将获得数据的JavaScript表示。

例子 (Example)

让我们考虑以下示例。

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

如果我们运行以下代码，我们的控制台将显示数据。

在下一章中，我们将解释可用于读取数据的其他事件类型。

Firebase - Event Types

Firebase提供了几种不同的事件类型来读取数据。一些最常用的一些如下所述。

值

第一个事件类型是value 。我们在上一章中向您展示了如何使用值。每次数据更改时都会触发此事件类型，它将检索包括子项在内的所有数据。

child_added

对于每个玩家以及每次将新玩家添加到我们的数据时，将触发此事件类型一次。它对于读取列表数据很有用，因为我们可以从列表中访问添加的播放器和之前的播放器。

例子 (Example)

让我们考虑以下示例。

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

我们将得到以下结果。

如果我们添加一个名为Bob的新玩家，我们将获得更新的数据。

child_changed

数据更改时会触发此事件类型。

例子 (Example)

让我们考虑以下示例。

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

我们可以在Firebase中将Bob更改为Maria以获取更新。

child_removed

如果我们想要访问已删除的数据，我们可以使用child_removed事件类型。

例子 (Example)

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

现在，我们可以从Firebase中删除Maria以获取通知。

Firebase - Detaching Callbacks

本章将向您展示如何在Firebase中分离回调。

分离事件类型的回调

让我们说我们想要为具有value事件类型的函数分离回调。

例子 (Example)

var playersRef = firebase.database().ref("players/");
ref.on("value", function(data) {
   console.log(data.val());
}, function (error) {
   console.log("Error: " + error.code);
});

我们需要使用off()方法。这将删除具有value事件类型的所有回调。

playersRef.off("value");

分离所有回调

当我们要分离所有回调时，我们可以使用 -

playersRef.off();

Firebase - Queries

Firebase提供各种订购数据的方式。在本章中，我们将展示简单的查询示例。我们将使用前面章节中的相同数据。

按儿童命令

要按名称订购数据，我们可以使用以下代码。

例子 (Example)

让我们考虑以下示例。

var playersRef = firebase.database().ref("players/");
playersRef.orderByChild("name").on("child_added", function(data) {
   console.log(data.val().name);
});

我们将按字母顺序查看名称。

按键排序

我们可以通过密钥以类似的方式订购数据。

例子 (Example)

让我们考虑以下示例。

var playersRef = firebase.database().ref("players/");
playersRef.orderByKey().on("child_added", function(data) {
   console.log(data.key);
});

输出如下所示。

按价值排序

我们还可以按价值订购数据。让我们在Firebase中添加评级集合。

现在我们可以按每个玩家的价值订购数据。

例子 (Example)

让我们考虑以下示例。

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());
   });
});

输出如下所示。

Firebase - Filtering Data

Firebase提供了几种过滤数据的方法。

限制为第一个和最后一个

让我们了解首先和最后的限制。

limitToFirst方法从第一个方法开始返回指定数量的项目。
limitToLast方法从最后一个开始返回指定数量的项。

我们的例子展示了它是如何工作的。由于我们在数据库中只有两个玩家，我们会将查询限制在一个玩家。

例子 (Example)

让我们考虑以下示例。

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

我们的控制台将记录第一个查询中的第一个玩家，以及第二个查询中的最后一个玩家。

其他过滤器

我们还可以使用其他Firebase过滤方法。 startAt() ， endAt()和equalTo()可以与排序方法结合使用。在我们的示例中，我们将它与orderByChild()方法结合起来。

例子 (Example)

让我们考虑以下示例。

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

第一个查询将按名称排序元素，并从名为Amanda的播放器中过滤。控制台将记录两个玩家。第二个查询将记录“Amanda”，因为我们以此名称结束查询。第三个将记录“John”，因为我们正在搜索具有该名称的玩家。

第四个例子展示了我们如何将过滤器与“年龄”值结合起来。我们在startAt()方法中传递数字而不是字符串，因为年龄由数字值表示。

Firebase - Best Practices

在本章中，我们将介绍Firebase的最佳实践。

避免嵌套数据

从Firebase获取数据时，您将获得所有子节点。这就是深度嵌套不被认为是最佳实践的原因。

非规范化数据

当您需要深层嵌套功能时，请考虑添加几个不同的集合; 即使您需要添加一些数据重复并使用多个请求来检索您需要的内容。

Firebase - Email Authentication

在本章中，我们将向您展示如何使用Firebase电子邮件/密码身份验证。

创建用户

要对用户进行身份验证，我们可以使用createUserWithEmailAndPassword(email, password)方法。

例子 (Example)

让我们考虑以下示例。

var email = "myemail@email.com";
var password = "mypassword";
firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
   console.log(error.code);
   console.log(error.message);
});

我们可以查看Firebase信息中心并查看是否已创建用户。

Signout

最后，我们可以使用signOut()方法注销用户。

例子 (Example)

让我们考虑以下示例。

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

Firebase - Google Authentication

在本章中，我们将向您展示如何在Firebase中设置Google身份验证。

第1步 - 启用Google身份验证

打开Firebase仪表板，然后单击左侧菜单上的“ Auth ”。要打开可用方法列表，您需要单击选项卡菜单中的SIGN_IN_METHODS 。

现在，您可以从列表中选择Google ，启用它并保存。

第2步 - 创建按钮

在我们的index.html ，我们将添加两个按钮。

的index.html

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

第3步 - 登录和注销

在此步骤中，我们将创建Signin和Signout函数。我们将使用signInWithPopup()和signInWithPopup() signOut()方法。

例子 (Example)

让我们考虑以下示例。

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

刷新页面后，我们可以点击Google Signin按钮触发Google弹出窗口。如果登录成功，开发人员控制台将登录我们的用户。

我们还可以点击Google Signout按钮从应用中退出。控制台将确认注销成功。

Firebase - Facebook Authentication

在本章中，我们将使用Firebase Facebook身份验证对用户进行身份验证。

第1步 - 启用Facebook身份验证

我们需要打开Firebase信息中心，然后在侧边菜单中点击Auth 。接下来，我们需要在标签栏中选择SIGN-IN-METHOD 。我们将启用Facebook身份验证并保持打开状态，因为我们需要在完成第2步时添加App ID和App Secret 。

第2步 - 创建Facebook应用程序

要启用Facebook身份验证，我们需要创建Facebook应用程序。点击此链接开始。创建应用程序后，我们需要将App ID和App Secret复制到我们在步骤1中打开的Firebase页面。我们还需要将OAuth Redirect URI从此窗口复制到Facebook应用程序中。您可以在Facebook应用程序仪表板的侧面菜单中找到+ Add Product 。

选择Facebook Login ，它将出现在侧边菜单中。您将找到输入字段Valid OAuth redirect URIs ，您需要从Firebase复制OAuth Redirect URI 。

第3步 - 连接到Facebook SDK

将以下代码复制到index.html body标签的开头。请务必从Facebook信息中心将'APP_ID'替换为您的应用ID。

例子 (Example)

让我们考虑以下示例。

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

第4步 - 创建按钮

我们在前三个步骤中设置了所有内容，现在我们可以创建两个用于登录和注销的按钮。

的index.html

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

第5步 - 创建验证功能

这是最后一步。打开index.js并复制以下代码。

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

Firebase - Twitter Authentication

在本章中，我们将解释如何使用Twitter身份验证。

第1步 - 创建Twitter应用程序

您可以在此link上创建Twitter应用程序。创建应用程序后，单击“ Keys and Access Tokens ，您可以在其中找到API Key和API Secret 。您将在第2步中使用此功能。

第2步 - 启用Twitter身份验证

在Firebase信息中心的侧边菜单中，您需要点击Auth 。然后打开SIGN-IN-METHOD选项卡。点击Twitter即可启用它。您需要从步骤1添加API Key和API Secret 。

然后，您需要复制callback URL并将其粘贴到您的Twitter应用程序中。单击“ Settings选项卡时，可以找到Twitter应用程序的回调URL。

第3步 - 添加按钮

在此步骤中，我们将在index.html的body标记内添加两个按钮。

的index.html

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

第4步 - 身份验证功能

现在我们可以为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!')
   });
}

当我们启动我们的应用程序时，我们可以通过单击两个按钮来签名或注销。控制台将确认身份验证成功。

Firebase - Github Authentication

在本章中，我们将向您展示如何使用GitHub API对用户进行身份验证。

步骤1 - 启用GitHub身份验证

打开Firebase仪表板，然后单击侧面菜单中的Auth ，然后单击标签栏中的SIGN-IN-METHOD 。您需要启用GitHub身份验证并复制Callback URL 。您将在步骤2中使用此选项。您可以打开此选项卡，因为完成第2步后需要添加Client ID和Client Secret 。

第2步 - 创建Github应用程序

点击此link创建GitHub应用程序。您需要将Firebase中的Callback URL复制到Authorization callback URL字段中。创建应用程序后，您需要将Client Key和Client Secret从GitHub应用程序复制到Firebase。

第3步 - 创建按钮

我们将在body标签中添加两个按钮。

的index.html

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

第4步 - 创建验证功能

我们将在index.js文件中创建signin和signout的函数。

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

现在我们可以点击按钮来触发身份验证。控制台将显示身份验证成功。

Firebase - Anonymous Authentication

在本章中，我们将匿名验证用户。

第1步 - 启用匿名身份验证

这与我们前面章节中的过程相同。您需要打开Firebase仪表板，单击侧面菜单中的Auth和标签栏内的SIGN-IN-METHOD 。您需要启用匿名身份验证。

第2步 - 登录功能

我们可以使用signInAnonymously()方法进行此身份验证。

例子 (Example)

让我们考虑以下示例。

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

Firebase - Offline Capabilities

在本章中，我们将向您展示如何处理Firebase连接状态。

检查连接

我们可以使用以下代码检查连接值。

index.js

var connectedRef = firebase.database().ref(".info/connected");
connectedRef.on("value", function(snap) {
   if (snap.val() === true) {
      alert("connected");
   } else {
      alert("not connected");
   }
});

当我们运行应用程序时，弹出窗口将通知我们有关连接的信息。

通过使用上面给出的功能，您可以跟踪连接状态并相应地更新您的应用程序。

Firebase - Security

Firebase中的安全性通过在安全规则中设置类似JSON的对象来处理。当我们单击侧面菜单中的Database然后单击标签栏中的RULES ，可以找到安全规则。

在本章中，我们将通过几个简单的示例向您展示如何保护Firebase数据。

读和写

Firebase安全规则中定义的以下代码段将允许使用相同的uid为经过身份验证的用户写入/users/'$uid'/ ，但每个人都可以阅读它。

例子 (Example)

让我们考虑以下示例。

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

Validate

我们可以使用以下示例将数据强制转换为字符串。

例子 (Example)

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

本章仅介绍了Firebase安全规则的表面。重要的是要了解这些规则的工作原理，以便将其组合到应用程序中。

Firebase - Deploying

在本章中，我们将向您展示如何在Firebase服务器上托管您的应用。

在开始之前，让我们向index.html body标签添加一些文本。在此示例中，我们将添加以下文本。

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

第1步 - 安装Firebase工具

我们需要在command prompt窗口中全局安装firebase工具。

npm install -g firebase-tools

第2步 - 初始化Firebase应用程序

首先，我们需要在command prompt登录Firebase。

firebase login

在command prompt打开应用程序的根文件夹，然后运行以下命令。

firebase init

此命令将初始化您的应用程序。

NOTE - 如果您使用了默认配置，则将创建公用文件夹，并且此文件夹中的index.html将成为您应用的起点。您可以将公用文件夹中的应用程序文件复制为变通方法。

第3步 - 部署Firebase应用程序

这是本章的最后一步。从command prompt运行以下命令以部署您的应用程序。

firebase deploy

完成此步骤后，控制台将记录您的应用Firebase网址。在我们的例子中，它被称为https://tutorialsfirebase.firebaseapp.com 。我们可以在浏览器中运行此链接以查看我们的应用。

<上一篇.Firebase - 部署( Deploying)

Firebase - 有用的资源.下一篇>

Firebase - 教程

Firebase - 概述

Firebase - 环境设置( Environment Setup)

Firebase - Data

Firebase - 阵列( Arrays)

Firebase - 写入数据( Write Data)

Firebase - 写入列表数据( Write List Data)

Firebase - 写入交易数据( Write Transactional Data)

Firebase - 读取数据( Read Data)

Firebase - 事件类型( Event Types)

Firebase - 分离回调( Detaching Callbacks)

Firebase - 查询( Queries)

Firebase - 过滤数据( Filtering Data)

Firebase - 最佳实践( Best Practices)

Firebase - 电子邮件身份验证( Email Authentication)

Firebase - Google身份验证( Google Authentication)

Firebase - Facebook身份验证( Facebook Authentication)

Firebase - Twitter身份验证( Twitter Authentication)

Firebase - Github身份验证( Github Authentication)

匿名身份验证(Anonymous Authentication)

Firebase - 离线功能( Offline Capabilities)

Firebase - 安全( Security)

Firebase - 部署( Deploying)