LogoLogo
Our WorkHelp CenterAbout Us
  • Developer Resources
    • ⚙️Web/HTML Implementation
      • Getting Started
      • Simple HTML Example
  • Native App Implementation
  • 🛠️API Resources
    • Verify
    • Claim
    • Recover
    • Tag Verifications
  • Protocol
    • 🖼️Overview
      • Technical Specs
    • 📜Smart Contracts
      • 🔓Locking Mechanism
      • 🔓Locked721
      • 🔑Access Control Roles
      • 📃Customizing the Locked721 Contracts
    • 📏Customizations
      • 🛳️Blockchain Deployment Options
      • 🪙Digital ID Options
      • 🗞️Product Metadata Options
      • 🔐Locking Mechanism Options
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Developer Resources
  2. Web/HTML Implementation

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

PreviousGetting StartedNextNative App Implementation

Last updated 11 days ago

Was this helpful?

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.

The code of the javascript is expanded below for reference.

⚙️
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>
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; }
    `;
  }
})();