Skip to content

Examples

Note: Working examples for all QR Code scenarios are included in the SampleApplication directory of the Web library package. See Sample Application for setup instructions.

Basic Setup

This example will:

  • Display a QR code with default settings
  • Show standard scan/expired messages in the iframe
<div id="deviceassure-qr-container"></div>

<script src="/path/to/dv.min.js" onload="setupQR()" defer></script>
<script>
  function setupQR() {
    DeviceAssure.qr({
      containerId: 'deviceassure-qr-container',
      licence: '<LICENCE_KEY>'
    });
  }
</script>

With Callback

This example will:

  • Display a 300px QR code
  • Hide the iframe after scan (json: true)
  • Call the callback function with the scan result
  • Display the result on the page
<div id="deviceassure-qr-container"></div>
<div id="result"></div>

<script src="/path/to/dv.min.js" onload="setupQR()" defer></script>
<script>
  function setupQR() {
    DeviceAssure.qr({
      containerId: 'deviceassure-qr-container',
      licence: '<LICENCE_KEY>',
      callback: function(result) {
        var deviceAssure = result.data.deviceAssure;
        document.getElementById('result').innerHTML =
          deviceAssure.result + ': ' + deviceAssure.reason;
      },
      size: 300,
      json: true
    });
  }
</script>

Device Redirect

This example will:

  • Display a QR code on the host page
  • Redirect the scanning device to a results page after scan
  • Pass the scan result as a base64-encoded response query parameter
  • The redirect page parses and displays the result

Host Page

<div id="deviceassure-qr-container"></div>

<script src="/path/to/dv.min.js" onload="setupQR()" defer></script>
<script>
  function setupQR() {
    DeviceAssure.qr({
      containerId: 'deviceassure-qr-container',
      licence: '<LICENCE_KEY>',
      deviceRedirect: 'https://example.com/device-result'
    });
  }
</script>

Redirect Page (device-result)

<div id="result"></div>

<script src="/path/to/dv.min.js" onload="showResult()" defer></script>
<script>
  function showResult() {
    // Parse the response query parameter as a JSON object
    const result = DeviceAssure.parseQrRedirect(null, { json: true });
    document.getElementById('result').innerHTML = JSON.stringify(result, null, 2);
  }
</script>

Tip: If you prefer not to include the DeviceAssure library on the redirect page, you can decode the response manually:

var urlParams = new URLSearchParams(window.location.search);
var encodedData = urlParams.get('response');
document.getElementById('result').innerHTML = atob(encodedData);

Host Redirect

This example will:

  • Display a QR code on the host page
  • Redirect the host page (desktop) to a results page after scan
  • Pass the scan result as a base64-encoded response query parameter
  • The redirect page parses and displays the result
<div id="deviceassure-qr-container"></div>

<script src="/path/to/dv.min.js" onload="setupQR()" defer></script>
<script>
  function setupQR() {
    DeviceAssure.qr({
      containerId: 'deviceassure-qr-container',
      licence: '<LICENCE_KEY>',
      redirect: 'https://example.com/host-result'
    });
  }
</script>

Note: The redirect page handling is the same as Device Redirect.

Auto-Refresh

This example will:

  • Display a QR code on the host page
  • Show a custom "Device verified!" message after scan
  • Wait 2000ms then automatically generate a new QR code
  • Call the callback function with each scan result
<div id="deviceassure-qr-container"></div>

<script src="/path/to/dv.min.js" onload="setupQR()" defer></script>
<script>
  function setupQR() {
    DeviceAssure.qr({
      containerId: 'deviceassure-qr-container',
      licence: '<LICENCE_KEY>',
      callback: function(result) {
        console.log('Scan result:', result);
      },
      lifecycle: 'auto-refresh',
      responseDelay: 2000,
      scannedMessage: 'Device verified!'
    });
  }
</script>

IMEI Corroboration

The imei parameter can be added to the QR code generation to use the IMEI as an additional identifier for device verification.

Note: This feature requires a licence with IMEI enabled. Contact support@deviceassure.com for details.

<div id="deviceassure-qr-container"></div>

<script src="/path/to/dv.min.js" onload="setupQR()" defer></script>
<script>
  function setupQR() {
    DeviceAssure.qr({
      containerId: 'deviceassure-qr-container',
      licence: '<LICENCE_KEY>',
      imei: '123456789012345',
      callback: function(result) {
        console.log('QR message:', result);
      }
    });
  }
</script>

Custom Tags

Custom tags can be added to the QR code request. Tags are returned in the API response and can be used to identify or categorise requests.

<div id="deviceassure-qr-container"></div>

<script src="/path/to/dv.min.js" onload="setupQR()" defer></script>
<script>
  function setupQR() {
    DeviceAssure.qr({
      containerId: 'deviceassure-qr-container',
      licence: '<LICENCE_KEY>',
      callback: function(result) {
        console.log('QR message:', result);
      },
      tags: [
        { key: 'page', value: 'imei-validation' },
        { key: 'campaign', value: 'spring-sale' }
      ]
    });
  }
</script>

Custom Destination

The destination parameter controls where the QR code points to. This is useful when you want to point to a custom page rather than the default DeviceAssure page. The custom page must collect the device payload and send it to the DeviceAssure API.

This can be used in conjunction with redirect and deviceRedirect to control the full flow.

Note: The deviceRedirect implementation will need to be handled in the custom destination page. The message returned to the page will contain the redirect URL for use.

Host Page

<div id="deviceassure-qr-container"></div>

<script src="/path/to/dv.min.js" onload="setupQR()" defer></script>
<script>
  function setupQR() {
    DeviceAssure.qr({
      containerId: 'deviceassure-qr-container',
      licence: '<LICENCE_KEY>',
      destination: 'https://example.com/custom-destination',
      callback: function(result) {
        console.log('QR message:', result);
      }
    });
  }
</script>

Destination Page Implementation

The destination page collects the device payload using DeviceAssure.load() in Server to Server mode, extracts the QR code ID from the URL, and sends the payload to the DeviceAssure QR API.

When the QR code is scanned, the scanning device navigates to the destination URL with a deviceatlas-qr-code query parameter appended:

https://example.com/custom-destination?deviceatlas-qr-code=bd3f41f0-ace0-4c77-ae33-da195f2675ff

<script src="/path/to/dv.min.js" onload="sendApiRequest()" defer></script>
<script>
  function sendApiRequest() {
    DeviceAssure.load({
      serverToServer: true,
      onError: function(error) {
        console.error('DeviceAssure Library failed to collect:', error);
      },
      onSuccess: async function(payload) {
        try {
          const qrCodeId = new URLSearchParams(window.location.search)
            .get('deviceatlas-qr-code');

          const response = await fetch(
            'https://qr-code.deviceatlas.com/v2/api/check',
            {
              method: 'POST',
              body: JSON.stringify(payload),
              headers: {
                'Content-Type': 'application/json',
                'X-Device-Assure-Reference-Id': qrCodeId
              }
            }
          );

          if (response.status >= 400) {
            console.error('Non 200 response from DeviceAssure', await response.json());
          } else {
            console.log('Successfully sent payload to DeviceAssure', await response.json());
          }
        } catch (e) {
          console.error('An error occurred calling DeviceAssure', e);
        }
      }
    });
  }
</script>

See Also