Disqus评论框改造工程-Jekyll等静态博客实现Disqus代理访问

文章最初发表于szhshp的第三边境研究所
转载请注明

关于博客评论

六月多说挂了，地球人都知道。

倡言、云跟帖、来必力都很烂，地球人都知道。

转Disqus的都是人才。

Disqus使用中遇到的问题

如果你常年写静态博客并且经常使用评论框，Disqus使用中你肯定会遇到一些问题，比如：

1. 很难将其他平台的评论记录导入到Disqus
2. 国内无法访问

第一个问题请参考之前的文章： Disqus评论框改造工程-"最近评论"的实现

迁移一般不成问题，不过国内访问依然是个大麻烦，于是这周我看了下使用反向代理实现Disqus国内访问的解决方案

Disqus国内访问

实现Disqus国内访问你需要几样东西：

1. 你肯定要先有其他办法访问Disqus进行评论管理查看测试
   • 可以参考这篇文章（ OmegaHosts-添加Hosts本该如此简单）修改Hosts访问Disqus
   • 当然很多地方集成的Hosts文件里面也已经有Disqus的IP了，也可以直接拿来用，反正Disqus的IP不会像Google一样经常改变
2. 你需要一台服务器/VPS，你可以偷室友的/抢基友的/用公司的/偷学校的或者自己买，无论如何你需要一个可以操作的服务器

代理思路

目的是让所有用户都能看到评论框。

• 首先GFW封锁了Disqus，一般网络无法访问。
• 使用VPN/Hosts的用户打通了Disqus访问的路径
  • 但是没有使用VPN/Hosts的访客依然无法查看Disqus

• 首先判断用户是否可以访问原生Disqus，如果可以，直接访问不做处理
• 如果不行，这时我们创建一个代理，将所有用户的访问都Redirect到代理服务器
  • 当然我们需要让服务器可以直接访问Disqus
  • 可以购买国外的服务器或者在服务器上运行VPN
• 如此可以实现让所有用户访问评论框

要实现这个功能，可以用现成的轮子： https://github.com/ciqulover/disqus-proxy

后端配置

1. clone repo

        git clone https://github.com/ciqulover/disqus-proxy
   

2. 安装依赖

        npm i --production
        // 或者
        yarn install --production
   

3. 配置 server 目录下的config.js

        module.exports = {
                // 服务端端口，需要与 disqus-proxy 前端设置一致
                port: 5509,
                // 你的 diqus secret key
                api_secret: 'your secret key',
                // 你的 disqus 名称，就是forum名称
                username:'ciqu',
                // 服务端 socks5 代理转发，便于在本地测试，生产环境通常为 null
                socks5Proxy: null,
                // 日志输出位置, 输出到文件或控制台 'file' | 'console'
                log: 'console'
        }

api secret key需要在Disqus的API页面申请
另外需要到Settings => Community 里开启访客评论

1. 启动服务

        cd server
        node index.js
   

正常运行服务，关闭ssh的时候就会关闭服务器，因此可以考虑使用forever插件

前端配置

将build里面的几个文件夹放到自己项目路径，修改对应引用路径：

      <*div id="disqus_proxy_thread"><*/div>
      <*div id="disqus_thread"><*/div>
      <*script>
        window.disqusProxy = {
          username:'szhshp',  --同样是Forum名字
          server: '123.123.123.321',  --这里是服务器IP
          port: 3000,
          defaultAvatar: '/img/default-avatar.png',   --默认头像
          adminAvatar: '/img/admin-avatar.png',  --自己的头像
          identifier: window.location.href --就是辨识符这样的东西，一般是用当前url
        };
        window.disqus_config = function () {
          this.page.url = window.location.href;
          this.page.identifier = window.location.href;
        };
        var s = document.createElement('script');
        s.src = '/static/js/main.0d0338ae.js';
        s.async = true;
        document.body.appendChild(s);
      <*/script>
      <*link rel="stylesheet" href="/static/css/main.0603c539.css">

配置完成后，访问对应页面，如果当前网络状况无法访问Disqus，则会显示一个精简版的评论框，这个评论框仅支持添加匿名评论。

如果可以访问Disqus，就会显示原生Disqus评论框。

好，代理搭建完成，但是这还没有完成，还存在几个问题

Trouble Shooting

This application cannot create posts on the chosen forum

这个问题看了我两天

原来代码里面其实存在一个大问题，最大的问题就是一切配置正常的情况下，无法添加新的评论

对应的Post报错：This application cannot create posts on the chosen forum

这个很是奇怪，添加新评论将会通过Http.Post到 create.json前后端交互的一切逻辑都符合官方API的需求，但是偏偏就是无法添加新的匿名评论。

调查许久后，发现有一个key有些特殊：Post到create.json这个接口的时候对应的API_Key 是一个固定的值，而不是自己的Public Key或者Secret Key，这一点可以通过自己添加一个新的评论然后抓包证实。

同时很多文章也提到了这个问题(虽然没有feedback但是这儿是正确答案)：Creating an anonymous post with disqus API fails

因此，将上面轮子里面的一个螺丝钉换一下即可：将post的其中一个参数改为固定值：

        router.post('/api/createComment', async function (ctx) {
          logger.info('Create comment: ' + JSON.stringify(ctx.request.body))
          let result
          try {
            result = await rq(Object.assign(req, {
              url: 'https://disqus.com/api/3.0/posts/create.json',
              method: 'POST',
              form: Object.assign(ctx.request.body, {
                api_key: 'E8Uh5l5fHZ6gD8U3KycjAIAk46f68Zw7C6eW8WSjZvCLXebZ7p0r1yrYDrLilk2F' //就是这儿！！！之前用的是public key！！！！！！
              }),
              json: true
            }))
          } catch (e) {
            logger.error('Error when create comment:' + JSON.stringify(e.error))
            ctx.body = e.error
            return
          }
          ctx.body = result
          logger.info('Create comment successfully with response code: ' + result.code)
        })

关于这个问题，有可能是Disqus方面后期修改的，导致原始代码无法创建新评论。

最终改造

Fix之后，我还修改了一些前端Style：

最终的repo在这儿： https://github.com/szhielelp/disqus-proxy

这下终于可以让所有人在我博客评论了

参考文献

Disqus-Proxy 配置说明