Category: Parse.com

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

How to use Backgrid.js and the Parse.com Javascript SDK

Create a Backgrid populated with data from Parse.com and have it auto save back to Parse when a field is edited:

//load my Parse.com Class called "parts"
var Part = Parse.Object.extend("parts", {
  //save the data back to parse.com when it changes
  initialize: function() {
    Parse.Object.prototype.initialize.apply(this,arguments); this.on("change", function (model,options) {
     if (options && options.save === false) return;
     model.save()
    });
  }
});

var Parts = Parse.Collection.extend({
  model: Part
});

var columns = [{
    name: "id",
    label: "ID",
    editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
    cell: Backgrid.IntegerCell.extend({
      orderSeparator: ''
    })
}, {
    name: "name",
    label: "Name",
    cell: "string"
}, {
    name: "description",
    label: "description",
    cell: "string"
}];

var parts = new Parts();

// Initialize a new Grid instance
var grid = new Backgrid.Grid({
  columns: columns,
  collection: parts
});

// Render the grid and attach the root to your HTML document
$("#results-grid").append(grid.render().el);

// Fetch some countries from the url
parts.fetch({reset: true});