Frontend for Credential Issuance
What We Are Doing:
Creating a simple HTML form to collect user data.
When the form is submitted, it calls
/kyc-credentialand displays the returned QR code.The user scans this QR code with the Empe DID Wallet to receive the credential.
Why: A user interface is essential so that a real person can enter their details and obtain a credential.
Steps: In public/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>EVDI Tutorial</title>
</head>
<body>
<h1>KYC Credential Issuance</h1>
<form id="kyc-form">
<label for="age">Age</label>
<input type="number" name="age" id="age" required/>
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" required/>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" required/>
<button type="submit">Submit</button>
</form>
<img src="" alt="qrcode" width="238" height="238" id="qrcode" style="display:none;"/>
<script>
const form = document.getElementById('kyc-form');
const qrcodeImg = document.getElementById('qrcode');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const payload = {
age: formData.get('age'),
firstName: formData.get('firstName'),
lastName: formData.get('lastName')
};
const res = await fetch('/issuer/kyc-credential', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(payload)
});
const data = await res.json();
// Fetch the actual QR code image data
const qrRes = await fetch(data.qr_code_url);
// Assume QR code is returned as JSON image data
qrcodeImg.src = await qrRes.json();
qrcodeImg.style.display = 'block';
});
</script>
</body>
</html>Now, you can test issuing a credential by filling out the form and scanning the generated QR code with the Empe DID Wallet.
Last updated