- Firebase 教程
- Firebase - 主页
- Firebase - 概述
- Firebase - 环境设置
- Firebase - 数据
- Firebase - 数组
- Firebase - 写入数据
- Firebase - 写入列表数据
- Firebase - 写入事务数据
- Firebase - 读取数据
- Firebase - 事件类型
- Firebase - 分离回调
- Firebase - 查询
- Firebase - 过滤数据
- Firebase - 最佳实践
- Firebase - 电子邮件身份验证
- Firebase - 谷歌身份验证
- Firebase - Facebook 身份验证
- Firebase - Twitter 身份验证
- Firebase - Github 身份验证
- 匿名认证
- Firebase - 离线功能
- Firebase - 安全
- Firebase - 部署
- Firebase 有用资源
- Firebase - 快速指南
- Firebase - 有用的资源
- Firebase - 讨论
Firebase - 快速指南
Firebase - 概述
根据 Firebase 官方文档 -
Firebase 可以为您的应用后端提供支持,包括数据存储、用户身份验证、静态托管等。专注于创造非凡的用户体验。我们会处理剩下的事情。使用我们的 Android、iOS 和 JavaScript SDK 构建跨平台本机移动和 Web 应用程序。您还可以使用我们的服务器端库或 REST API 将 Firebase 连接到现有后端。
Firebase 功能
实时数据库- Firebase 支持 JSON 数据,并且连接到它的所有用户在每次更改后都会收到实时更新。
身份验证- 我们可以使用匿名、密码或不同的社交身份验证。
托管- 应用程序可以通过与 Firebase 服务器的安全连接进行部署。
Firebase 的优势
它简单且用户友好。无需复杂的配置。
数据是实时的,这意味着每次更改都会自动更新连接的客户端。
Firebase 提供简单的控制仪表板。
有许多有用的服务可供选择。
Firebase 限制
- Firebase 免费计划仅限于 50 个连接和 100 MB 存储空间。
在下一章中,我们将讨论 Firebase 的环境设置。
Firebase - 环境设置
在本章中,我们将向您展示如何将 Firebase 添加到现有应用程序。我们需要NodeJS。如果您还没有下表中的链接,请检查该链接。
先生。 | 软件及说明 |
---|---|
1 | NodeJS 和 NPM NodeJS 是 Firebase 开发所需的平台。查看我们的NodeJS 环境设置。 |
第 1 步 - 创建 Firebase 帐户
您可以在此处创建 Firebase 帐户。
第 2 步 - 创建 Firebase 应用程序
您可以从仪表板页面创建新应用程序。下图显示了我们创建的应用程序。我们可以点击管理应用按钮进入应用。
步骤 3a - 创建基本的 HTML/js 应用程序
您只需要创建一个文件夹来放置您的应用程序。在该文件夹中,我们将需要index.html和index.js文件。我们将把 Firebase 添加到应用程序的标题中。
索引.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 - 数据
Firebase 数据表示 JSON 对象。如果您从 Firebase 仪表板打开应用程序,则可以通过单击+号手动添加数据。
我们将创建一个简单的数据结构。您可以检查下面的图片。
在上一章中,我们将 Firebase 连接到我们的应用程序。现在,我们可以将 Firebase 登录到控制台。
console.log(firebase)
我们可以创建对玩家收藏的引用。
var ref = firebase.database().ref('players'); console.log(ref);
我们可以在控制台看到如下结果。
Firebase - 数组
本章将解释 Firebase 数组的表示形式。我们将使用前一章中的相同数据。
我们可以通过将以下 JSON 树发送到玩家的集合来创建此数据。
['john', 'amanda']
这是因为 Firebase 不直接支持数组,但它创建一个以整数作为键名称的对象列表。
不使用数组的原因是因为 Firebase 充当实时数据库,如果几个用户同时操作数组,结果可能会出现问题,因为数组索引不断变化。
Firebase 处理它的方式,键(索引)将始终保持不变。我们可以删除john,而amanda仍然拥有键(索引)1。
Firebase - 写入数据
在本章中,我们将向您展示如何将数据保存到 Firebase。
放
set方法将写入或替换指定路径上的数据。让我们创建对玩家集合的引用并设置两个玩家。
var playersRef = firebase.database().ref("players/"); playersRef.set ({ John: { number: 1, age: 30 }, Amanda: { number: 2, age: 20 } });
我们将看到以下结果。
更新
我们可以用类似的方式更新 Firebase 数据。请注意我们如何使用players/john路径。
var johnRef = firebase.database().ref("players/John"); johnRef.update ({ "number": 10 });
当我们刷新应用程序时,我们可以看到 Firebase 数据正在更新。
Firebase - 写入列表数据
在上一章中,我们向您展示了如何在 Firebase 中写入数据。有时您需要为您的数据提供唯一的标识符。当你想为你的数据创建唯一标识符时,你需要使用push方法而不是set方法。
推法
当推送数据时,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 - 写入事务数据
当您需要从数据库返回一些数据然后用它进行一些计算并将其存储回来时,使用事务数据。
假设我们的玩家列表中有一名玩家。
我们想要检索财产,添加一岁并将其返回给 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 - 读取数据
在本章中,我们将向您展示如何读取 Firebase 数据。下图就是我们要读取的数据。
我们可以使用on()方法来检索数据。此方法将事件类型作为“值”,然后检索数据的快照。当我们将val()方法添加到快照时,我们将获得数据的 JavaScript 表示。
例子
让我们考虑下面的例子。
var ref = firebase.database().ref(); ref.on("value", function(snapshot) { console.log(snapshot.val()); }, function (error) { console.log("Error: " + error.code); });
如果我们运行以下代码,我们的控制台将显示数据。
在下一章中,我们将解释可用于读取数据的其他事件类型。
Firebase - 事件类型
Firebase 提供了多种不同的事件类型来读取数据。下面描述了一些最常用的。
价值
第一个事件类型是value。我们在上一章中向您展示了如何使用价值。每次数据更改时都会触发此事件类型,并且它将检索包括子项在内的所有数据。
子添加
此事件类型将为每个玩家触发一次,并且每次将新玩家添加到我们的数据中时都会触发一次。它对于读取列表数据很有用,因为我们可以从列表中访问添加的玩家和上一个玩家。
例子
让我们考虑下面的例子。
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 的新玩家,我们将获得更新的数据。
孩子改变了
当数据发生更改时会触发此事件类型。
例子
让我们考虑下面的例子。
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事件类型。
例子
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 - 分离回调
本章将向您展示如何在 Firebase 中分离回调。
分离事件类型的回调
假设我们想要分离具有值事件类型的函数的回调。
例子
var PlayersRef = firebase.database().ref("players/"); ref.on("值", 函数(数据) { console.log(data.val()); },函数(错误){ console.log("错误:" + error.code); });
我们需要使用off()方法。这将删除所有具有值事件类型的回调。
playersRef.off("value");
分离所有回调
当我们想要分离所有回调时,我们可以使用 -
playersRef.off();
Firebase - 查询
Firebase 提供了多种数据排序方式。在本章中,我们将展示简单的查询示例。我们将使用前几章中的相同数据。
按儿童订购
要按名称排序数据,我们可以使用以下代码。
例子
让我们考虑下面的例子。
var playersRef = firebase.database().ref("players/"); playersRef.orderByChild("name").on("child_added", function(data) { console.log(data.val().name); });
我们将按字母顺序看到名字。
按键订购
我们可以以类似的方式按键对数据进行排序。
例子
让我们考虑下面的例子。
var playersRef = firebase.database().ref("players/"); playersRef.orderByKey().on("child_added", function(data) { console.log(data.key); });
输出如下所示。
按价值排序
我们还可以按值对数据进行排序。让我们在 Firebase 中添加评级集合。
现在我们可以按每个玩家的值对数据进行排序。
例子
让我们考虑下面的例子。
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 - 过滤数据
Firebase 提供了多种过滤数据的方法。
限制为第一个和最后一个
让我们了解第一个和最后一个的限制是什么。
limitToFirst方法返回从第一个项目开始的指定数量的项目。
limitToLast方法返回从最后一项开始的指定数量的项目。
我们的例子展示了它是如何工作的。由于数据库中只有两名球员,因此我们将查询限制为一名球员。
例子
让我们考虑下面的例子。
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()方法结合起来。
例子
让我们考虑下面的例子。
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 - 最佳实践
在本章中,我们将介绍 Firebase 的最佳实践。
避免嵌套数据
当您从 Firebase 获取数据时,您将获得所有子节点。这就是为什么深度嵌套不被认为是最佳实践的原因。
数据非规范化
当您需要深层嵌套功能时,请考虑添加几个不同的集合;即使您需要添加一些重复数据并使用多个请求来检索您需要的内容。
Firebase - 电子邮件身份验证
在本章中,我们将向您展示如何使用 Firebase 电子邮件/密码身份验证。
创建用户
要对用户进行身份验证,我们可以使用createUserWithEmailAndPassword(email, password)方法。
例子
让我们考虑下面的例子。
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 仪表板并看到用户已创建。
登入
登录过程几乎相同。我们使用signInWithEmailAndPassword(电子邮件,密码)来登录用户。
例子
让我们考虑下面的例子。
var email = "myemail@email.com"; var password = "mypassword"; firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) { console.log(error.code); console.log(error.message); });
登出
最后我们可以使用signOut()方法注销用户。
例子
让我们考虑下面的例子。
firebase.auth().signOut().then(function() { console.log("Logged out!") }, function(error) { console.log(error.code); console.log(error.message); });
Firebase - 谷歌身份验证
在本章中,我们将向您展示如何在 Firebase 中设置 Google 身份验证。
第 1 步 - 启用 Google 身份验证
打开 Firebase 仪表板并单击左侧菜单上的Auth 。要打开可用方法列表,您需要单击选项卡菜单中的SIGN_IN_METHODS 。
现在您可以从列表中选择Google,启用并保存。
第 2 步 - 创建按钮
在我们的index.html中,我们将添加两个按钮。
索引.html
<button onclick = "googleSignin()">Google Signin</button> <button onclick = "googleSignout()">Google Signout</button>
第 3 步 - 登录和注销
在此步骤中,我们将创建登录和注销功能。我们将使用signInWithPopup()和signOut()方法。
例子
让我们考虑下面的例子。
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 注销按钮从应用程序注销。控制台将确认注销成功。
Firebase - Facebook 身份验证
在本章中,我们将使用 Firebase Facebook 身份验证对用户进行身份验证。
第 1 步 - 启用 Facebook 身份验证
我们需要打开 Firebase 仪表板并单击侧面菜单中的Auth。接下来,我们需要在选项卡栏中选择登录方法。我们将启用 Facebook 身份验证并将其保持打开状态,因为完成步骤 2 后我们需要添加App ID和App Secret 。
第 2 步 - 创建 Facebook 应用程序
要启用 Facebook 身份验证,我们需要创建 Facebook 应用程序。单击此链接即可开始。创建应用程序后,我们需要将应用程序 ID和应用程序密钥复制到 Firebase 页面(我们在步骤 1 中保持打开状态)。我们还需要将此窗口中的OAuth 重定向 URI复制到 Facebook 应用程序中。您可以在 Facebook 应用仪表板的侧面菜单中找到+ 添加产品。
选择Facebook 登录,它将出现在侧面菜单中。您将找到输入字段有效的 OAuth 重定向 URI,您需要从 Firebase复制 OAuth 重定向 URI 。
第 3 步 - 连接到 Facebook SDK
将以下代码复制到index.html中body标记的开头。请务必将Facebook 仪表板中的“APP_ID”替换为您的应用程序 ID。
例子
让我们考虑下面的例子。
<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 步 - 创建按钮
我们在前三步中设置了所有内容,现在我们可以创建两个用于登录和注销的按钮。
索引.html
<button onclick = "facebookSignin()">Facebook Signin</button> <button onclick = "facebookSignout()">Facebook Signout</button>
第 5 步 - 创建身份验证函数
这是最后一步。打开index.js并复制以下代码。
索引.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 身份验证
在本章中,我们将解释如何使用 Twitter 身份验证。
第 1 步 - 创建 Twitter 应用程序
您可以在此链接上创建 Twitter 应用程序。创建应用程序后,单击“密钥”和“访问令牌”,您可以在其中找到API Key和API Secret。您将在第 2 步中需要它。
第 2 步 - 启用 Twitter 身份验证
在 Firebase 仪表板侧面菜单中,您需要单击Auth。然后打开登录方法选项卡。单击 Twitter 将其启用。您需要添加步骤 1 中的API Key和API Secret 。
然后,您需要复制回调 URL并将其粘贴到您的 Twitter 应用程序中。单击“设置”选项卡时,您可以找到 Twitter 应用程序的回调 URL。
第 3 步 - 添加按钮
在此步骤中,我们将在index.html的body标记内添加两个按钮。
索引.html
<button onclick = "twitterSignin()">Twitter Signin</button> <button onclick = "twitterSignout()">Twitter Signout</button>
第 4 步 - 身份验证功能
现在我们可以创建 Twitter 身份验证的函数。
索引.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 身份验证
在本章中,我们将向您展示如何使用 GitHub API 对用户进行身份验证。
第 1 步 - 启用 GitHub 身份验证
打开 Firebase 仪表板,然后从侧面菜单中单击“身份验证”,然后在选项卡栏中单击“登录方法” 。您需要启用 GitHub 身份验证并复制Callback URL。您将在步骤 2 中需要此信息。您可以将此选项卡保持打开状态,因为完成步骤 2 后您将需要添加客户端 ID和客户端密钥。
第 2 步 - 创建 Github 应用程序
点击此链接创建 GitHub 应用程序。您需要将回调 URL从 Firebase复制到授权回调 URL字段中。创建应用程序后,您需要将客户端密钥和客户端密钥从 GitHub 应用程序复制到 Firebase。
第 3 步 - 创建按钮
我们将在body标签中添加两个按钮。
索引.html
<button onclick = "githubSignin()">Github Signin</button> <button onclick = "githubSignout()">Github Signout</button>
第 4 步 - 创建身份验证函数
我们将在index.js文件中创建用于登录和注销的函数。
索引.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 - 匿名身份验证
在本章中,我们将对用户进行匿名身份验证。
第 1 步 - 启用匿名身份验证
这与我们前面的章节中的过程相同。您需要打开 Firebase 仪表板,单击侧面菜单中的“身份验证” ,然后单击选项卡栏中的“登录方法” 。您需要启用匿名身份验证。
第 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 连接状态。
检查连接
我们可以使用以下代码检查连接值。
索引.js
var connectedRef = firebase.database().ref(".info/connected"); connectedRef.on("value", function(snap) { if (snap.val() === true) { alert("connected"); } else { alert("not connected"); } });
当我们运行应用程序时,弹出窗口会通知我们有关连接的信息。
通过使用上面给出的函数,您可以跟踪连接状态并相应地更新您的应用程序。
Firebase - 安全
Firebase 中的安全性是通过在安全规则内设置类似 JSON 的对象来处理的。当我们单击侧面菜单中的“数据库” ,然后单击选项卡栏中的“规则”时,可以找到安全规则。
在本章中,我们将通过几个简单的示例向您展示如何保护 Firebase 数据。
读和写
Firebase 安全规则中定义的以下代码片段将允许具有相同uid的经过身份验证的用户对/users/'$uid'/进行写入访问,但每个人都可以读取它。
例子
让我们考虑下面的例子。
{ "rules": { "users": { "$uid": { ".write": "$uid === auth.uid", ".read": true } } } }
证实
我们可以使用以下示例强制数据字符串化。
例子
{ "rules": { "foo": { ".validate": "newData.isString()" } } }
本章仅介绍了 Firebase 安全规则的表面。重要的是了解这些规则如何工作,以便您可以将其组合到应用程序中。
Firebase - 部署
在本章中,我们将向您展示如何在 Firebase 服务器上托管您的应用程序。
在开始之前,让我们向index.html body 标记添加一些文本。在此示例中,我们将添加以下文本。
<h1>WELCOME TO FIREBASE TUTORIALS APP</h1>
第 1 步 - 安装 Firebase 工具
我们需要在命令提示符窗口中全局安装 firebase 工具。
npm 安装-g firebase-tools
第 2 步 - 初始化 Firebase 应用程序
首先我们需要在命令提示符下登录 Firebase 。
firebase login
在命令提示符中打开应用程序的根文件夹并运行以下命令。
firebase初始化
此命令将初始化您的应用程序。
注意- 如果您使用了默认配置,则会创建公共文件夹,并且该文件夹内的index.html将成为您的应用程序的起点。作为解决方法,您可以将应用程序文件复制到公共文件夹中。
第 3 步 - 部署 Firebase 应用程序
这是本章的最后一步。从命令提示符运行以下命令来部署您的应用程序。
firebase deploy
执行此步骤后,控制台将记录您的应用 Firebase URL。在我们的例子中,它被称为https://tutorialsfirebase.firebaseapp.com。我们可以在浏览器中运行此链接来查看我们的应用程序。