DryMerge embedding works by creating an iframe that loads our site. You can then pass in a session token to the iframe to log in your users.

Creating a Tenant Session Endpoint

To embed DryMerge, you’ll need to create a tenant session endpoint on your backend. This endpoint will create a DryMerge session token for your current user. You can then use this token to authenticate your user into our iframe.

Although it might seem like you could do this on your frontend, that would mean your DryMerge API key would be publicly exposed. Proxying with your backend is the most secure method here.

All your endpoint needs to do is to return a string obtained from the DryMerge CLI’s tenant_session command. Assuming you initialized your client, here’s what the business logic for your endpoint might look like:

from drymerge import DryClient
def tenant_session_endpoint(request):
   # Do your own authentication here
   client = DryClient(api_key = "my_api_key")
   return client.tenant_session("my_tenant_id")

 

The tenant id you use to create the session is linked to all the workflows you’ve instantiated with the same tenant id via the SDK. This means that if you’ve set up (for example) a multi-tenant webhook for one of your users, they’ll be able to see it and authenticate to all the OAuth connections involved in it with that session.

Creating an IFrame and Authenticating

You can create an iframe with one of two sources: https://drymerge.com/user/dash or https://drymerge.com/user/auth. The first will render the user’s workflows and oauth connections while the second one will render the user’s oauth connections. You’ll then send a postMessage to the iframe with the session token obtained from your backend. Here’s an example of how you might do that:

// index.html
<html>
    <head>
        <title>DryMerge Embed</title>
    </head>
    <body>
        <iframe id="drymerge-iframe"
                src="https://drymerge.com/user/dash"
                width="100%"
                height="500px">
        </iframe>
        <script src="app.js"></script>
    </body>
</html>
// app.js
document.addEventListener('DOMContentLoaded', function() {
    const iframe = document.getElementById('drymerge-iframe');
    fetchTokenAndPostMessage(iframe);
});

function fetchTokenAndPostMessage(iframe) {
    fetch('/your-api/tenant-session-endpoint')
        .then(response => response.json())
        .then(data => {
            iframe.onload = function() {
                iframe.contentWindow.postMessage({ accessToken: data.token }, 'https://drymerge.com');
            };
        })
        .catch(error => console.error('Error fetching token:', error));
}