Parse.com Javascript SDK + Disqus SSO Integration

Universal code:


function enableDisqus(config, sso_config) { 
  console.log("is disqus already loaded: " + enableDisqus.loaded);
  if (enableDisqus.loaded) {
    DISQUS.reset({
      reload: true,
      config: function () {  
        this.page.identifier = config.identifier;
        this.page.url        = config.url;
        this.page.title      = config.title;
      }
    });
    console.log('disqus reset', config.identifier, config.url);
  } else {
    console.log('disqus not loaded');
    var body = "var disqus_shortname  = \"" + config.shortname  + "\";\n" + 
               "var disqus_title      = \"" + config.title      + "\";\n" + 
               "var disqus_identifier = \"" + config.identifier + "\";\n" +
               "var disqus_url        = \"" + config.url        + "\";\n";
    if (config.developer) {
      body +=  "var disqus_developer  = 1;\n"
    }

    appendScriptTagWithBody(body);
 
    (function() {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
 
    if (sso_config) {
      var remote_auth_s3 = sso_config.message + " " + sso_config.sig + " " + sso_config.timestamp;
      var body = "var disqus_config = function() {\n" + 
                 "  this.page.remote_auth_s3 = \"" + remote_auth_s3     + "\";\n" + 
                 "  this.page.api_key        = \"" + sso_config.api_key + "\";\n" + 
                 "  this.sso = {\n" + 
                  "  name:   'SampleNews',\n" +
                  "  button:  'http://example.com/images/logo.png',\n" +
                  "  icon:     'http://example.com/images/favicon-96x96.png',\n" +
                  "  url:        'http://example.com/signin',\n" +
                  "  logout:  'http://example.com/logout',\n" +
                  "  width:   '800',\n" +
                  "  height:  '400'\n" +
                 "  };\n" +
                 "};\n"
      appendScriptTagWithBody(body)
    }
 
    enableDisqus.loaded = true;
  }
}

function appendScriptTagWithBody(body) {
  var dso   = document.createElement("script");
  dso.type  = "text/javascript";
  dso.async = true;
  dso.text  = body;
  console.log(body);
  document.getElementsByTagName('body')[0].appendChild(dso);
}

When your page content changes and you need to load new comments:

        //load the comments
        if (isLoggedIn()) {
          //prepare SSO
          var disqusData = {
            id: Parse.User.current().getSessionToken(),
            username: Parse.User.current().getUsername(),
            email: Parse.User.current().getEmail()
          };

          var disqusStr = JSON.stringify(disqusData);
          var disqussso_timestamp = Math.round(+new Date() / 1000);
          var disqussso_message = Base64.encode(disqusStr);
          var disqussso_result = CryptoJS.HmacSHA1(disqussso_message + " " + disqussso_timestamp, "your disqus api");
          var disqussso_hexsig = CryptoJS.enc.Hex.stringify(disqussso_result);
        }

        enableDisqus(
          { 
            shortname:  "your_shortname",
            title:      "your product name",
            identifier: 'your-' + productId,
            url:        "product page url"
          },
          {
            api_key: "your_disqus_api_key",
            message:   disqussso_message, 
            sig:       disqussso_hexsig, 
            timestamp: disqussso_timestamp
          }
        );

Dependancies:

  • http://code.google.com/p/crypto-js
  • http://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64-in-javascript

Did you find this post useful?

Tip me some bitcoin:

How to get free SSL for your Parse.com hosted app

This tutorial assumes you are using Parse.com hosting (yourapp.parseapp.com) and have applied a custom domain name (yourapp.com) upon which SSL will be used.

  1. Visit startssl.com and signup for a free SSL certificate, save the ssl.key and ssl.cert files when prompted
  2. Visit Settings > Hosting page in your Parse.com dashboard
  3. Upload the file ssl.cert into the SSL Public Certificate field
  4. Go back to startssl.com > Toolbox > Decrypt Private Key, save decrypted file as privatekey.pem
  5. Upload privatekey.pem to Parse.com in the SSL Private Key field