Embedded

Embedding with Seamless jsConnect

Part 1 of this documentation told you how to set up jsConnect SSO for site-wide SSO. However, if you have Vanilla embedded in a page you’ll notice that the SSO doesn’t automatically sign you in even if users are signed in to the containing page. In order to make the sign in seamless you need to add some SSO information to your embed code.

First, we’ll address another important issue: Mobile Safari. Attempting embedded SSO across two domains will not work in this browser (and therefore, on all Apple devices).

To solve this, your forum must be hosted on a subdomain of your main site. For example, if your site is url.com, you could put your forum on forum.url.com, and then embed it from there. This sidesteps Mobile Safari’s issue, and potentially increases your search engine value as well. Our clients can change their forum to a subdomain of their site by going to “Customize Domain” in their Dashboard and following the instructions there.

Now, on to revising your embed code with some additional SSO information.

Vanilla Embed Code

Consider the embed code for Vanilla comments:

<script type="text/javascript>

/*** Required Settings: Edit BEFORE pasting into your web page ***/

var vanilla_forum_url = 'http://your.url.com/'; // The full http url &amp; path to your vanilla forum
var vanilla_identifier = 'your-content-identifier'; // Your unique identifier for the content being commented on
<strong>var vanilla_sso = 'SSO STRING'; // Your SSO string.</strong>

/*** DON'T EDIT BELOW THIS LINE ***/

(function() {
var vanilla = document.createElement('script');
vanilla.type = 'text/javascript';
var timestamp = new Date().getTime();
vanilla.src = vanilla_forum_url + '/js/embed.js';

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(vanilla);
})();

</script>

If you declare vanilla_sso and give it the proper value then Vanilla will be able to sign in your user. Here is what you need to do to generate your SSO string:

  1. Start with the signed in user. This has the same fields as the user from the site-wide sso.
  2. Add your client_id to the user so Vanilla will know how to identify you.
  3. JSON encode the user.
  4. Base64 encode the user in UTF-8. This is your signature string.
  5. Sign the signature string with your signature and the current timestamp using HMAC SHA1. Confirm the signature string is hex encoded.

    signature = hmacsha1(signature_string + " " + timestamp, secret);
    

  6. Build your final sso string:

    vanilla_sso = signature_string + " " + signature + " " + timestamp + " hmacsha1"
    

That’s it! The value of vanilla_sso from above is what you put in your embed code. Since this needs to be dynamically generated by your site you can’t use SSO on a static page.

Gotchas

  • The above example is for blog comments. For a full forum embed, use the code provided under “Forum Embed” in the Dashboard.
  • Even though your signature string is base64 encoded make sure the actual signature is hex encoded. The correct string will be 40 characters consisting of the numbers 0-9 and a-f.
  • The timestamp is a unix timestamp. That means it will be an integer and represents the number of seconds since 1 January 1970. Most languages have a way of getting this timestamp.
 

Cloud Hosting

We believe that online communities should be intuitive, engaging and true to your brand. Vanilla allows you to create a customized community that rewards positive participation, automatically curates content and lets members drive moderation.

Learn More …