When integrating Sleekplan Widget or Website into your system, you have two primary options for user authentication:
1. SSO (Single Sign-On): This method streamlines user access by allowing automatic identification without the need for users to sign in again. It's based on a security mechanism that enables Sleekplan to trust login requests received from your server. SSO utilizes JSON Web Token (JWT) technology for secure exchange of user authentication data, ensuring a seamless and secure experience for your end-users. It's important to note that SSO is available for both the website and widget, providing a unified authentication experience across platforms.
2. JavaScript SDK method setUser() without an SSO token: While not recommended for production environments due to security concerns, setUser() offers a convenient way to test the widget without configuring server-side SSO token generation. However, it lacks the robust security guarantees of SSO and should be used with caution. It's essential to remember that setUser() only works for the website and widget if they are on the same top-level domain. For instance, if the widget is installed on app.mydomain.com and the website runs on feedback.mydomain.com, setUser() will function properly.
Setup SSO
The Single Sign-On is based on a security mechanism that allows Sleekplan to trust the login requests received from your server. Sleekplan only grants access to users who have been authenticated by you. Sleekplan-SSO uses JSON Web Token (JWT), a technology for the secure exchange of user authentication data. Additionally, SSO facilitates the passing of metadata, allowing for later segmentation of users based on key-value pairs.
Here’s how to set it up in just three steps:
1. Get your SSO Secret Key
To initiate the SSO setup, you’ll need your SSO Secret Key. You can locate this key by navigating to Settings > Developer within your Sleekplan dashboard. Copy your SSO Key from there.
2. Generate a Token on Your Server
Next, on your server-side, you need to generate a JSON Web Token (JWT) using the HS256 algorithm. Pass your SSO Secret Key as a Key parameter while creating the JWT. For detailed instructions, refer to our developer documentation for assistance.
3. Set the Token on Page Load
In the provided code snippet, replace the example token (XXXXX) within the window.SLEEK_USER object with your generated token variable. Ensure this token is set on page load to facilitate seamless authentication.
<!-- User Token -->
<script type="text/javascript">
window.SLEEK_USER = {
token: 'XXXXXXX'
}
</script>
<!-- Sleekplan Widget Code -->
<script type="text/javascript">window.$sleek=[];window.SLEEK_PRODUCT_ID=XY;(function(){d=document;s=d.createElement("script");...</script>
Setting Up setUser()
While setUser() provides a convenient method for testing the widget without configuring server-side SSO token generation, it’s not recommended for production environments due to security concerns. However, if you choose to use setUser(), ensure the following settings:
Your board must be public.
Disable 'Registration requires email verification' and 'Sign in requires email confirmation' settings.
Place the following code snippet AFTER your Sleekplan JavaScript SDK code:
$sleek.setUser ({
mail: 'user@mail.com',
id: '1398',
name: 'username',
img: 'https://mysaasapp.com/image/user/1398.jpg',
weight: 4
});
Remember, setUser() lacks the security guarantees of SSO and could potentially pose risks in production environments. Exercise caution while utilizing this method.
By following these steps, you can seamlessly integrate Sleekplan Widget or Website with Single Sign-On, ensuring both user convenience, data security, and enabling future segmentation based on metadata. For further assistance or detailed instructions, consult our developer documentation.