What is a JWT Token, and Why is it Used in viaSocket Embed?
A JWT (JSON Web Token) is a compact, URL-safe means of representing claims between two parties. It is used for securely transmitting information between the frontend and backend, especially in scenarios where authentication and data integrity are crucial.
In the context of viaSocket Embed, the JWT token serves a critical purpose:
Authentication: The token ensures that the communication between your application and viaSocket’s services is authenticated, verifying that the user and the project are valid.
Security: The JWT token is encrypted using HS256, ensuring that sensitive data is transmitted securely and cannot be tampered with during transit.
How to Generate a JWT Token for viaSocket Embed?
To ensure secure and authenticated communication in the viaSocket Embed, you need to generate a JWT token with the appropriate details and encryption. Here’s a step-by-step guide to generate the token:
1. Obtain the Required Information:
org_id: Your organization’s unique identifier.
user_id: The unique identifier for the user (usually an email or username).
project_id: The unique identifier for the project or application within viaSocket.
access_key: A secret key provided by viaSocket for encrypting the token.
You’ll receive these details when you create your viaSocket embed configuration.
2. Create the JSON Payload:
The payload is the body of the JWT token, containing the claims (data you want to securely transmit). A simple JSON structure might look like this:
{
"org_id": "8069",
"project_id": "projmdFTEvPR",
"user_id": "unique_user_id"
}
3. Generate the JWT Token Using the Access Key:
The token needs to be signed using the HS256 encryption algorithm with your access_key. This ensures that only you can create valid tokens for your embed.
Example Code (for Reference):
const express = require('express');
const jwt = require('jsonwebtoken');
const cors = require('cors');
const app = express();
// Secret key used to sign the JWT
const accessKey = '*****************';
// Sample route to generate and return a JWT token to viaSocket embed
app.get('/token', (req, res) => {
const payload = {
"org_id": "6147",
"project_id": "projR9DhphnR",
"user_id": "unique_user_id"
};
// Generate the token
const token = jwt.sign(payload, accessKey);
// Send the token as the response
res.json({ token });
});
// Start the server
const port = 3000;
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
4. Embed the JWT Token in the viaSocket Embed Script Tag:
Once the token is generated, you need to pass it to the viaSocket embed script tag to authenticate the embed session.
The token is passed in the embedToken parameter of the script tag:
<button id="viasocket-embed-open-button" onclick="openViasocket()" > Open Integrations </button>
<script id="viasocket-embed-main-script" src="https://embed.viasocket.com/prod-embedcomponent.js"
embedToken="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwcm9qZWN0X2lkIjoicHJvam1kRlRFdlBSIiwib3JnX2lkIjoiODA2OSIsInVzZXJfaWQiOiJwZUhRYyIsImlhdCI6MTc1Mzc2NjA2Nn0.oY1Juziz3u8c0Pbk1XalftacDnklK7jtvWhDv3pCREI"></script>
Replace embedTOKEN with the actual JWT token generated from the previous step.
Example code :
async function loadViasocketScript() {
const token = await fetchToken();
const script = document.createElement('script');
script.id = 'viasocket-embed-main-script';
script.src = 'https://embed.viasocket.com/prod-embedcomponent.js';
script.setAttribute('embedToken', token);
document.body.appendChild(script);
}
5. Secure Data Flow and Authentication:
Once the token is embedded, viaSocket uses it to authenticate the communication and securely load the requested embed component. This ensures that each user has a unique, secure flow, and the data is isolated for each user, preventing unauthorized access.
Additional Tips :
📌Keep Access Key Secure: The access key used for signing the JWT token should be kept private and secure. Do not expose it in client-side code.
