search
Our WorkHelp Center

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 here.

hashtag
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>

This script contains sensible defaults that will hide the entirety of your page's contents until after the digital signature verification is complete. You can see the un-minified implementation of this script herearrow-up-right.

hashtag
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.

hashtag
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.

hashtag
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.

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.

hashtag
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.

PreviousWeb/HTML ImplementationNextSimple HTML Example

Last updated

Was this helpful?