Getting Started

Use our provided javascript function in your own HTML website to easily verify the digital signatures emitted by Legitimate's NFC tags

PreviousWeb/HTML Implementation NextSimple HTML Example

Last updated 11 days ago

Was this helpful?

Getting Started

Use our provided javascript function in your own HTML website to easily verify the digital signatures emitted by Legitimate's NFC tags

For convenience, Legitimate provides a simple javascript implementation of the API verification mechanism required to validate the digital signatures emitted by NFC tags. You can see a full HTML example .

Add the JS snippet

To get started, simply add our minified javascript function to the top of your HTML <head> block. Make sure this is at the top of the <head> block as it is required to load first.

<head>
    <script type="text/javascript">
        (function(){var a=document.createElement('style');a.innerHTML=`
    body { display: none !important; }
  `;document.head.appendChild(a);var b='https://api.legitimate.tech/external/v1/tags/verify';document.addEventListener('DOMContentLoaded',()=>{console.log('DOM loaded, making API request');fetch(b,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(Object.fromEntries(new URLSearchParams(window.location.search)))}).then(async A=>{var _=await A.json();if(!A.ok){A.status===422&&_.errors.cmac.indexOf('has expired')!==-1?c('expired_cmac'):c();return}!_.errors?a.innerHTML=`
          body { display: block !important; }
          #legitimate-custom-error-message { display: none !important; }
          #legitimate-expired-cmac-message { display: none !important; }
        `:c()}).catch(()=>c())});function c(B='default'){let C=document.getElementById('legitimate-error-message-container');!C&&(console.log('Creating error message container'),C=document.createElement('div'),C.id='legitimate-error-message-container',document.body.appendChild(C));let _c=`
      <div style="font-family: sans-serif; color: red; padding: 2rem; text-align: center;">
        An error occurred. Please try again later.
      </div>
    `;if(B==='expired_cmac'){var d=document.getElementById('legitimate-expired-cmac-message');d&&(console.log('Using expired cmac error message'),_c=d.innerHTML)}else{var e=document.getElementById('legitimate-custom-error-message');e&&(console.log('Using custom error message'),_c=e.innerHTML)}C.innerHTML=_c;a.innerHTML=`
      body { display: block !important; }
      body > *:not(#legitimate-error-message-container) { display: none !important; }
    `}})();
    </script>
    <!-- other code that may need to go into the head element -->
</head>

What this script does

This script calls the exact same API endpoint as described in Verify by passing through the verification parameters present in the URL query parameters. If the verification is successful, the contents of your HTML <body> will be displayed as normal.

Adding Custom Error States

By default, the snippet will display an error message if the digital signature verification fails. You may add custom error messages by adding the following HTML elements to your page.

Reused Digital Signature Parameters Error Message

The inner contents of an HTML element with the following id legitimate-expired-cmac-message will be used as the error state content if the verification fails due to the verification parameters being reused.

<div id="legitimate-expired-cmac-message" class="hidden">
    <!-- Expired CMAC Error Message -->
</div>

Our API is designed in such a way that each tag verification can only occur once with a given set of parameters. This is to prevent customers from sharing or replicating any URLs or links emitted by the NFC tag.

Default Error State Message

The inner contents of an HTML element with the following id legitimate-custom-error-message will be used as the default error state content if the verification fails.

<div id="legitimate-custom-error-message" class="hidden">
    <!-- Your content here -->
</div>