Integrate using Cloudflare Workers (Older SDK)

This guide describes how to use Cloudflare Workers to integrate Detection and Response services into your web app. For more information about Cloudflare Workers, see Cloudflare's documentation.

Prerequisites

Your web application must be integrated with Cloudflare Workers.

Step 1: Get client credentials

To integrate with Mosaic, you'll need to obtain your client credentials from the Admin Portal. From Risk > Settings, you can obtain your client ID and client secret. These will be used to identify your app and generate authorization for requests to Mosaic.

Step 2: Load SDK via Cloudflare Worker

Load and initialize the Detection and Response SDK using CloudFlare Workers:

1. Log in to your Cloudflare dashboard and go to Workers .
2. Create or update an existing Worker, and make sure the Worker's routes are defined for all the relevant application pages (see Routes for information about adding routes to Cloudflare Workers).
3. To load and initialize the SDK, on the Worker page click Quick edit and add the code below to the Javascript code pane on the left. The [CLIENT_ID] is your client ID from step 1.

const tsAccountProtectionSDK = `
<script src="https://cdn.riskid.security/sdk/web_sdk_latest.js" defer="true"/></script>
<script>
console.log("Setting up event listener for TSAccountProtection");
document.addEventListener("TSAccountProtectionReady", function(e) {
      console.log("TSAccountProtection ready");
      window.myTSAccountProtection = new myTSAccountProtection("[CLIENT_ID]");
      window.myTSAccountProtection.init();
});
</script>
`;
async function handleRequest(request) {
      const originalResponse = await fetch(request);
      let response = new Response(originalResponse.body, {
          status: originalResponse.status,
          headers: originalResponse.headers,
      });
      // Change response body by adding TSAccountProtection SDK and Login Handler
      const originalBody = await originalResponse.text();
      var body = originalBody.replace(/<\/head>/g, tsAccountProtectionSDK);
      response = new Response(body, response);
      return response;
}
addEventListener('fetch', event => {
      event.respondWith(handleRequest(event.request));
});

Step 3: Set user

A user identifier must be reported to Mosaic after you've fully authenticated the user (including, for example, any required 2FA that was done). This will set the user for all subsequent events in the browser session.

To do this, add the JS code below after your application has authenticated a user to your Worker (or after SDK initialization if you already have the user context of the authenticated user when loading the page). The [USER_ID] is an opaque identifier for the user in your system.

myTSAccountProtection.setAuthenticatedUser('[USER_ID]');

Step 4: Report actions via Cloudflare

To obtain risk recommendations for sensitive actions, your application should report these actions using the Detection and Response SDK. To do this, you need to add an event listener to the relevant form or button on your webpage, and add the code below to your Worker. The [ACTION_TYPE] can be login, register, transaction, password_reset, logout, checkout, account_details_change, account_auth_change, withdraw or credits_change.

const tsAccountProtectionLoginHandler = `
<script>
 function onSubmitLogin(event) {
   event.preventDefault();
   window.myTSAccountProtection.triggerActionEvent("[ACTION_TYPE]").then((value) => {
     form.submit();
   }).catch((value) => {
     form.submit();
   });
 }
 let form = document.getElementById("login");
 if (form) {
   form.addEventListener('submit', onSubmitLogin);
 }
</script>
`;

Step 5: Fetch recommendation

You can fetch recommendations for the reported action using the Recommendation API.

These APIs are authorized using an OAuth access token so you'll need to fetch a token using your client credentials (from step 1). The token should target the following resource: https://risk.identity.security. To do this, send the following request:

  const { access_token } = await fetch(
    `https://api.transmitsecurity.io/oidc/token`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
      body: new URLSearchParams({
        grant_type: client_credentials,
        client_id: [CLIENT_ID],
        client_secret: [CLIENT_SECRET],
        resource: 'https://risk.identity.security'
      })
    }
  );

From your backend, invoke the Recommendation API by sending a request like the one below. The [ACCESS_TOKEN] is the authorization token you obtained using your client credentials and [ACTION_TOKEN] is the actionToken received from the SDK in step 4.

const query = new URLSearchParams({
  action_token: '[ACTION_TOKEN]',
}).toString();

const resp = await fetch(
  `https://api.transmitsecurity.io/risk/v1/recommendation?${query}`,
  {
    method: 'GET',
    headers: {
      Authorization: 'Bearer [ACCESS_TOKEN]',
    },
  }
);

Step 6: Clear user

After the user logs out or the user session expires, you should clear the set user so they are not associated with future actions. To clear the user with Cloudflare Workers, you need to add an event listener to the relevant logout button on your webpage, and add the code below to your Worker:

const tsClearUserHandler = `
<script>
 function onUserLogout(event) {
   window.myTSAccountProtection.clearUser()
 }
 let button = document.getElementById("logout");
 if (button) {
   button.addEventListener('click', onUserLogout);
 }
</script>
`;