Embedded SSO with jsConnect - HL Vanilla Community
<main> <article class="userContent"> <p>The <strong>jsConnect </strong>addon has a special way of supporting SSO for embedded sites. For it to work, you'll need to pass a specially formatted SSO string to your embed. </p><ul><li>This article focuses on how to seamlessly log in users to Vanilla communities embedded in iFrames. </li><li>For all other SSO using jsConnect, see <a href="https://success.vanillaforums.com/kb/articles/211-implementing-the-jsconnect-version-3-protocol" rel="nofollow noreferrer ugc">this article</a>.</li></ul><h2 data-id="what-you'll-need">What you'll need</h2><ul><li>A jsConnect connection on your community. Make a note of your <strong>secret </strong>because you'll need this to format your SSO string.</li><li>To generate your SSO string on your server. This will be done on the page where you embed Vanilla.</li><li>Your server will also have to know the current user. You'll need information such as the user's<strong> ID</strong>, <strong>username</strong>, and <strong>email</strong>.</li><li>A community or comment embed code, which you can get in the Dashboard, on the <strong>Settings > Technical > Embedding</strong> page.</li></ul><h2 data-id="generate-your-sso-string">Generate your SSO string</h2><p>You must generate your SSO string on the server, even though you'll be generating a client-side SSO string. Here's an example in PHP:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">$user = [ 'client_id' => 'Your jsConnect Client ID', 'uniqueid' => '', 'name' => 'Name', 'email' => 'Email', 'photourl' => 'Photo', 'roles' => 'Roles', ]; $string = base64_encode(json_encode($user)); $timestamp = time(); $hash = hash_hmac('sha1', "$string $timestamp", $secret); $sso_string "{$string} {$hash} {$timestamp} hmacsha1"; </pre><p>Add this string to your output page inside a script tag like this:</p><pre class="code codeBlock" spellcheck="false" tabindex="0"><script> vanilla_sso = "<?php echo $sso_string; ?>"; </script> </pre><p>Below this script tag, insert your embed code, which will read the <code class="code codeInline" spellcheck="false" tabindex="0">vanilla_sso</code> variable and use it to sign your user in.</p><h2 data-id="troubleshooting">Troubleshooting</h2><p>For jsConnect version 3 only. </p><p>In your Vanilla Dashboard, in the jsConnect addon, click <strong>Test</strong>. On the Test page, you will find a sample jsConnect sso_string for the user that you're logged in as. You can compare it to the one you have generated or you can <strong>temporarily</strong> paste it manually into the page that you're using to embed the community. <strong>TEMPORARILY</strong> because anyone who visits that page will be logged in as you. Please exercise caution.</p><h3 data-id="potential-issues">Potential issues</h3><p>Here are some issues you may run into when trying to get embedded SSO working:</p><ol><li>Do NOT output an SSO string if there isn't a user signed in on your site.</li><li>When using embedded SSO, users will not receive a welcome email. This is to provide as seamless an experience as possible. We assume your site has already welcomed the user and they shouldn't think they are signing up to another site.</li></ol> </article> </main>