通过firebase搭建一个评论系统, part 1
随着评论习惯慢慢改变，之前如火如荼的博客慢慢消沉下去了，随之慢慢冷淡下去的是博客连接起来的评论圈子，例如在各个博客下面留言“混个脸熟”，还有通过评论来推广链接等做法，也慢慢淡出我们的视线。
于是，很多博客，尤其是静态博客，要么直接内嵌基于github的comments，第三方disqus或者是直接没有评论。评论虽然不是必需品，但是作为一个blog，一个适当的评论模块当然是锦上添花。
之前使用了disqus，但是载入一堆js，而且样式还只能魔改，对于有些强迫症的朋友不太友好。所以自建一套评论系统便一直萦绕在脑袋里。
首先是数据保存，办法一般是在github上存储，或者使用数据库。如果不想架vps，那就要使用第三方数据库服务了。
具体步骤，我是参考的这篇 How To Build Your Own Comment System Using Firebase。
实现步骤
确定唯一标识
使用过disqus的知道，它的config需要几个字段：identifier、url、title，其中identifier是文章的唯一标识，既然通过这个唯一标识能建立数据库到文章的连接，那么自己建立一个数据库，然后打开文章的时候，单独操作相关数据就可以了。
这个标识可以是文章id，或者设置的链接名（通常是英文）。
申请并配置firebase
这个推荐参考官方文档，或上面提供的链接。根据实际需要，可以考虑使用实时数据库或者firestore。
代码部分
firebase提供了npm包，这个sdk可以直接引入项目中使用。基本步骤是通过config初始化firebase，利用api来读写数据。
初始化：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import firebase from 'firebase/app'; import 'firebase/database'; const firebaseConfig = { apiKey: 'key', appId: 'key', authDomain: 'key', databaseURL: 'key', measurementId: 'key', messagingSenderId: 'key', projectId: 'key', storageBucket: 'key', }; firebase.initializeApp(firebaseConfig); const db = firebase.database(); // 检测连接状态 export const connectedRef = db.ref('.info/connected'); const firebaseRef = db.ref(<code>/comments</code>); |
数据读取：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 通过缩略名获取评论 const getCommentsByPostSlug = (slug) => { return new Promise((resolve, reject) => { firebaseRef .orderByChild('slug') .equalTo(slug) .once('value', (snapshot) => { const comments = (snapshot.val()); resolve(comments || []); }); }); }; |
数据写入：
|
1 2 3 4 5 6 7 8 |
// comment写入 const addComment = (comment, callback) => { if (!comment.valid) { comment.valid = location.host; } const id = firebaseRef.push().key; return db.ref(<code>/comments/${id}</code>).set({...comment }); }; |
数据监听：
|
1 2 3 4 5 6 |
const addCommentsChangeListener = (slug, callback) => { firebaseRef.on('value', (snapshot) => { const posts = snapshot.val(); callback(posts); }); }; |
渲染部分：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const BlogCommentsTemplate = (props) => { const [comments, setComments] = useState(null); useEffect(() => { // 获取评论 getCommentsByPostSlug(slug).then((items) => { setComments(items); }); // 监听评论变化 addCommentsChangeListener(slug, (items) => { setComments(items); }); }, [slug]); // 渲染评论内容 return (); |
实例
可以在 这里 在文章下面评论，目前支持一级嵌套，仅可回复楼主，样式也和wordpress类似。
安全性
对应完全暴露在网络上的数据库，安全性是首先要考虑的，通常，可以在服务器端通过验证来源网站、约定token等方法，规避一些风险。对于firebase也类似，这部分请参考 Firebase 发布核对清单
对于网页应用：
1、(设置完没什么用，可能需要开登录)为您的网域添加白名单，以防止未经授权的使用：
请前往 https://console.developers.google.com/apis， 在凭据（credentials）下，设置API对应的安全域名
2、配置合适的数据库读写规则，防止意外操作
3、考虑使用身份验证
参考文档
1、数据库规则
2、避免不安全的规则
3、实时数据库的读写操作
4、用firebase建立评论系统
这轮子造得，孜孜不倦啊！
第三方体验不好，登录太繁琐。