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.

1. Passing data to Locoia

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
}

JWT payload explained:

• 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

2. Creating JWT

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

# 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

node.js

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.

3. Creating the white label iframe within your app

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>