Embed Integration Center

This guide will show you how to embed the integration center into your solution.

To integrate the Integration Center into your application, FlowMate provides a Web Component that can be embedded anywhere you need.

To get started, follow these steps:

• Generate and pass a User Token to authenticate users.

• Embed the Web Component into your application.

• Whitelist your Domain with FlowMate

Create and authenticate user

POST /user

When integrating FlowMate, each user from your system must first be created within FlowMate. This happens automatically the first time you call the corresponding endpoint. The user will be created with the User ID you provide, and all future authentication requests for this user must use the same identifier.

To ensure consistency, we recommend using a hash of an identifier from your own system. This way, you can reliably generate the same ID on each request.

Once the user exists in FlowMate, you need to authenticate them. This requires generating a User Token, which is done using your Admin Token. Since the Admin Token is highly sensitive, this step must always be handled server-side to prevent exposure.

To generate a User Token, make a POST request to:

https://api.platform.openintegrationhub.com/impersonate

The request body should include:

• The User ID, ensuring the correct user is authenticated.

• The authentication credentials, allowing the user to be automatically authenticated with the API.

Here, you can find the supported authentication types and the required values for each:

API Key

• key

• headerName (optional)

Basic Auth

oAuth 2.0

Session Auth

Request Body:

{
  "username": "1234abc",
  "credential": {
    "key": TOKEN
  }
}

You will receive a token in the response, which you can then pass to the web component. This token expires every 3 hours.

Response:

{
  "token": "f9MPJQz6aRfQH4qVnkzUFbU3-4n-BAjiBXQKmED4_e15KK745Heq9KY2M7XknbGi-zO3XHF--OnbZUyqTHEO-qwXwzFX8K-isRZ2lclMzXDZiD_2DahQ1rfynbZHfn_VFi8VfHda5FiLfhcmxa20WL2TcPq82_lpgKN0nSTwCD4",
  "id": "62460554305401543e4e60c1"
}

Pass additional parameters

Additionally, you can pass optional parameters to customize the user’s experience or set specific permissions:

Request Body:

{
  "username": "1234abc",
  "credential": {
    "key": TOKEN,
    "additionalParameters": {
      "parameter": 12345cdef
    }
  }
}

Embed Web Component

Next, Integrate the Web Component into your page to provide users with access to the Integration Center. When embedding the component, you can define Groups and Languages to customize the user experience.

• Groups: Groups define user permissions. Each integration can be assigned to a specific group, ensuring that only users belonging to that group can view and use the integration.

• Language: The Integration Center supports multiple languages. You can pass the appropriate language code for each user to display the interface in their preferred language. (Currently supported: german (de), english (en))

Include the web component script in your page:

<script src="https://integration-center.cloud-ecosystem.workers.dev/build/integration-center.js"></script>

and then load the component as with any HTML tag, and pass the user token as a parameter in the component.

<div class="content-icenter"><integration-center token="{$userToken}" groups="dev,test" language="de"></integration-center></div>

We also strongly recommend the use of groups for testing new integrations. For example, use a group “QA” and transfer it to FlowMate. You must then also give the user this group in your app.

Add Connector to Account & Whitelist your Domain

Finally, you need to link your Connector to your account and whitelist your domain to ensure proper access and security.

Add connector to account:

In the FlowMate platform, navigate to Settings > Profile and select your connector under "Default Connector".

Whitelist domain:

To embed the Integration Center securely, you must whitelist your domain with FlowMate. Navigate to Settings > Domains in the FlowMate platform and add your domains to the whitelist.