通过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建立评论系统
这轮子造得,孜孜不倦啊!
第三方体验不好,登录太繁琐。
评论没几个,就不去造轮子了
firebase的最大问题就是firestore没法在国内用,搞得头疼。
@Go123 我的处理是检测到无法加载firebase,就把评论模块屏蔽了
云里雾里,看了好久,没看懂……
在网上看 现在人的信息都被7元一个卖了 于是学习了一丝丝的人肉技巧想看看自己在网上有什么痕迹 然后搜到了高考后写的新浪博客 然后看到你当时的留言 打开你的博客发现了自己 虽然写的东西不太明白不过看到名字感觉应该就真的是阿修你了
只想说我真的没有窥探你 只是偶然发现了 感觉自己很了不起 又想留言炫耀一下 
文章不错支持一下吧
我也是用disqus很久很久,直到前不久它的同步功能总是坏我受不了了,就还是用回了wp默认的评论系统。固执的认为文章和评论应该放在同一个数据库中,噗~