Our WorkHelp Center

Simple HTML Example

For convenience, here's an example of how to interact with our APIs to verify Legitimate's NFC tags in your own application

The following code snippet is an example of a synchronous, blocking javascript function to verify the digital signatures emitted by Legitimate's NFC tags.

This code is provided as an example for your own implementation. For more information on how to implement this exact code into your own website, please see Getting Started.

https://github.com/LegitimateTech/lgt-verify-example/blob/main/html/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Script Test</title>
  <script src="verify-sdk-v1.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="min-h-screen bg-gray-50">
  <main class="container mx-auto px-4 py-8">
    <h1 class="text-4xl font-bold text-gray-900 mb-4">Main Page Content</h1>
    <p class="text-lg text-gray-600">If the API is valid, you'll see this content.</p>
  </main>

  <!-- Custom Error Message -->
  <div id="legitimate-custom-error-message" class="hidden">
    <div class="min-h-screen flex items-center justify-center bg-gray-50">
      <div class="max-w-md w-full p-6 bg-white rounded-lg shadow-lg">
        <h1 class="text-3xl font-bold text-red-600 mb-4">Custom Error!</h1>
        <p class="text-gray-600">This content failed to load. Please contact support.</p>
      </div>
    </div>
  </div>

  <!-- Expired CMAC Error Message -->
  <div id="legitimate-expired-cmac-message" class="hidden">
    <div class="min-h-screen flex items-center justify-center bg-gray-50">
      <div class="max-w-md w-full p-6 bg-white rounded-lg shadow-lg">
        <h1 class="text-3xl font-bold text-red-600 mb-4">Please Scan the Tag Again</h1>
        <p class="text-gray-600">The tag verification has expired. Please scan the tag again.</p>
      </div>
    </div>
  </div>

</body>
</html>

The code of the javascript is expanded below for reference.

https://github.com/LegitimateTech/lgt-verify-example/blob/main/html/verify-sdk-v1.js
(function() {
  // Inject CSS to hide body and error container
  const style = document.createElement('style');
  style.innerHTML = `
    body { display: none !important; }
  `;
  document.head.appendChild(style);

  const API_URL = 'https://api.legitimate.tech/external/v1/tags/verify';

  document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM loaded, making API request');
    fetch(API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(Object.fromEntries(new URLSearchParams(window.location.search)))
    }).then(async res => {
      const data = await res.json();
      if (!res.ok) {
        if (res.status === 422 && data.errors.cmac.indexOf('has expired') !== -1) {
          renderErrorMessage('expired_cmac');
        } else {
          renderErrorMessage();
        }
        return;
      }
      if (!data.errors) {
        style.innerHTML = `
          body { display: block !important; }
          #legitimate-custom-error-message { display: none !important; }
          #legitimate-expired-cmac-message { display: none !important; }
        `;
      } else {
        renderErrorMessage();
      }
    })
    .catch(() => {
      renderErrorMessage();
    });
  });

  function renderErrorMessage(errorType = 'default') {
    let errorContainer = document.getElementById('legitimate-error-message-container');
    if (!errorContainer) {
      console.log('Creating error message container');
      errorContainer = document.createElement('div');
      errorContainer.id = 'legitimate-error-message-container';
      document.body.appendChild(errorContainer);
    }

    let errorContent = `
      <div style="font-family: sans-serif; color: red; padding: 2rem; text-align: center;">
        An error occurred. Please try again later.
      </div>
    `;

    if (errorType === 'expired_cmac') {
      const expiredCmacErrorEl = document.getElementById('legitimate-expired-cmac-message');
      if (expiredCmacErrorEl) {
        console.log('Using expired cmac error message');
        errorContent = expiredCmacErrorEl.innerHTML;
      }
    } else {
      const customErrorEl = document.getElementById('legitimate-custom-error-message');
      if (customErrorEl) {
        console.log('Using custom error message');
        errorContent = customErrorEl.innerHTML;
      }
    }

    errorContainer.innerHTML = errorContent;
    style.innerHTML = `
      body { display: block !important; }
      body > *:not(#legitimate-error-message-container) { display: none !important; }
    `;
  }
})();
PreviousGetting StartedNextNative App Implementation

Last updated

Was this helpful?