🛠️
Technical Documentation
  • Introduction
    • About Empeiria
  • Empe Blockchain
    • Overview
    • Chain Architecture
      • Auth
      • Authz
      • Bank
      • Distribution
      • Governance
      • Staking
      • IBC
      • DidDoc
      • Vesting
      • Minter
  • EVDI
    • EVDI Architecture
    • Self-Sovereign Identity
      • Technical Foundations
      • Roles in the SSI framework
      • Protocols and Standards
  • User Guide
    • Empe DID Wallet
      • Intro
      • Download and first launch
      • Create or import did
      • Main screen overview
      • How to claim credential from issuer
      • How to use credential with verifier
      • Settings and other options
    • Keplr Wallet and Blockchain Operations
      • How to Connect Keplr Wallet
    • Ping Pub operation
    • Staking Tokens Guide
    • Voting on Governance Proposals Guide
    • Sending Tokens Guide
  • Developer Guide
    • Tutorial: Credential Issuance & Verification
      • Overview
      • Understanding Key Concepts
      • Project Setup
      • Deploying the Issuer
      • Uploading the Credential Schema
      • Issuing Credentials
      • Frontend for Credential Issuance
      • Testing Credential Issuance
      • Deploying the Verifier
      • Setting Up the Verification Flow
      • Creating a Verification Endpoint
      • Creating a Protected Dashboard
      • Testing the Verification Flow
      • Summary & Next Steps
    • One-click deployment
      • Introduction
      • Registration
      • Login
      • Creating an Issuer
      • Issuer Data Description
      • Creating a Verifier
      • Verifier Data Description
    • Verifier
      • Terminology and Concepts
      • Architecture Overview
      • Core Responsibilities
      • Query Language
      • Frontend Integration
      • Client Configuration
      • Security Considerations
      • Error Handling and Troubleshooting
      • Future Enhancements
      • References and Standards
      • FAQ
    • Issuer
      • Terminology and Concepts
      • Architecture Overview
      • Core Responsibilities
      • DID Document Management
      • Schemas Management
      • Issuing Credentials
      • Interacting with Wallets
      • Security Considerations
      • Error Handling and Troubleshooting
      • Future Enhancements
      • References and Standards
      • FAQ
    • Wallet SDK (Coming soon)
    • Introduction to cosmwasm
  • Validator Guide
    • Important links
    • Validators Guide
      • New validator
      • Hardware requirements
      • Required software installation
      • Go installation
      • Install prebuild binary
      • Install binary from source code (option B)
      • Configure a node
      • Cosmovisor setup
      • Sync with state-sync
      • Full state sync from archive snapshot
      • Latest snapshot
      • Run a Validator
      • Migration to v0.2.2
      • Migration to v0.3.0
    • FAQ
  • Appendix
    • Glossary
Powered by GitBook
On this page
  1. Developer Guide
  2. Tutorial: Credential Issuance & Verification

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-credential and 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>
  <link rel="stylesheet" href="style.css"/>
</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('/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);
      const qrCodeData = await qrRes.json(); // Assume QR code is returned as JSON image data

      qrcodeImg.src = qrCodeData;
      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.

PreviousIssuing CredentialsNextTesting Credential Issuance

Last updated 3 months ago