Agent Exmaple

basic html stuff to issue and verify a credential

by mirkom

HTML

<button id="issue">
Issue
</button>
<button id="verify">
Verify
</button>
<img id="code" />
<a id="link" target="_blank">Click here</a>

JavaScript

import { Issuer, Verifier } from 'https://cdn.jsdelivr.net/npm/@bcrl/wallet-sdk/index.js'

const token = "eyJhbGciOiJFUzI1NiJ9.eyJzdWIiOiJodHRwczovL3ZjaS5tb2xsaWsuaW8vZml0IiwiaXNzIjoiaHR0cHM6Ly92Y2kubW9sbGlrLmlvL2ZpdCIsImF1ZCI6IiIsImp0aSI6IjMxNzhhNGQxLTU3YTEtNDMwZC1iNWNkLTM4MjNhODQxNGQ4MSJ9.p6JkjW8tUEQjqRGDdc151iPuakc7_hkAd0aOTm6QDP6GpdMZ2idGQlRotfc2YK9R8gwYiKXMfBounhf-r2N-tA";

let interval;

document.getElementById('issue').addEventListener('click', () => {
	clearInterval(interval);
  const issuer = new Issuer(
    token,
    'http://localhost:4201'
  );

  issuer
    .issue({
      credentialDataSupplierInput: {},
      credentials: ['adult'],
      user_pin_required: false,
    })
    .then((res) => {
      const qrcode = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(
        res.url
      )}`;
      document.getElementById('code').setAttribute('src', qrcode);
      document.getElementById('link').setAttribute('href', res.url);
      //TODO: make the interval global to prevent multiple intervals when hitting the button multiple times
      interval = setInterval(async () => {
        const status = await issuer.getStatus(res.id);
        switch (status) {
          case 'CREDENTIAL_ISSUED':
            clearInterval(interval);
            alert('done :)');
            break;
          case 'ERROR':
            clearInterval(interval);
            alert('error :(');
            break;
        }
      }, 1000);
    });
});

document.getElementById('verify').addEventListener('click', () => {
  clearInterval(interval);
  const verifier = new Verifier(
    token,
    'http://localhost:4201'
  );
  const id = "adult";
  verifier
    .verify({
      id,
    })
    .then((res) => {
      const qrcode = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(
        res.url
      )}`;
      document.getElementById('code').setAttribute('src', qrcode);
     ...