通过firebase搭建一个评论系统, part 1

By
写代码

随着评论习惯慢慢改变,之前如火如荼的博客慢慢消沉下去了,随之慢慢冷淡下去的是博客连接起来的评论圈子,例如在各个博客下面留言“混个脸熟”,还有通过评论来推广链接等做法,也慢慢淡出我们的视线。

于是,很多博客,尤其是静态博客,要么直接内嵌基于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来读写数据。

初始化:

数据读取:

数据写入:

数据监听:

渲染部分:

实例

可以在 这里 在文章下面评论,目前支持一级嵌套,仅可回复楼主,样式也和wordpress类似。

安全性

对应完全暴露在网络上的数据库,安全性是首先要考虑的,通常,可以在服务器端通过验证来源网站、约定token等方法,规避一些风险。对于firebase也类似,这部分请参考 Firebase 发布核对清单

对于网页应用:

1、(设置完没什么用,可能需要开登录)为您的网域添加白名单,以防止未经授权的使用:
请前往 https://console.developers.google.com/apis, 在凭据(credentials)下,设置API对应的安全域名
2、配置合适的数据库读写规则,防止意外操作
3、考虑使用身份验证

参考文档

1、数据库规则
2、避免不安全的规则
3、实时数据库的读写操作
4、用firebase建立评论系统

0

Comments: 7

  1. 这轮子造得,孜孜不倦啊!

    01月18日
  2. 第三方体验不好,登录太繁琐。

    01月19日
  3. 评论没几个,就不去造轮子了

    02月24日
  4. firebase的最大问题就是firestore没法在国内用,搞得头疼。

    02月27日
    • @Go123 我的处理是检测到无法加载firebase,就把评论模块屏蔽了

      @venmax 03月02日
  5. 云里雾里,看了好久,没看懂……

    03月23日
  6. 在网上看 现在人的信息都被7元一个卖了 于是学习了一丝丝的人肉技巧想看看自己在网上有什么痕迹 然后搜到了高考后写的新浪博客 然后看到你当时的留言 打开你的博客发现了自己 虽然写的东西不太明白不过看到名字感觉应该就真的是阿修你了 :shock: 只想说我真的没有窥探你 只是偶然发现了 感觉自己很了不起 又想留言炫耀一下 :mrgreen:

    03月25日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: