Single Sign-On (SSO) is a convenient way to authenticate users across multiple applications or platforms. In most SSO implementations, a server generates a secure SSO key, which is then used for authentication. However, there are situations where a lighter and quicker approach can be employed, especially if security is not a primary concern. In this article, we'll explore a method to use the Sleekplan widget with SSO without generating the SSO key on the server. Instead, we'll create an SSO key on the client side. It's important to note that this approach may not be the most secure way to implement SSO, but it can be useful for specific use cases where security is not a top priority.
# The Browser-Based SSO Key
To create an SSO key on the client side, we'll leverage JavaScript and some basic cryptography techniques. Our approach involves generating a JSON Web Token (JWT), which can be used as the SSO key.
Here's a code example that demonstrates how to create a JWT SSO token in the client-side JavaScript:
<head>
<!-- Include the CryptoJS library for cryptographic operations -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>
<body>
<script>
// Base64 URL encoding function
function base64url(source) {
encodedSource = CryptoJS.enc.Base64.stringify(source);
encodedSource = encodedSource.replace(/=+$/, '');
encodedSource = encodedSource.replace(/\+/g, '-');
encodedSource = encodedSource.replace(/\//g, '_');
return encodedSource;
}
// Create JWT SSO token
function createJWT(header, data, secret = undefined) {
let stringifiedHeader = CryptoJS.enc.Utf8.parse(JSON.stringify(header));
let encodedHeader = base64url(stringifiedHeader);
let stringifiedData = CryptoJS.enc.Utf8.parse(JSON.stringify(data));
let encodedData = base64url(stringifiedData);
let token = encodedHeader + "." + encodedData;
if (!secret) return token;
let signature = CryptoJS.HmacSHA256(token, secret);
signature = base64url(signature);
return encodedHeader + "." + encodedData + "." + signature;
}
// Set JWT header
const header = {
"alg": "HS256",
"typ": "JWT"
};
// Set JWT data (user data)
const data = {
"mail": "john@example.com",
"id": "213123",
"name": "John Doe"
};
// Set SSO private key (you can replace this with your own secret)
const secret = "YOUR_PRIVATE_SSO_KEY";
// Create the SSO token
const token = createJWT(header, data, secret);
// Set SSO token BEFORE loading the Sleekplan SDK to skip unnecessary ping-pong requests
window.SLEEK_USER = {
token: token,
}
// Load the Sleekplan SDK
window.$sleek=[];
window.SLEEK_PRODUCT_ID=000001;
(function(){
d=document;s=d.createElement("script");
s.src="https://client.sleekplan.com/sdk/e.js";
s.async=1;
d.getElementsByTagName("head")[0].appendChild(s);
})();
</script>
</body>
</html>```
In this code, we first include the CryptoJS library for cryptographic operations. Then, we define functions to perform base64 URL encoding and create a JWT SSO token. The createJWT function constructs the token using the specified header and user data. You should replace the secret with your own private key.
This code sets the SSO token in the window.SLEEK_USER object before loading the Sleekplan SDK, ensuring that the token is available for authentication when the SDK initializes.
When implementing this method, remember to:
- Replace the __SLEEK_PRODUCT_ID__ with the correct Product ID for your Sleekplan workspace.
- Replace the __secret__ with your own private key. Do not use the example secret provided in the code.
## A Note on Security
It's important to emphasize that this approach may not be the most secure way to implement SSO. Generating the SSO key on the client side means that the secret key is exposed to potential security risks. If security is a top priority, it's recommended to stick with server-based SSO key generation, which can provide better protection for sensitive keys.
However, in cases where speed and simplicity are more important than security concerns, this browser-based method can be a quick and convenient way to enable SSO with the Sleekplan widget. Just be aware of the security trade-offs and use it judiciously according to your specific needs.
Remember to adjust the code to your specific use case and replace the example secret with a more secure implementation. Always prioritize security when dealing with sensitive user data.