Skip to main content

Single Sign-On

Single Sign-On allows your users to comment using the account on your site.

To enable Singe Sign-On, you will have to add some custom code on both back-end and front-end parts of your site.

You will need to use JSON Web Token to exchange the user data with SlickComment.

User SSO ID#

Before you start, it's important to understand the concept of User SSO ID.

Each user in your system probably already have an ID. But when SlickComment receives the user data, it creates a new ID for each new user.

Now, when you manage comments/users from SlickComment Console, you probably want to know the ID of a user in your system, to do so, you must provide the user ID for us, and that is called SSO ID.

Think of it as a shared user ID between 2 systems.

You can use the real user ID in your system as SSO ID.

Or if you don't want to expose the real user ID, create another ID (maybe name it scSsoId to be clear) and provide us that.

Back-end#

Get the SSO secret from SlickComment Console before starting.

In your back-end, create a new endpoint that returns the JWT of a logged-in user.

The JWT payload should have similar structure like this:

{   "userData": {     "ssoId": 1, // required, integers will be converted to string     "name": "John Doe", // optional     "email": "[email protected]", // optional but if not provided, the user will not get email notifications for new replies or votes     "avatarUrl": "https://example.com/avatar.jpg", // optional     "profileUrl": "https://example.com/users/1" // optional   },   "iat": 1619437044, // timestamp when the token is created   "exp": 1619437644 // timestamp when the token expires}

Here is a sample code in Nodejs that creates an endpoint /sso

const express = require('express');const jwt = require('jsonwebtoken');const app = express();
app.get('/sso', (req, res) => {    const user = getLoggedInUser();
    if (!user) { // user is not logged in        res.send(null);    }
    const timestampNow = Math.round(Date.now() / 1000);    const expirationTimestamp = timestampNow + (3600); // expires in an hour        const payload = {       userData: {         ssoId: 1,         name: user.getName(),         email: user.getEmail(),         avatarUrl: user.getAvatarUrl(),       },       iat: timestampNow,       exp: expirationTimestamp,    };        const secret = 'this-is-your-secret-from-the-dashboard';    const token = jwt.sign(payload, secret, { algorithm: 'HS256'});
    res.send(token);});

Front-end#

In the configuration, set userSsoId and a function getUserSsoToken.

If userSsoId has a non-empty value, getUserSsoToken will be called.

userSsoId is also used as a cache key to prevent too many calls to your /sso endpoint, so make sure to set it correctly!

When the user is not logged in, don't set userSsoId or set it to a falsy value or empty string.

window.SlickComment.renderDiscussion({    // ...other config options    userSsoId: "Replace with the user's SSO UI",    getUserSsoToken: function() {         return fetch('/sso') // this endpoint was created in the above step            .then((res) => {                if (res.ok) {                    return res.text();                }                                throw new Error('Could not fetch SSO Token.');              })            .catch((err) => {                // let the user know that something is wrong            });    },});

Login button#

When an unauthenticated user tries to write a comment, a warning message will be displayed

No login button

To make it easier for the user to login, you can implement function handleBtnLoginClick

const slickcomment_config = {    // ...other options    handleBtnLoginClick: function() {        // you might want to open a modal or redirect the user to the login page        // after the user is logged in, the page must be reloaded    },};

Then the login button will appear

Lo button

Comments