---
title: "Fastly Compute@Edge"
toc:
  enable: true
---

# Integrate using Fastly Compute@Edge (Older SDK)

This guide describes how to use Fastly Compute@Edge services to integrate Fraud Prevention into your web app. For more information about Fastly Compute@Edge, see [Fastly's documentation](https://developer.fastly.com/learning/compute).

{% admonition type="warning" name="Note" %}
This guide describes integrating using the older Fraud Prevention SDK. The new [Platform SDK](/sdk-ref/platform/introduction.md) offers all the same functionality and more. While the older SDK is still supported for existing integrations, new features will only be supported by the Platform SDK. <br><br> [Return to the Platform SDK guide](/guides/risk/quick_start_fastly.md)

{% /admonition %}

## Prerequites

Make sure you have completed the Fastly setup, including creating a Fastly account, installing Fastly CLI with the JS toolchain and dependencies, and generating an API token for running CLI.

## Step 1: Get client credentials

To integrate with Mosaic, you'll need to obtain your client credentials from the [Admin Portal](https://portal.transmitsecurity.io/). From **Risk** > **Settings**, you can obtain your client ID and client secret. These will be used to identify your app and authorize requests to Mosaic.

## Step 2: Configure project

Start by setting up a new Compute@Edge project for Fraud Prevention integration. If you already have an existing Compute@Edge JS-based project and want to use it, you can skip this step.

1. With Fastly CLI, run the following command to initialize a project:

```shell
fastly compute init
```
2. Provide details about your project including its name and description, and choose a language (JavaScript).

## Step 3: Customize JavaScript

In your local development environment, locate `src/index.js`&mdash;it contains the logic for handling requests. To enable integration with Mosaic, add the code that initializes Fraud Prevention SDK, collects events, and feeds them to Mosaic.

Add the sample code below to the `index.js` file. You'll need to replace `[CLIENT_ID]` with the ID you've acquired in [step 1](#step-1-get-client-credentials) and `[ORIGIN_SERVER]` with your application domain in order to be able to get a response from your app. To set the user for all subsequent events in the browser session, replace the `[USER_ID]` with the actual user ID.

{% admonition type="info" name="Notes" %}
- The sample below is used to obtain recommendations for login actions, but you can adjust the script to report other sensitive actions, such as `register`, `transaction`, `password_reset`, `logout`, `checkout`, `account_details_change`, `account_details_view`, `account_auth_change`, `withdraw`, and `credits_change`.

- Make sure to pass the received `actionToken` to your backend along with the actual action invocation to ensure you can leverage the recommendation in the next step.

{% /admonition %}

```js
import { ReadableStream, WritableStream } from 'streams';
import { httpRequest } from 'http-request';
import { createResponse } from 'create-response';
import { TextEncoderStream, TextDecoderStream } from 'text-encode-transform';

class HTMLStream {
  constructor () {
    let readController = null;
    const drsLoginHandlerStr = `
          <script src="https://cdn.riskid.security/sdk/web_sdk_latest.js" defer="true"/></script>
          <script>
           console.log("Setting up event listener for Fraud Prevention");
             // Initialize the Fraud Prevention SDK
             document.addEventListener("TSAccountProtectionReady", function(e) {
                 window.myTSAccountProtection = new TSAccountProtection("[CLIENT_ID]");
                 // Set the user for all subsequent events in the browser session
                 window.myTSAccountProtection.init("[USER_ID]"); // If user ID exists
             });

            // Trigger events for the login button and get the actionToken
            document.getElementById("login_button").addEventListener('click', async function(e) {
                const actionResponse = await window.myTSAccountProtection.triggerActionEvent("login");
                const actionToken = actionResponse.actionToken;
                console.log("actionToken = " + actionToken);
             });

            // Clear the set user after the user logs out or the user session expires
            async function onUserLogout(event) {
             await window.myTSAccountProtection.clearUser()
            }
            let button = document.getElementById("logout");
            if (button) {
             button.addEventListener('click', onUserLogout);
            }
          </script>
          </head>
    `;
    const headTag = '</head>';
    this.readable = new ReadableStream({
      start (controller) {
        readController = controller;
      }
    });

    // This function injects the code into the page
    async function handleTemplate (text) {
      const startIndex = text.indexOf(headTag);
      if (startIndex != -1 ) {
        text = text.replace(headTag, drsLoginHandlerStr);
      }
      readController.enqueue(text);
    }
    let completeProcessing = Promise.resolve();
    this.writable = new WritableStream({
      write (text) {
        completeProcessing = handleTemplate(text, 0);
      },
      close (controller) {
        completeProcessing.then(() => readController.close());
      }
    });
  }
}

export function responseProvider (request) {
    // Get the actual response from the origin server
    return httpRequest("[ORIGIN_SERVER]").then(response => {
      return createResponse(
        response.status,
        getSafeResponseHeaders(response.getHeaders()),
        response.body.pipeThrough(new TextDecoderStream()).pipeThrough(new HTMLStream()).pipeThrough(new TextEncoderStream())
      );
    });
}

function getSafeResponseHeaders(headers) {
    for (let unsafeResponseHeader of UNSAFE_RESPONSE_HEADERS) {
      if (unsafeResponseHeader in headers) {
        delete headers[unsafeResponseHeader]
      }
    }
    return headers;
}
```

## Step 4: Build and deploy project

Prepare your Compute@Edge project for running on Fastly. To do it, compile it into a WebAssembly module and publish it.

1. Compile the package by running the following command:

```shell
fastly compute build
```

2. Deploy the Compute@Edge package to Fastly by running the following command:

```shell
fastly compute deploy
```

## Step 5: Fetch recommendation

You can fetch recommendations for the reported action using the [Recommendation API](/openapi/risk/recommendations.openapi/other/getriskrecommendation).

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:

```js
  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 3.

```js
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 5: Report recommendation outcome

Mosaic leverages advanced machine learning models and heuristics to make sure you're getting the best recommendations at all times. To allow us to fine-tune your recommendation models, we need insights on the results of challenges you've performed based on our recommendation. This should be provided by sending a backend API request once the challenge is completed (either successfully or with a failure).

{% admonition type="info" name="Details Coming Soon" %}

{% /admonition %}
-->