Comment on page
2.1 Embed Integration via SSO
How to setup the white label integration portal for SaaS companies with SSO
How to setup white label integrations as a SaaS company + SSO
The below steps explain how you can integrate the Embed (integration white label portal) into your own SaaS application.
In order to ensure that only your app can show the iframe and to connect your users' identity with the integrations (Flows) they might add you have to create a JWT which has to be dynamically passed. You can see a detailed setup guide below.
SSO means single sign-on. This method allows SaaS company's end customers to enable integrations using Locoia without needing to log in - the most native way possible.
SSO with a JWT claim, as per the payload-example below:
{
"embed_user_id": "1234567890",
"embed_user_name": "John Doe",
"embed_account_id": "2345678545678",
"embed_account_name": "ABC Ltd.",
"embed_state": {
"your_custom_field": "your_custom_value",
"your_custom_field_2": "your_custom_value_2"
},
"client_authentication": {
"auth_type": "username_password",
"connector_id": "proprietary_connector_id",
"name": "connector_auth_name",
"auth_token": "",
"auth_details": "",
"api_endpoint": "",
"refresh_token": "",
"user_input": {},
"password": "end_user_password",
"username": "end_user_username"
},
"iat": 1516239022,
"exp": 1516539022
}
- embed_user_id: id of the end-user - required
- embed_user_name: name (first and last) of the end-user - optional
- embed_account_id: your account id of your end-customer - required
- embed_account_name: your account name of your end-customer - optional
- embed_state: A string or dictionary to pass all kinds of values that you want to be accessible by the created embed flow - optional
- client_authentication: A dictionary with the connector auth details for the proprietary connector specified in the embed. You can find more details here - optional
- exp: expiry time stamp in epoch seconds - required
- iat: issued timestamp in epoch seconds - required
Here are code examples in Python and node.js to convert the payload with JWT and a secret to the jwtToken. You can find a secret in Embed details.
Python
node.js
# Preparing the JWT based on a payload and secret.
import jwt
import time
secret = "secret can be found in your Locoia account upon creation of embed"
epoch_time = int(time.time())
# epoch time plus 1 hour
payload = {
"embed_user_id": "1234567890",
"embed_user_name": "John Doe",
"embed_account_id": "2345678545678",
"embed_account_name": "ABC Ltd.",
"iat": epoch_time,
"exp": epoch_time + 3600
}
jwtToken = jwt.encode(
payload,
secret,
algorithm="HS256",
headers={"alg": "HS256", "typ": "JWT"}
)
# Print jwtToken
print(jwtToken)
# Output: eyJhbGciOiJIUzI1Ni ... cPZg
import {SignJWT} from "jose";
const secret = 'secret can be found in your Locoia account upon creation of embed';
const payload = {
embed_user_id: '1234567890',
embed_user_name: 'John Doe',
embed_account_id: '2345678545678',
embed_account_name: 'ABC Ltd.'
};
const signJWT = new SignJWT(payload)
signJWT.setProtectedHeader({
alg: "HS256"
})
signJWT.setIssuedAt(Date.now())
signJWT.setExpirationTime(Date.now() + 3600)
const token = await signJWT.sign(new TextEncoder().encode(secret))
Similar examples can be found for other languages.
In Embed details you can also find the iframe code. Here you only need to replace the jwtToken with the token - as per the above creation example.
HTML
<iframe
id="embedded"
name="embedded"
src="https://api.locoia.com/embedded?embeddedId={UUID4 provided by the app}&token={jwtToken}&lang=de"
style="border-style: none; width: 100%; height: 1000px;"
>
</iframe>
Last modified 5d ago