Single Page Application Guide

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

 

The main item to note when coding for a single web page application is to ensure that the Arkose library is loaded and unloaded appropriately 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