Firebase 是 Google Cloud Platform 为应用开发者们(特别是全栈开发)推出的应用后台服务。借助 Firebase ,应用开发者们可以快速搭建应用后台,集中注意力在开发 client 上,并且可以享受到 Google Cloud 的稳定性和 scalability。

Firebase 为后台开发提供以下几个功能:

  • 实时数据库(Realtime database)
  • 用户认证(Authentication)
  • 自定义API(Cloud function)
  • 消息推送(Cloud messaging)
  • 静态网页Hosting云存储(Cloud storage)

Init

官方提供了 firebase 工具库,且使用 Promise 包装了 API, 使用起来很方便。

1
npm install firebase

官方还提供了js文件,若需要请自行到官网下载最新的文件。

1
2
3
4
5
6
7
8
9
10
11
// firebase.js
import firebase from 'firebase';
const config = {
// you Firebase App web config
// look this: https://firebase.google.com/docs/web/setup?authuser=0
};
export const firebaseApp = firebae.initializeApp(config);
export const firebaseAuth = firebase.auth();
export const firebaseData = firebase.database();
  • firebase-app - 核心的 firebase 客户端(必需)。
  • firebase-auth - Firebase 身份验证(可选)。
  • firebase-database - Firebase 实时数据库(可选)。
  • firebase-storage - Cloud Storage(可选)。
  • firebase-messaging - Firebase 云消息传递(可选)。

使用 webpack 等模块打包可以使用下面的方式,简化引用

1
2
3
4
5
6
7
8
9
10
11
12
13
// firebase.js
import firebase from 'firebase/app';
import 'firebsae/auth';
import 'firebsae/database';
const config = {
//...
};
export const firebaseApp = firebase.initializeApp(config);
export const firebaseAuth = firebase.auth();
export const firebaseData = firebase.database();

Auth

认证支持注册及社交登录,一下介绍基本流程

监控:

onAuthStateChanged(): 用来监控是否有用户(登录,退出)。

注册:

createUserWithEmailAndPassword(): 电子邮件地址和密码注册

登录:

signInWithEmailAndPassword(): 电子邮件地址和密码登录

社交媒体登录:

认证在使用前需要在应用控制台开启认证功能

  • FacebookAuthProvider(): Facebook OAuth 认证登录
  • GoogleAuthProvider(): Google OAuth 认证登录
  • GithubAuthProvider(): Github OAuth 认证登录
  • TwitterAuthProvider(): Twitter OAuth 认证登录
  • signInWithPopup(): 将社交媒体认证登录构造函数包装,使用弹窗形式认证登录

登出:

signOut(): 用户登出

这里仅提供基本认证操作过程,对于登录过程中的认证和以登录用户的信息操作,请查看官方文档。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import firebase from 'firebase';
import { firebaseAuth } from './firebase';
firebaseAuth.createUserWithEmailAndPassword(email, password)
.catch(err => {
// Handle Errors here.
const errorCode = err.code;
const errorMessage = err.message;
});
firebaseAuth.signInWithEmailAndPassword(email, password)
.catch(err => {
// Handle Errors here.
const errorCode = err.code;
const errorMessage = err.message;
});
firebaseAuth.signOut();
firebaseAuth.onAuthStateChanged(user => {
if (user) {
// user login
} else {
// not user login
}
}, err => {
// Handle Errors here.
const errorCode = err.code;
const errorMessage = err.message;
});
const provider = new firebase.auth.GoogleAuthProvider();
firebaseAuth.signInWithPopup(provider)
.then(result => {
// This gives you a Google Access Token. You can use it to access the Google API.
var token = result.credential.accessToken;
var user = result.user;
})
.catch(err => {
// Handle Errors here.
const errorCode = err.code;
const errorMessage = err.message;
});

因为是 Promise 所以可以使用 thencatch

Database

对于 data 的操作,除了基本的增删读改外还有一个监控,就像 auth 的监控一样。

ref() 这个很常用,返回表示数据库中与所提供路径相对应的位置的引用。如果没有提供路径,则引用将指向数据库的根。

其他参考官网API文档吧,都是很直白的API。

firebase.database DataSnapShot: 一些简单的 API 来提取 snapshot 内的信息。

firebase.database Reference: 对 snapshot 的信息进行筛选。

firebase.database Query: 查询。但这里存在观察方法 on, once

这里具体讲一下整个流程,之后再写 database 的代码。

  1. 当注册用户或使用社交媒体登录后,firebase 会为用户默认设置 id,可在应用控制台用户认证处查看id。
  2. 创建用户会默认登录,登录会创建 local Storage (本地存储) 中存储认证信息(OAuth的认证)。
  3. 用户要写文章(创建自己的data),这里需要操作 database,这里我的方法是以登录用户的唯一 id 作为data目录,之后保存信息条目。
  4. 用户登出,删除本地存储的认证信息。

在整个过程 firebase 都有提供更加细致的操作功能。而且 firebase 还支持 cloud fuction 等强大的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { firebaseData } from './firebase';
// 这里的 userId 可以使用上面 Auth 的观察函数来获取用户 id
// add
firebaseData.ref(`users/${userId}`).push(value, callback);
// update
firebaseData.ref(`users/${userId}/${key}`).update(value, callback);
// delete
firebaseData.ref(`users/${userId}/${key}`).remove(value, callback);
// port update
firebaseData.ref(`users/${userId}/${key}`).set(value, callback);
// watch value
firebaseData.on('value', snapshot => value = snapshot.val());