Single Page Web Application Guide

Overview

You can use a JavaScript library load for the Arkose Labs Fraud Detection and Prevention Platform (Arkose Labs Platform) on a single page web application. The single web page application could use multiple technologies, such as React or Angular.

API Request Authentication

Arkose Labs authenticates your API requests using a private/public key pair that can be retrieved from the Site Settings page of the Arkose Labs Client Dashboard. If you do not have access to the dashboard or do not have your private and public keys, contact your Sales Rep or Sales Engineer.

The private key is needed to authenticate when using the verify API. This private key must not be published on a client facing website, and must only be used on your server-side implementation on the Arkose Labs verify API.

Single Web Application Code Sample

The main item to note when coding for a single web page application is to ensure that the Arkose library is loaded and unloaded when moving between pages. The library must be loaded once and cleaned up appropriately.

The example below shows how to add and remove the library:

let Arkose;

function setupEnforcement(enforcement) {
  console.error(enforcement);
  Arkose = enforcement;
}
window.setupEnforcement = setupEnforcement;

let arkoseLoaded = false;
function onSubmit(e) {
  e.preventDefault();
  console.error('submitting');

  Arkose.setConfig({
    onCompleted: function(t) {
      console.log(t.token);
    },
    onReady: function() {
      console.error('ready');

      arkoseLoaded = true;
      Arkose.run();
    }
  });

  console.error(arkoseLoaded);
  arkoseLoaded && Arkose.run()
}

function createArkoseScript() {
  const script = document.createElement('script');
  script.type ='text/javascript';
  script.src = 'https://client-api.arkoselabs.com/v2/<INSERT PUBLIC KEY>/api.js';
  script.setAttribute('data-callback', 'setupEnforcement'); 
  script.async = true; 
  script.defer = true; 
  script.id = 'arkosescript'; 

  document.head.append(script);
}

window.addEventListener('load', () => {
  console.error('loaded');

  createArkoseScript();

  const form = document.querySelector('form');
  form.addEventListener('submit', onSubmit);

  document.getElementById('simulate').addEventListener('click', (e) => {
    e.preventDefault();
    document.querySelector('#arkosescript').remove();
    createArkoseScript();
  });
});
Was this article helpful?
0 out of 0 found this helpful