Advanced Features

Using Multiple Integrated Services to Protect Your API

Although previous examples all focus on a single web protection service, the endpoints support the addition of parameters from multiple web protections in a single request. In this case, valid Approov tokens are only provided if the web protection checks pass for all parameters. An Approov.fetchToken call that uses all the supported web protection services is provided below as an example:

// Import the Approov web SDK
import { Approov, ApproovError, ApproovFetchError, ApproovServiceError,
  ApproovSessionError } from '/approov.js'

// Initialize Approov session, Fingerprint, hCaptcha and reCAPTCHA
// ...

// Get web protection service results
const hcapToken = hcaptcha.getResponse()
const recapToken = grecaptcha.getResponse()
const fpGetResult = await fpPromise.then(fp => fp.get())
fpPromise
  .then(fp => fp.get())
  .then(fpGetResult => Approov.fetchToken('your-Approov-protected-API-domain',
    {
      fingerprintIDResult: fpGetResult,
      hcaptchaToken: hcapToken,
      recaptchaToken: recapToken
    }))
  .then(approovToken => {
    // Perform the web API call adding the Approov token
  })
  .catch(err => {
    // Handle Approov session expiry and any other errors
  })

Web Protection Token Binding

Approov Token Binding provides a mechanism for linking an Approov token with other properties that will be sent to you backend API, such as an User Authentication token. It is important not to use frequently changing data for binding as changing it invalidates all currently cached Approov tokens. The data is supplied to the Approov SDK as an Uint8Array. The SDK takes the array and calculates its SHA256 hash. This ensures that no Personal Identifiable Information (PII) can accidentally make it into the Approov service. The hash is then provided inside the Approov token in the pay claim as a base64 encoded string. Existing backend Approov integrations for the mobile channel support this mechanism already. See the section on Token Binding for the mobile channel for further background.

The following snippet shows how to modify an Approov.fetchToken call to use some provided data as a payload argument:

// Import the Approov web SDK
import { Approov, ApproovError, ApproovFetchError, ApproovServiceError,
  ApproovSessionError } from '/approov.js'

// Initialize Approov session. Set up Fingerprint, hCaptcha or reCAPTCHA as
// required.
// ...

// Encode the data as Uint8Array
const payload = new TextEncoder().encode(data)
Approov.fetchToken('your-Approov-protected-API-domain', {payload: payload}))
  .then(approovToken => {
    // Perform the API call adding the Approov token
  })
  .catch(err => {
    // Handle Approov session expiry and any other errors
  })