折腾 DISQUS 开源评论系统

Question

注册 disqus

首先需要你需要在 disqus 注册一个用户。你将使用这个用户登录 disqus 来管理你的网站。在 disqus 中注册你的网站时，需要为你的网站选择一个 shortname 来标识你的网站。disqus 会用这个 shortname 自动注册二级域名。

通用嵌入代码

首先，需要到 disqus 注册你的网站。 通过 Quickstart Guide 过去更多信息。 然后你需要知道注册时填写的 forum shortname。 disqus 嵌入 javasrcript代码如下：

<div></div>
<script>
  /**
   *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
   *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
   */
  /*
  var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
  };
  */
  (function() {  // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
    var d = document, s = d.createElement('script');

    s.src = '//EXAMPLE.disqus.com/embed.js';  // IMPORTANT: Replace EXAMPLE with your forum shortname!

    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
  })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

EXAMPLE 是注册到 disqus 的 shortname，告诉 disqus 这些评论属于哪个租户。

this.page.url 告诉 disqus 当前页面的 url。

this.page.identifier 告诉 disqus 当前页面的 id，这样如果 URL 改变 id 可以不变。这是一个可选变量，但建议用。如果不舍定这个变量，则会默认使用 page.url 当 identifier。

disqus 单点登录

使用外部系统的用户名口令登录 disqus 而不用注册 disqus 用户，前提是你已经有了一个用户库。如果你有多个网站，每个网站都要注册一个远程域。

你的网站需要增加一个 disqus 插件，资格也需要手工向 disqus 申请（发邮件？）。

插件工作原理：用户登录你的网站后，会根据用户凭据动态生成一个payload发给disqus。这样允许用户仅登录你的网站就能参与disqus讨论。

disqus SSO 会基于你的网站为你用户建立档案（profile）。猜测是 网站 id + 用户 id 之类的方法。这样做为了防止 SSO 用户与 disqus 已有用户的 id 冲突。

首先，需要你进入 SSO 页面去配置远程域。

要生成一个令牌传递给 disqus。令牌分三部分：消息、签名、时间戳，即：

this.page.remote_auth_s3 = '<message> <hmac> <timestamp>';

消息的构成：id、username、email 以及两个可选参数 avatar（用户头像 url）、url（用户个人网站 url）。id 要保证在 disqus 内的唯一性。 签名算法：HMAC->SHA1(secret_key, message + ' ' + timestamp)

增加自己的登录登出链接

例子：

var disqus_config = function () {
  // The generated payload which authenticates users with Disqus
  this.page.remote_auth_s3 = '<message> <hmac> <timestamp>';
  this.page.api_key = 'public_api_key';

// This adds the custom login/logout functionality
  this.sso = {
      name:   "SampleNews",
      button:  "http://example.com/images/samplenews.gif",
      icon:   "http://example.com/favicon.png",
      url:    "http://example.com/login/",
      logout:  "http://example.com/logout/",
      width:   "800",
      height:  "400"
  };
};

说明

• name — 你的网站名称。 We will display it in the Post As window.
• button — 按钮图片的地址。 Disqus 2012 users, see style guide below.
• icon — Address of the image that appears on the login modal's SSO tab. Favicons work well here. (Not required in Disqus 2012.)
• url — 你的登录页地址。这个页面将打开新窗口，这个页面必须在认证后自己关闭。 That's how we know when it is done and reload the page.
• logout — 你的登出页面。你的用户点登出按钮后被导向到页面。
• width — 登录窗口宽度，默认800。
• height — 登录窗口高度，默认400。 以上的所有URL都必须是绝对链接，因为它们将在disqus的iframe中加载。

创建自己的登录按钮

1. 下载 SSO login button style guide
2. 用你自己的 logo 覆盖 Replace this logo 层
3. 修改按钮颜色（Button 层）为符合你的品牌
4. 保持形状的边框在预设范围内，以便与其他图标匹配

如果你的登录窗口不能自动关闭，请使用 javascript 脚本自动关闭它。