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);
}

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
          }
        );

//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: