Iframe Setup Guide

This page shows details about how to setup and use the Arkose Labs Fraud and Abuse Prevention Platform (Arkose Labs Platform) in the context of an iframe.

 

Please note that Arkose Labs Platform can host the domain/iframe for use by a customer. Please contact your TAM or SE for additional information.

 

Creating the Iframe Page and Domain

When using this solution a separate domain must be set up and a page with the Arkose Labs Platform code hosted from it.

Creating the Domain

Create and host the domain using your standard process. An example domain name is https://iframe-auth.arkoselabs.com.

Creating the Hosted Page

The following is example code that could be used to load the Arkose Labs Platform iframe. Please see our Standard Setup for more information on the Arkose Labs Platform implementation.

Please note that some accessibility tools (Eg. Windows narrator) will use the words in the titlesection as spoken text for this iframe. Update the title to comply with your branding strategy.

 
html>
<head>
  <meta charset="utf-8">
  <title>Arkose Labs Authentication</title>
  <script type="text/javascript" src="https://api.arkoselabs.com/fc/api/?onload=loadArkose" async defer></script>
  <script>

  function getAllUrlParams(url) {
    var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
    var obj = {};

    if (queryString) {
      queryString = queryString.split('#')[0];
      var arr = queryString.split('&');

      for (var i = 0; i < arr.length; i++) {
        var a = arr[i].split('=');
        var paramName = a[0];
        var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];

        paramName = paramName.toLowerCase();
        if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();
        
        if (paramName.match(/\[(\d+)?\]$/)) {

          var key = paramName.replace(/\[(\d+)?\]/, '');
          if (!obj[key]) obj[key] = [];

          if (paramName.match(/\[\d+\]$/)) {
            var index = /\[(\d+)\]/.exec(paramName)[1];
            obj[key][index] = paramValue;
          } else {
            obj[key].push(paramValue);
          }
        } else {
          if (!obj[paramName]) {
            obj[paramName] = paramValue;
          } else if (obj[paramName] && typeof obj[paramName] === 'string'){
            obj[paramName] = [obj[paramName]];
            obj[paramName].push(paramValue);
          } else {
            obj[paramName].push(paramValue);
          }
        }
      }
    }
    return obj;
  }

  function loadArkose(){
    var params = getAllUrlParams(window.location.href);

    var pathArray = window.location.pathname.split('/');
    // instantiating an ArkoseEnforcement class with public_key and other configurations and callback functions
    var arkose = new ArkoseEnforcement({
            public_key: pathArray[1],
            language: params.mkt,
            target_html: "arkose",
            callback: function() {
              parent.postMessage(JSON.stringify({
                  eventId: "challenge-complete",
                  payload: {
                    sessionToken: arkose.getSessionToken()
                  }
              }), "*")
            },
            loaded_callback: function() {
              frameHeight = document.getElementById("fc-iframe-wrap").offsetHeight;
              frameWidth = document.getElementById("fc-iframe-wrap").offsetWidth;
              parent.postMessage(JSON.stringify({
                  eventId: "challenge-loaded",
                  payload: {
                    sessionToken: arkose.getSessionToken(),
                    frameHeight: frameHeight,
                    frameWidth: frameWidth
                  }
              }), "*")
            },
            onsuppress: function() {
              parent.postMessage(JSON.stringify({
                  eventId: "challenge-suppressed",
                  payload: {
                    sessionToken: arkose.getSessionToken()
                  }
              }), "*")
            },
            onshown: function() {
              parent.postMessage(JSON.stringify({
                  eventId: "challenge-shown",
                  payload: {
                    sessionToken: arkose.getSessionToken()
                  }
              }), "*" );
            }
        });
  };

  // Let this function run on a set interval. It will review the Arkose Content that loads and send the page sizing for the iframe to the parent
    var interval = setInterval(function() {
    frameHeight = document.getElementById("fc-iframe-wrap").offsetHeight;
    frameWidth = document.getElementById("fc-iframe-wrap").offsetWidth;
    parent.postMessage(JSON.stringify({
      eventId: "challenge-iframeSize",
      payload: {
        frameHeight: frameHeight,
        frameWidth: frameWidth
      }
    }), "*")
  }, 3000);

  </script>
</head>
<body style="margin: 0px">
  <div id="arkose">
  </div>
</body>
</html>

Please note the following regarding the sample code above:

  • getAllUrlParams - This is a reference function for parsing url parameters if you need to pass any important information through the iframe. An example of important information is language code. See bottom of page for more information about URL parameters.

  • parent.postMessage - This is used to pass event data back to the parent domain. For example, passing back the session token to submit to the server-side.

  • fchallenge-iframeSize - This runs on an interval for dynamic resizing the iframe on the parent element. This data can also be parsed and passed through as part of the Arkose Labs Platform loaded event.

How to Use the iframe

The code below shows a full example of how to load the hosted Arkose Labs Platform iframe. This sample references the sample code above.

 
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Identity Page</title>
  <style>
  iframe {
    width: 0px;
    height: 0px;
    border: 0!important;
    overflow-y: hidden;
  }
  </style>
  <script>
    window.addEventListener("message", function(event) {
    var json_parsed_event = JSON.parse(event.data)

    switch (json_parsed_event.eventId) {
      case "challenge-loaded" :
      document.getElementById("arkoseFrame").style.height = json_parsed_event.payload.frameHeight;
      document.getElementById("arkoseFrame").style.width = json_parsed_event.payload.frameWidth;
      break;
      case "challenge-suppressed" :
      break;
      case "challenge-complete" :
      alert(json_parsed_event.payload.sessionToken)
      break;
      case "challenge-shown" :
      console.log("Challenge Shown");
      console.log(json_parsed_event.payload);
      break;
      case "challenge-iframeSize" :
      document.getElementById("arkoseFrame").style.height = json_parsed_event.payload.frameHeight;
      document.getElementById("arkoseFrame").style.width = json_parsed_event.payload.frameWidth;
      break;
     }
  });
  </script>
</head>
<body>
    <iframe id="arkoseFrame" src="https://iframe-auth.arkoselabs.com/11111111-1111-1111-1111-111111111111/index.html">
    </iframe>
</body>
</html>

Iframe Events

The iframe events are listed below:

Method Type Description
challenge-loaded event Challenge has finished loading
challenge-suppressed event Challenge will not be presented to the user (Good User Case)
challenge-complete event Challenge solved / user is validated as good
challenge-shown event Challenge is presented to the user.
challenge-iframesize event Height and Width of the content within the iframe (For Dynamic Styling)


URL Reference

Here is a breakdown of the URL which needs to be loaded into the iframe.

Domain: https://iframe-auth.arkoselabs.com

URL Path Options:

  • public key: In the case of the example this is 11111111-1111-1111-1111-111111111111. Replace this with the private key given to you by Arkose Labs.

URL Params:

  • mkt: This is the parameter for passing in a language code. For a list of our supported language codes see Supported Languages.

 

Please note that Arkose Labs can host the iframe for merchants.

 

Was this article helpful?
0 out of 0 found this helpful