Make Bridge API method (preferred)

The Make Bridge API implementation method offers you two options to integrate Bridge into your product using the Make Bridge API as the integration interface.

To complete the integration, you will need your Make Bridge secret key and secret ID that you saved when you prepared your Make account.

Make Bridge uses JWT for authentication and authorization. You will add your secret to a JWT token that is necessary for all communication with Make Bridge API.

Option 1: Integration with a pre-built component

In order to shorten the time to integration, we created a pre-built, front-end component and back-end implementation example.

The front-end component can be embedded in your application to provide a basic user experience, while the back-end example ensures secure communication with the Make Bridge API.

Front-end component and example

portal-integrations.js - This is the main component that can be included anywhere in your own application HTML. The component is downloaded from Make Bridge servers directly.
index.html - Example code showing how to incorporate portal-integrations.js in your HTML code.

While it's possible to implement only the front-end code, we strongly recommend using the back-end integration for secure communication with Make Bridge to prevent potential misuse by end users.

Back-end example

index.ts - Example integration using Node.js and a proxy pattern that works directly with the portal-integrations.js component.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Integrator Demo</title>
        <link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
        <!-- content security policy needs to be present and needs to be based on your url and your Make zone url address -->
        <meta
            http-equiv="Content-Security-Policy"
            content="default-src 'self' localhost:3000 https://eu1.make.com https://eu2.make.com https://us1.make.com https://us2.make.com; script-src 'self' https://unpkg.com https://eu1.make.com https://eu2.make.com https://us1.make.com https://us2.make.com; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; font-src 'self' https://cdnjs.cloudflare.com;"
        />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
    </head>
    <body>
        <div style="max-width: 1000px; display: flex; justify-content: center; align-items: center; margin: auto;">
            <!-- use your own backend API address with /proxy -->
            <portal-integrations urlOrPrefix="http://localhost:3000/proxy">
            </portal-integrations>
        </div>
        <!-- this downloads the portal-integrations component -->
        <script type="module" src="https://eu1.make.com/portal/static/js/portal-integrations.js"></script>
    </body>
</html>

// This is a simple example of a Node.js proxy server that forwards requests to the Make Bridge API.
const express = require('express');
const proxy = require('express-http-proxy');
const jwt = require('jsonwebtoken');
const crypto = require('crypto');

/** 
 * Configuration values - use our own
 * On production, these values should be provided in a secure manner such as via environment variables
 */
const SECRET_KEY = '04XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
const KEY_ID = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX';
const ZONE_URL = 'https://eu2.make.com/';

const app = express();

/** 
 * Replace with the authenticated user's email or user ID.
 * You can use anything that is unique to the user and can be used to identify the user on both the Make and your system's side.
 */
const userId = '[email protected]';

/**
 * A single middleware that handles:
 *   - Authorization check (via 'filter')
 *   - JWT generation (via 'proxyReqOptDecorator')
 *   - Request forwarding
 */
app.use(
  '/proxy',
  proxy(ZONE_URL, {
    filter: (req, res) => {
      if (!userId) {
        res.status(401).json({ error: 'Unauthorized' });
        return false;
      }
      return true;
    },
    proxyReqPathResolver: (req) => {
      // Strip out "/proxy" from the path before forwarding to {ZONE}/portal/api/bridge/
      return '/portal' + req.originalUrl.replace(/^\/proxy/, '');
    },
    proxyReqOptDecorator: (proxyReqOpts, srcReq) => {

      // Generate a fresh JWT for each request
      const token = jwt.sign(
        {
          sub: userId,
          jti: crypto.randomUUID(),
        },
        SECRET_KEY,
        {
          expiresIn: '2m',
          keyid: KEY_ID,
        }
      );

      // Attach the JWT to the Authorization header
      proxyReqOpts.headers['Authorization'] = `Bearer ${token}`;

      return proxyReqOpts;
    },
  })
);

/**
 * Start the server on port 3000 (or any port you prefer).
 */
app.listen(3000, () => {
  console.log('Server is listening on port 3000.');

});

Option 2: Direct integration with the Make Bridge API

This option uses direct integration with the Make Bridge API and gives you a lot of style and logic customizations. The Make Bridge API can be found at the following address:

YOUR_MAKE_ZONE_URL(eu1.make.com)/portal/api/bridge/

Example of the direct Make Bridge API implementation:

const jwt = require('jsonwebtoken');
const crypto = require('crypto');

/** 
 * Configuration values - use our own
 * On production, these values should be provided in a secure manner such as via environment variables
 */
const SECRET_KEY = '04XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
const KEY_ID = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX';
const ZONE_URL = 'https://eu2.make.com/';

// Bridge API lives on ZONE_URL/portal/ address
const BRIDGE_API_URL = ZONE_URL + '/portal/';

/** 
 * Replace with the authenticated user's email or user ID.
 * You can use anything that is unique to the user and can be used to identify the user on both the Make and your system's side.
 */
const userId = '[email protected]';

/**
 * Generates a short-lived JWT for authenticating with the Make API.
 * 
 * @param {string} userId - User ID or email address to be used as the subject (sub) claim in the JWT.
 * @returns {string} A signed JWT string.
 */
function generateMakeApiJwt(userId) {
  return jwt.sign(
    {
      sub: userId,
      jti: crypto.randomUUID(),
    },
    SECRET_KEY,
    {
      expiresIn: '2m',
      keyid: KEY_ID,
    }
  );
}

/**
 * Calls the Make Bridge Portal API /portal/api/bridge/integrations endpoint using a signed JWT.
 */
async function listIntegrations() {
  const token = generateMakeApiJwt(userId);
  const url = `${BRIDGE_API_URL}/api/bridge/integrations`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  const data = await response.json();
  return data;
}

// Example usage
listIntegrations().then((data) => {
  // Use the data as needed
  console.log('Integrations:', data);
}).catch((error) => {
  console.error('Error fetching integrations:', error);
});

Security Considerations

Always use HTTPS for all communications between your frontend, backend, and Make Bridge.
Store your Make Bridge secret securely on your backend and never expose it to the frontend unless used for testing purposes.
Implement proper authentication and authorization mechanisms in your backend to ensure only authorized users can access Make Bridge functionalities.

After completing the integration, thoroughly test all functionalities. If you encounter any issues or have questions during the beta testing phase, please contact us directly.

PreviousIntegrate Make Bridge NextMake API method (advanced)

Last updated 1 month ago