JsConnect v2 Embedded Comments - HL Vanilla Community
<main> <article class="userContent"> <h2 data-id="embedding-with-seamless-jsconnect">Embedding with seamless JsConnect</h2><p>Our technical overview explains 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.</p><p><strong>🛑 IMPORTANT</strong>: <strong>Attempting embedded SSO across two domains will not work in the Mobile Safari browser (and therefore, on all Apple devices).</strong></p><p>To solve this, your Vanilla community must be hosted on a subdomain of your main site. For example, if your site is <code class="code codeInline" spellcheck="false" tabindex="0">url.com</code>, you could put your community on <code class="code codeInline" spellcheck="false" tabindex="0">forum.url.com</code>, and then embed it from there. This sidesteps Mobile Safari’s issue, and potentially increases your search engine value as well. </p><p>You can change your community to a subdomain of your site in the Dashboard by following the instructions on the <strong>Settings > Appearance > Custom Domain</strong> page.</p><p>Now, on to revising your embed code with some additional SSO information.</p><h2 data-id="vanilla-embed-code">Vanilla embed code</h2><p>Consider the embed code for Vanilla comments:</p><pre class="code codeBlock" spellcheck="false" tabindex="0"><script type="text/javascript"> /*** Required Settings: Edit BEFORE pasting into your web page ***/ var vanilla_forum_url = 'http://forum.example.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 **var vanilla_sso = 'SSO STRING'; // Your SSO string.** /*** 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> </pre><p>If you declare <code class="code codeInline" spellcheck="false" tabindex="0">vanilla_sso</code> and give it the proper value, then Vanilla will be able to sign in your user. To generate your SSO string:</p><ol><li>Start with the signed in user. This has the same fields as the user from the seamless setup.</li><li>Add your client_id to the user so Vanilla will know how to identify you.</li><li>JSON encode the user.</li><li>Base64 encode the user in UTF-8. This is your signature string.</li><li>Sign the signature string with your signature and the current timestamp using HMAC SHA1. Confirm the signature string is hex encoded.<ol><li><code class="code codeInline" spellcheck="false" tabindex="0">signature = hmacsha1(signature_string + " " + timestamp, secret);</code></li></ol></li><li>Build your final sso string:</li></ol><pre class="code codeBlock" spellcheck="false" tabindex="0">vanilla_sso = signature_string + " " + signature + " " + timestamp + " hmacsha1" </pre><p>That’s it! The value of <code class="code codeInline" spellcheck="false" tabindex="0">vanilla_sso</code> from above is what you put in your embed code. Since this needs to be dynamically generated by your site, you cannot use SSO on a static page.</p><h2 data-id="considerations">Considerations</h2><ul><li>The above example is for blog comments. For a full community embed, use the code provided under “Forum Embed” in the Dashboard.</li><li>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.</li><li>The timestamp is a UNIX timestamp. That means it will be an integer representing the number of seconds since 1 January 1970. Most languages have a way of getting this timestamp.</li><li>On your endpoint, make sure you're sending the correct document headers when serving JavaScript ( <code class="code codeInline" spellcheck="false" tabindex="0">Content-Type: application/javascript; charset=utf-8</code> ) or do not include <code class="code codeInline" spellcheck="false" tabindex="0">X-Content-Type-Options: nosniff</code> . This will cause browsers to refuse to render the JavaScript and break the SSO workflow. The most recent versions of our client libraries serve the correct document headers (for more explanation see<a href="https://success.vanillaforums.com/kb/articles/167-jsconnect-and-response-headers" rel="nofollow noreferrer ugc"> JsConnect Response Headers</a>).</li></ul> </article> </main>