How to add Blog Comments Single Sign-On (SSO)

You can add Single Sign-On to your blog or website in two ways, but only the authn token way is currently supported (the last one in the list):

1. Via OpenID Connect (OIDC), but this is not yet supported together with embedded comments. Instead:
2. By embedding user information (username, user id, email address) in something called an authentication token in the HTML pages in your blog.

Not now, but later, you'll be able to combined those ways to login, with other ways to log in as well — maybe you want SSO for people in your own organization, and also want to let external users add comments using their private Gmail addresses or something.

Blog comments SSO via OIDC

Not yet supported.

Blog comments SSO via Authentication Token

You'll need to write some source code (!). Here's one of Talkyard's automatic tests that you can look at — it does the same things as the instructions below:

• embcom.sso.token-direct-w-logout-url.2br.

You'll also need to already have configured SSO for the Talkyard site when it is accessed directly (not in an embedded comments <iframe>), see: Talkyard Single Sign-On API

The instructions:

1. You'll need a PASETO token library. Pick one that suits you, here: https://paseto.io, depending on which programming language your website uses.
   (Talkyard uses JPaseto, and also, for automatic tests, paseto.js. If your website is in PHP, then there's this library for you: paragonie/paseto which you'll also find in the list over at paseto.io.)

2. As admin, go to Settings | Features in the Admin Area (/-/admin/settings/features).

3. Tick the Enable API checkbox, and save.

4. Go to Settings | Signup and Login (/-/admin/settings/login).

5. Scroll down below the Your custom Single Sign-On (SSO) header. Type a Single Sign-On URL
   — so Talkyard knows where to send your users, when they click Log In from inside Talkyard.

6. Carefully read the instructions, and tick the Enable Single Sign-On checkbox.

7. Scroll down to the Embedded Comments SSO Token Secret setting. Click the Generate new button.

8. Copy the generated secret. It looks like so: hex:123abcdef... and is a symmetric encryption key. Don't share it with anyone — it is secret.

9. On your server, generate JSON for the user, should look like this: (here in Javascript, so simpler to read)

   const authnMessage = {
     exp: '2021-07-01T00:00:00+00:00',  // when the authn token expires, you can
                                         // set it to maybe half an hour into the future
     data: {
       user: {
         ssoId: 'the-visitors-unique-id-in-your-website',
         username: 'his_her_username_in_your_website',
         fullName: 'His or her Full Name',
         primaryEmailAddress: 'his-or-her-email-address@x.co',   // <— email addr
         isEmailAddressVerified: true,
       }
     }
   }
   

   Note that you must have verified that the email address above, is really the person's own email address.

10. Encrypt that JSON in a PASETO v2.local token, using the secret you generated earlier. Here you need to write some code. For example, in Javascript:

    // Just once somewhere in your server code:
    // pasetoV2LocalSecret should be the secret you generated earlier — it starts with 'hex:' which we need to remove.
    const pasetoV2LocalSecretNoHexPrefix = pasetoV2LocalSecret.replace(/^hex:/, '');
    sharedSecretKeyBytes = Buffer.from(pasetoV2LocalSecretNoHexPrefix, 'hex');
    
    // Then, when generating a HTML page with comments:
    const messageAsString = JSON.stringify(authnMessage);
    const sharedSecretKey  = new Paseto.SymmetricKey(new Paseto.V2());
    const token = await sharedSecretKey.inject(sharedSecretKeyBytes).then(() => {
      const encoder = sharedSecretKey.protocol();
      return encoder.encrypt(messageAsString, sharedSecretKey);
    }).then(token => {
      console.log(`Generated PASETO token:  ${token}`);
      // E.g. "v2.local.kBENRnu2p2.....JKJZB9Lw"
      return 'paseto:' + token;
    });;
    

11. Include that PASETO token, prefixed with paseto:, in the blog posts (or website pages) so Talkyard sees it:

    <script>
    talkyardAuthnToken = 'paseto:v2.local.112233AABBCC......`;
    talkyardServerUrl =  ....
    </script>
    

    You'll need to generate different HTML for different logged in users — so they'll get their own token, and get logged in to Talkyard as themselves.

Finally, reload a blog post with comments, and you should be automatically logged in, in the comments section (if you were logged in at your blog / website already).