1.1 Embed Integration via SSO
SSO integration for SaaS companies
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.
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
Code examples in Python and node.js to convert the payload with JWT and a secret to the jwtToken:
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 the menu at Settings > Embedding you can find the iframe code, which looks similar and 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>
To change the language, you can adjust the query string parameter lang=de (German) to `en for English.
If there are multiple groups and Flows in an Embed Configuration, they are always collapsed and users can expand or activate them.
If there's only one group in an Embed configuration, the group is expanded by default and if that group has only one Flow, it's already on the first step of the activation process when the Embed is opened.
Last modified 6mo ago