Tutorialspoint FireBase 教程

原创 yBmZlQzJ 2023-03-03

336

Tutorialspoint FireBase 教程

来源：易百教程

FireBase教程™

Firebase是构建Web，Android和IOS应用程序的后端平台。它提供了实时数据库，不同的API，多种认证类型和托管平台。这是一个偏介绍性教程，介绍了Firebase平台的基础知识，并介绍了如何处理各种组件和子组件。

FireBase的控制台如下所示 -

面向读者

本教程面向需要简单，用户友好的后端平台的开发人员。完成本教程后，您将熟悉Firebase Web平台。也可以将Firebase用作未来开发的参考。

本教程旨在帮助您熟悉Firebase后端平台及其各种功能。

前提条件

需要一些JavaScript知识才能学习本教程。关于一些后端平台的知识不是必需的，但它可以帮助您了解各种Firebase概念。

问题反馈

我们不能保证您在学习此Firebase教程的过程中不会遇到任何问题。本教程中的讲解，示例和代码等只是根据作者的理解来概括写出。由于作者水平和能力有限，因此不保正所有编写的文章都准确无误。但是如果有遇到任何错误或问题，请反馈给我们，我们会及时纠正以方便后续读者阅读。

开始学习 >> ：Firebase简介

Firebase简介 - FireBase教程™

根据官方的Firebase文档介绍 -

Firebase可以为您的应用的后端提供动力，包括数据存储，用户身份验证，静态托管等等。专注于创造非凡的用户体验。使用Android，iOS和JavaScript SDK构建跨平台原生移动和网络应用程序。还可以使用服务器端库或REST API将Firebase连接到现有的后端。

Firebase功能

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

Firebase优势

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

Firebase限制

Firebase免费版本仅限于50个连接和100 MB的存储空间。

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

Firebase开发环境设置 - FireBase教程™

在本章中，我们将演示如何将Firebase添加到现有的应用程序，要安装Firebase，首先需要NodeJS。如果您还没有安装好Firebase，请从下表中的链接中下载安装。

NodeJS和NPM安装 - http://www.yiibai.com/nodejs/nodejs_environment_setup.html

第1步 - 创建Firebase帐户
可以在这里创建一个Firebase帐户 - http://www.firebase.com/ ，到编写这篇教程时，他会跳转到 - http://firebase.google.com/ ，并自动使用Google账号登录。(注意:如果打不开，可能是被墙了，自己想办法打开网站注册账号吧)。

第2步 - 创建Firebase应用程序

可以从仪表板页面创建新的应用程序。下图显示了创建的应用程序。

填写创建的项目信息 -

选择一个应用场景，这里先网页应用 -

接下来，它会显示如何安装使用 -

代码 -

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

只需要创建一个文件夹放置应用程序。在文件夹里面需要创建index.html文件。然后将Firebase添加到应用程序中，如下代码所示。

<html>
<head>
<script src="http://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAOSPYpgn7T_bKa6VbCaSeQlsw-3p3zqDs",
authDomain: "yiibai-firebase.firebaseapp.com",
databaseURL: "http://www.yiibai-firebase.firebaseio.com",
projectId: "yiibai-firebase",
storageBucket: "yiibai-firebase.appspot.com",
messagingSenderId: "334522625008"
};
firebase.initializeApp(config);
</script>
</head>

<body>

</body>
</html>

使用NPM

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

npm install firebase --save
# 或者 -
bower install firebase

Firebase数据 - FireBase教程™

Firebase数据是JSON对象格式的数据。如果从Firebase信息中心打开应用，则可以通过单击+号手动添加数据。

这里将演示如何创建一个简单的数据结构。请参考下图。

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

<html>
<head>
<title>Firebase示例</title>
<script src="http://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAOSPYpgn7T_bKa6VbCaSeQlsw-3p3zqDs",
authDomain: "yiibai-firebase.firebaseapp.com",
databaseURL: "http://www.yiibai-firebase.firebaseio.com",
projectId: "yiibai-firebase",
storageBucket: "yiibai-firebase.appspot.com",
messagingSenderId: "334522625008"
};
firebase.initializeApp(config);
console.log(firebase);
// 数据
var ref = firebase.database().ref('players');
console.log(ref);
</script>
</head>
<body>
</body>
</html>

Firebase记录输出如下 -

可以创建一个引用参考players的集合。

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

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

Firebase数组 - FireBase教程™

本章将解释数组在Firebase中如何表示。参考以几下数据 -

我们可以通过将以下JSON树发送给players集合来创建这些数据。

这是因为Firebase不直接支持数组，而是使用整数作为键名创建对象列表。
不使用数组的原因是因为Firebase充当实时数据库，如果有几个用户同时操作数组，结果可能会有问题，因为数组索引不断变化。

Firebase处理数组的方式是:键(索引)将始终保持不变。我们可以删除john 和 amanda，但仍然有键(索引)1。

Firebase写入列表数据 - FireBase教程™

在上一章中，我们已经演示了如何在Firebase中写入数据。有时需要有一个唯一的数据标识符。如果要为数据创建唯一标识符，则需要使用push方法而不是set方法。

在使用写入功能之前，避免遇到权限问题，建议设置规则为如下 -

push()方法

push()方法将在数据被推送时创建一个唯一的ID。如果想用前面的章节创建一个具有唯一ID的运动员数据，可以使用下面给出的代码片段。

现在数据看起来有些变化了。该名称将只是一个名称/值对，类似于其他的属性。

Key属性

可以使用key属性用于从Firebase获取任何键。例如，如果想获取集合名称，可以使用下面的代码片段。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>FireBase Example</title>
<script src="http://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAOSPYpgn7T_bKa6VbCaSeQlsw-3p3zqDs",
authDomain: "yiibai-firebase.firebaseapp.com",
databaseURL: "http://www.yiibai-firebase.firebaseio.com",
projectId: "yiibai-firebase",
storageBucket: "yiibai-firebase.appspot.com",
messagingSenderId: "334522625008"
};
firebase.initializeApp(config);
var playersRef = firebase.database().ref().child('players');
var playersKey = playersRef.key;
console.log(playersKey);
</script>
</head>
<body>

控制台将输入集合的名称为:players。

Firebase写入数据 - FireBase教程™

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

设置

set方法将写入或替换指定路径上的数据。让我们创建一个引用players收集和设置两个运动员数据信息。

执行上面示例代码，得到以下结果 -

更新

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

执行上面示例代码，得到以下结果 -

Firebase写入事务数据 - FireBase教程™

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

下面来看看运动员列表中的运动员。

我们要检索属性，添加年龄增加1岁并将其返还给Firebase。

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

如果运行这个代码，可以看到年龄值更新为21。如下图所示 -

Firebase读取数据 - FireBase教程™

在本章中，我们将演示如何读取Firebase数据。下图显示了想要读取的数据 -

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

示例

下面来看看一个例子。

如果运行下面的代码，浏览器的控制台将显示以下数据。

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

Firebase事件类型 - FireBase教程™

Firebase提供了几种不同的事件类型来读取数据。下图显示了想要读取的数据 -

下面介绍一些最常用的方法。

值

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

child_added

这个事件类型将被每个运动员触发一次，每次新运动员被添加到数据中。读取列表数据非常有用，因为我们可以从列表中获得添加的运动员和前一个运动员的访问权限。

示例
现在来看看下面的一个例子 -

执行上面示例代码，得到以下结果。

child_changed

这个事件类型在数据改变时被触发。

示例

考虑下面的例子。

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

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

可以在Firebase控制台中将Amanda的age字段的值由21更改为28以获取更新。

child_removed

假设原始数据如下 -

如果想获得已删除数据的访问权限，可以使用child_removed事件类型。

示例

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

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

上面示例中，假设我们删除索引号为:100，名字为:Maxsu的一行数据。则 -

Firebase分离回调 - FireBase教程™

本章将向学习如何分离Firebase中的回调。

分离事件类型的回调

下面将分离一个具有值事件类型的函数的回调。

示例

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

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

可使用off()方法，这将删除所有值事件类型的回调。

playersRef.off("value");

分离所有回调

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

playersRef.off();

Firebase查询和排序 - FireBase教程™

Firebase提供了多种排序数据的方式。在本章中，我们将学习简单的查询示例。这里将使用前面章节中的相同数据。数据记录如下所示 -

按子列排序

要按name列排序数据，可以使用下面的代码。

示例

让我们来看看下面的例子。

执行上面示例代码，得到以下结果 -

按索引排序

我们可以通过类似的方式:按索引键来排序数据。

示例

让我们看看下面的一个例子。

执行上面示例代码，得到以下结果 -

按值排序

我们也可以按值排序数据。在Firebase中添加一个评级(ratings)集合。如下图所示 -

现在可以按照每个运动员的值来排序数据。参考下面的例子。

执行上面示例代码，得到以下结果 -

Firebase过滤数据 - FireBase教程™

Firebase提供了多种方式来过滤数据。

限制第一个和最后一个

下面我们来了解第一个和最后一个数据限制是什么。

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

下面这个例子是展示如何工作的。由于在数据库中只有三个运动员数据，这里将限制查询返回一个运动员数据。

示例

现在，参考下面的例子 -

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>FireBase Example</title>
<script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAOSPYpgn7T_bKa6VbCaSeQlsw-3p3zqDs",
authDomain: "yiibai-firebase.firebaseapp.com",
databaseURL: "https://yiibai-firebase.firebaseio.com/",
projectId: "yiibai-firebase",
storageBucket: "yiibai-firebase.appspot.com",
messagingSenderId: "334522625008"
};
firebase.initializeApp(config);
var firstPlayerRef = firebase.database().ref("players/").limitToFirst(2);
var lastPlayerRef = firebase.database().ref('players/').limitToLast(2);
//console.log("====== limitToFirst(2) ========");
firstPlayerRef.on("value", function(data) {
console.log(data.val());
}, function (error) {
console.log("Error: " + error.code);
});
console.log("====== limitToLast(2) ========");
lastPlayerRef.on("value", function(data) {
console.log(data.val());
}, function (error) {
console.log("Error: " + error.code);
});
</script>
</head>
<body>

控制台会记录第一个查询得到前两个运动员数据，第二个查询得到最后两个运动员数据。结果如下所示 -

其他过滤器

我们也可以使用其他Firebase过滤方法。例如:startAt()，endAt()和equalTo()可以与排序方法结合使用。在下面的例子中，我们将把它和orderByChild()方法结合起来。

示例

让我们来看看下面的例子。参考以下代码 -

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>FireBase Example</title>
<script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAOSPYpgn7T_bKa6VbCaSeQlsw-3p3zqDs",
authDomain: "yiibai-firebase.firebaseapp.com",
databaseURL: "https://yiibai-firebase.firebaseio.com/",
projectId: "yiibai-firebase",
storageBucket: "yiibai-firebase.appspot.com",
messagingSenderId: "334522625008"
};
firebase.initializeApp(config);
var firstPlayerRef = firebase.database().ref("players/").limitToFirst(2);
var playersRef = firebase.database().ref("players/");

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

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

playersRef.orderByChild("name").equalTo("Kobe").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);
});
</script>
</head>
<body>

结果如下所示 -

Firebase电子邮件认证 - FireBase教程™

在本章中，我们将向您介绍如何使用Firebase电子邮件/密码身份验证。在开始之前，需要设置登录方法，参考以下图所示 -
设置登录方法，然后选择电子邮件地址/密码，打开启用并保存，如下图所示 -

创建用户

要验证用户，可以使用createUserWithEmailAndPassword(email，password)方法。

示例

让我们来看看下面的一个例子。参考代码 -

var email = "test@yiibai.com";
var password = "mypassword";

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

接下来，您可以检查Firebase仪表板中的数据库，并查看用户是否已创建成功。如下所示，已经创建了一个用户账号 -

注销

最后，可以使用signOut()方法注销已登录的用户。

示例
让我们看看下面的一个例子。演示如何注销已登录的用户 -

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

Firebase使用Google账号登录 - FireBase教程™

在本章中，我们将介绍如何在Firebase中设置Google身份验证。

第1步 - 启用Google身份验证
打开Firebase信息中心，然后点击左侧菜单中的身份验证。要打开可用方法的列表，需要在标签菜单中单击登录方法。

现在可以从列表中选择Google，启用它并保存。参考下图 -

第2步 - 创建登录按钮
创建一个文件:index.html，并将添加两个按钮。参考代码如下 -

<button onclick = "googleSignin()">使用Google账号登录</button>
<button onclick = "googleSignout()">Google账号注销</button>

第3步 - 登录和退出
在这一步中，我们将创建用于登录和注销的两个函数:googleSignin和googleSignout。这里将使用signInWithPopup()和signOut()函数。

示例

让我们来看看下面的例子。参考函数的实现 -

完整的代码如下 -

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>FireBase Example</title>
<script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAOSPYpgn7T_bKa6VbCaSeQlsw-3p3zqDs",
authDomain: "yiibai-firebase.firebaseapp.com",
databaseURL: "https://yiibai-firebase.firebaseio.com/",
projectId: "yiibai-firebase",
storageBucket: "yiibai-firebase.appspot.com",
messagingSenderId: "334522625008"
};
firebase.initializeApp(config);

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')
});
}
</script>
</head>
<body>
<button onclick = "googleSignin()">使用Google账号登录</button>
<button onclick = "googleSignout()">Google账号注销</button>
</body>
</html>

刷新页面后，可以点击使用Google账号登录按钮触发Google弹出窗口。如果登录成功，开发者控制台将登录指定的用户账号。

也可以点击Google账号注销按钮从应用程序注销。控制台将显示确认注销成功。

Firebase使用Github账号登录 - FireBase教程™

在本章中，我们将介绍如何在Firebase中设置Github身份验证，使用Github账号认证登录。

第1步 - 启用Github身份验证
打开Firebase信息中心，然后点击左侧菜单中的身份验证。要打开可用方法的列表，需要在标签菜单中单击登录方法。

现在可以从列表中选择Github，启用它并保存。参考下图 -

第2步 - 创建Github应用程序

第2步 - 创建登录按钮
创建一个文件:index.html，并将添加两个按钮。参考代码如下 -

<button onclick = "githubSignin()">使用Github账号登录</button>
<button onclick = "githubSignout()">Github账号注销</button>

第3步 - 登录和退出
在这一步中，我们将创建用于登录和注销的两个函数:githubSignin和githubSignout。这里将使用signInWithPopup()和signOut()函数。

示例

让我们来看看下面的例子。参考函数的实现 -

完整的代码，如下所示 -

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>FireBase Example</title>
<script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAOSPYpgn7T_bKa6VbCaSeQlsw-3p3zqDs",
authDomain: "yiibai-firebase.firebaseapp.com",
databaseURL: "https://yiibai-firebase.firebaseio.com/",
projectId: "yiibai-firebase",
storageBucket: "yiibai-firebase.appspot.com",
messagingSenderId: "334522625008"
};
firebase.initializeApp(config);

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')
});
}
</script>
</head>
<body>
<button onclick = "githubSignin()">使用Github账号登录</button>
<button onclick = "githubSignout()">Github账号注销</button>
</body>
</html>

刷新页面后，可以点击使用Github账号登录按钮触发Github弹出窗口。如果登录成功，开发者控制台将登录指定的用户账号。有关更新详细的账号认证信息，请查看文档: https://developer.github.com/v3/oauth/ 。

也可以点击Github账号注销按钮从应用程序注销。控制台将显示确认注销成功。

Firebase匿名身份验证 - FireBase教程™

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

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

这和我们以前的章节是一样的。需要打开Firebase信息中心，点击侧边菜单中的Auth和标签栏内的认证方法，需要启用匿名身份验证。

第2步 - 登录功能

可以使用signInAnonymously()方法进行此认证。

示例

让我们来看看下面的例子，参考示例代码 -

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连接检查 - FireBase教程™

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

检查连接

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

当运行应用程序时，弹出窗口会通知有关连接。

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

Firebase安全 - FireBase教程™

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

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

读和写

在Firebase安全规则中定义的以下代码片段将允许使用与uid访问/users/'$uid'/的认证用户才能写入，但是其它人都可以读取。

示例

让我们考虑下面的例子。参考代码 -

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

验证

可以通过使用下面的例子来强制数据为字符串。

{
"rules": {

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

}
}

本章只介绍Firebase安全规则的表面知识。重要的是要了解这些规则如何工作，所以可以在应用程序内部结合它使用。

「喜欢这篇文章，您的关注和赞赏是给作者最好的鼓励」

关注作者

Tutorialspoint FireBase 教程

Tutorialspoint FireBase 教程

FireBase教程™

面向读者

前提条件

问题反馈

Firebase简介 - FireBase教程™

Firebase功能

Firebase优势

Firebase限制

Firebase开发环境设置 - FireBase教程™

Firebase数据 - FireBase教程™

Firebase数组 - FireBase教程™

Firebase写入列表数据 - FireBase教程™

push()方法

Key属性

Firebase写入数据 - FireBase教程™

设置

更新

Firebase写入事务数据 - FireBase教程™

Firebase读取数据 - FireBase教程™

示例

Firebase事件类型 - FireBase教程™

值

child_added

child_changed

child_removed

Firebase分离回调 - FireBase教程™

分离事件类型的回调

分离所有回调

Firebase查询和排序 - FireBase教程™

按子列排序

按索引排序

按值排序

Firebase过滤数据 - FireBase教程™

限制第一个和最后一个

其他过滤器

Firebase电子邮件认证 - FireBase教程™

创建用户

登录

注销

Firebase使用Google账号登录 - FireBase教程™

Firebase使用Github账号登录 - FireBase教程™

Firebase匿名身份验证 - FireBase教程™

Firebase连接检查 - FireBase教程™

检查连接

Firebase安全 - FireBase教程™

读和写

验证

评论