You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

473 lines
26 KiB

<!doctype html>
<head>
<link rel="stylesheet" href="css/style.v2.css">
<link rel="shortcut icon" href="https://www.pathcheck.org/hubfs/Favicon.png">
<title>DIVOC Credentials Generator and Verifier</title>
</head>
<body>
<div class="center">
<div class="full-div">
<h3>DIVOC Credentials Schema using PCF's spec (<a href="https://github.com/Path-Check/paper-cred/">Spec</a>)</h3>
<div class="quarter">
<h4>VC Overhead</h4>
<table>
<tr><td>Context</td><td><input id="qr-head-context" type="text" placeholder="https://www.w3.org/2018/credentials/v1, https://cowin.gov.in/credentials/vaccination/v1"/></td></tr>
<tr><td>IssuanceDate</td><td><input id="qr-head-issuance-date" type="text" placeholder="YYMMDD"/></td></tr>
<tr><td>Issuer</td><td><input id="qr-head-issuer" type="text" placeholder="https://cowin.gov.in/"/></td></tr>
<tr><td>Type</td><td><input id="qr-head-type" type="text" placeholder="VerifiableCredential, ProofOfVaccinationCredential"/></td></tr>
<tr><td>NonTransfer</td><td><input id="qr-head-nontransfer" type="text" placeholder="true"/></td></tr>
</table>
</div>
<div class="quarter">
<h4>Patient</h4>
<table>
<tr><td>Type</td><td><input id="qr-pat-type" type="text" placeholder="Person"/></td></tr>
<tr><td>ID</td><td><input id="qr-pat-id" type="text" placeholder="did:in.gov.uidai..."/></td></tr>
<tr><td>Ref ID</td><td><input id="qr-pat-refid" type="text" placeholder="123123123"/></td></tr>
<tr><td>Name</td><td><input id="qr-pat-name" type="text" placeholder="Name ..."/></td></tr>
<tr><td>Gender</td><td><input id="qr-pat-gender" type="text" placeholder="Male, ..."/></td></tr>
<tr><td>Age</td><td><input id="qr-pat-age" type="text" placeholder="23..."/></td></tr>
<tr><td>Nationality</td><td><input id="qr-pat-nationality" type="text" placeholder="Indian.. "/></td></tr>
</table>
<h4>Location</h4>
<table>
<tr><td>Address 1</td><td><input id="qr-location-address1" type="text" placeholder="3rd St"/></td></tr>
<tr><td>Address 2</td><td><input id="qr-location-address2" type="text" placeholder="Apt xx"/></td></tr>
<tr><td>District</td><td><input id="qr-location-district" type="text" placeholder="Somerville"/></td></tr>
<tr><td>City</td><td><input id="qr-location-city" type="text" placeholder="Somerville"/></td></tr>
<tr><td>State</td><td><input id="qr-location-state" type="text" placeholder="MA"/></td></tr>
<tr><td>Zip</td><td><input id="qr-location-zip" type="text" placeholder="02141"/></td></tr>
<tr><td>Country</td><td><input id="qr-location-country" type="text" placeholder="USA"/></td></tr>
</table>
</div>
<div class="quarter">
<h4>Evidence</h4>
<table>
<tr><td>ID</td><td><input id="qr-immunization-id" type="text" placeholder="undefined"/></td></tr>
<tr><td>Type</td><td><input id="qr-immunization-type" type="text" placeholder="Vaccination"/></td></tr>
<tr><td>Manuf</td><td><input id="qr-immunization-manuf" type="text" placeholder="AstraZeneca, ..."/></td></tr>
<tr><td>Product</td><td><input id="qr-immunization-product" type="text" placeholder="COVID19"/></td></tr>
<tr><td>Batch#</td><td><input id="qr-immunization-lot" type="text" placeholder="012L20A, ..."/></td></tr>
<tr><td>Date</td><td><input id="qr-immunization-date" type="text" placeholder=""/></td></tr>
<tr><td>EffectiveStart</td><td><input id="qr-immunization-eff-start" type="text" placeholder="YYYYMMDD"/></td></tr>
<tr><td>EffectiveEnd</td><td><input id="qr-immunization-eff-end" type="text" placeholder="YYYYMMDD"/></td></tr>
<tr><td>Dose</td><td><input id="qr-immunization-dose" type="text" placeholder="1, ..."/></td></tr>
<tr><td>Total Doses</td><td><input id="qr-immunization-total-doses" type="text" placeholder="2, ..."/></td></tr>
<tr><td>Verifier</td><td><input id="qr-immunization-verifier" type="text" placeholder="Name"/></td></tr>
</table>
</div>
<div class="quarter">
<h4>Facility</h4>
<table>
<tr><td>Name</td><td><input id="qr-facility-name" type="text" placeholder="3rd St"/></td></tr>
<tr><td>Address 1</td><td><input id="qr-facility-address1" type="text" placeholder="3rd St"/></td></tr>
<tr><td>Address 2</td><td><input id="qr-facility-address2" type="text" placeholder="Apt xx"/></td></tr>
<tr><td>District</td><td><input id="qr-facility-district" type="text" placeholder="Somerville"/></td></tr>
<tr><td>City</td><td><input id="qr-facility-city" type="text" placeholder="Somerville"/></td></tr>
<tr><td>State</td><td><input id="qr-facility-state" type="text" placeholder="MA"/></td></tr>
<tr><td>Zip</td><td><input id="qr-facility-zip" type="text" placeholder="02141"/></td></tr>
<tr><td>Country</td><td><input id="qr-facility-country" type="text" placeholder="USA"/></td></tr>
</table>
</div>
<div class="quarter">
<h4>Credentials</h4>
<label for="privkey">Private Key <small>(openssl ecparam -name secp256k1 -genkey -out private.key)</small></label><br/>
<textarea id="privkey" rows="10" cols="30">-----BEGIN EC PARAMETERS-----
BgUrgQQACg==
-----END EC PARAMETERS-----
-----BEGIN EC PRIVATE KEY-----
MHQCAQEEIPWKbSezZMY1gCpvN42yaVv76Lo47FvSsVZpQl0a5lWRoAcGBSuBBAAK
oUQDQgAE6DeIun4EgMBLUmbtjQw7DilMJ82YIvOR2jz/IK0R/F7/zXY1z+gqvFXf
DcJqR5clbAYlO9lHmvb4lsPLZHjugQ==
-----END EC PRIVATE KEY-----</textarea>
<br><br>
<label for="pubkey">DNS TXT Record of the Public Key <small>(openssl ec -in private.key -pubout -out public.key)</small></label><br/>
<textarea id="qr-link" rows="1" cols="30">keys.pathcheck.org</textarea>
<br><br>
<label for="privkey">QR Code Format</label><br/>
<pre>cred:<span class='protocol'>type:version</span>:<span class='signature'>Signature</span>:<span class='pub-key'>PubKey</span>:<span class='message'>Payload</span></pre>
</div>
</div>
<div class="full-div"></div>
<div class="four-quarter">
<br><br>
<div style="margin: 0 auto; width:240px; height:50px;">
<button class="qr-btn" onclick="generateQRCodes()">Generate Credentials</button>
</div>
<br><br>
</div>
<div class="full-div">
<div class="two-quarter">
<h4>PCF's Format (<a href='https://github.com/Path-Check/paper-cred/blob/main/payloads/cowin.1.md'>Spec</a>)</h4>
<canvas id="qr-divoc-code"></canvas><br/>
<pre id="qr-divoc-result"></pre>
<pre id="qr-divoc-verified"></pre>
<pre id="qr-divoc-bytes"></pre>
</div>
<div class="two-quarter">
<h4>Original DIVOC Format</h4>
<canvas id="qr-divoc-orig-code"></canvas>
<pre id="qr-divoc-orig-result" style="display: none;" onclick="copyToClipboard();">
{
"@context": ["https://www.w3.org/2018/credentials/v1", "https://cowin.gov.in/credentials/vaccination/v1"],
"type": ["VerifiableCredential", "ProofOfVaccinationCredential"],
"issuer": "https://cowin.gov.in/",
"issuanceDate": "2021-01-15T17:21:13.117Z",
"nonTransferable": "true",
"credentialSubject": {
"type": "Person",
"id": "did:in.gov.uidai.aadhaar:2342343334",
"refId": "12346",
"name": "Bhaya Mitra",
"gender": "Male",
"age": "27",
"nationality": "Indian",
"address": {
"streetAddress": "",
"streetAddress2": "",
"district": "",
"city": "",
"addressRegion": "",
"addressCountry": "IN",
"postalCode": ""
}
},
"evidence": [{
"id": "https://cowin.gov.in/vaccine/undefined",
"feedbackUrl": "https://cowin.gov.in/?undefined",
"infoUrl": "https://cowin.gov.in/?undefined",
"type": ["Vaccination"],
"batch": "MB3428BX",
"vaccine": "CoVax",
"manufacturer": "COVPharma",
"date": "2020-12-02T19:21:18.646Z",
"effectiveStart": "2020-12-02",
"effectiveUntil": "2025-12-02",
"dose": "",
"totalDoses": "",
"verifier": {
"name": "Sooraj Singh"
},
"facility": {
"name": "ABC Medical Center",
"address": {
"streetAddress": "123, Koramangala",
"streetAddress2": "",
"district": "Bengaluru South",
"city": "Bengaluru",
"addressRegion": "Karnataka",
"addressCountry": "IN",
"postalCode": ""
}
}
}],
"proof": {
"type": "RsaSignature2018",
"created": "2021-01-15T17:21:13Z",
"verificationMethod": "did:india",
"proofPurpose": "assertionMethod",
"jws": "eyJhbGciOiJQUzI1NiIsImI2NCI6ZmFsc2UsImNyaXQiOlsiYjY0Il19..mJlHZZRD7VQwVJchfI21ZavjxNKglbf3LSaF1SAjELOWn9MARALkugsmOzG0mBon9R7zXSVPkPM8EDbUZxR4FsRlAFFszFv-0BjyAeIqRv-9MRnlm4cScQi8aCBgBnvsWfNIE175cGNbPUluVv5n6G66tVinioL5IL6uCZNQnSGp4jJrEAZa0t5s3jXfq7soHz1LTfQbLs7cH5-fDi3JW1-WeF4_ELy_9l_OxAc2CoACqYLOLJB-NnPsnz2bwAvH8yXHsjZJphzaBNqpn8DmJvcRHzhz7OjpGfhyouiOyGo_XncadFmftqwfilJkC1EISkSb6QVsyhHLOudY4PTTaA"
}
}</pre>
<pre id="qr-divoc-orig-verified"></pre>
<pre id="qr-divoc-orig-bytes"></pre>
</div>
<div class="quarter">
<label for="verify">Verify a QR Code</small></label><br/>
<textarea id="qr-verify" rows="10" cols="30" placeholder="cred:type:version:signature:pubkey:payload"></textarea>
<br><br>
<button class="qr-btn" onclick="verifyQRCode()">Verify</button>
<br><br>
<pre id="qr-verify-result"></pre>
<pre id="qr-verify-verified"></pre>
</div>
</div>
</div>
<script src="js/qrcode.min.js"></script>
<script src="js/elliptic.min.js"></script>
<script src="js/sha256.js"></script>
<script src="js/asn1.min.js"></script>
<script src="js/base32.min.js"></script>
<script src="js/pcf.js"></script>
<script src="js/jszip.min.js"></script>
<script src="js/divoc.min.js"></script>
<script>
const params = { margin:0, width:520, errorCorrectionLevel: 'L', color: {dark: '#3654DD' }};
function e(elem) { return document.getElementById(elem); }
function getValueArray(elemArray) {
const fields = elemArray.map(function(elemId) {
if (!e(elemId)) console.log('Could not find ' + elemId);
return e(elemId).value;
})
return fields;
}
function signAndDisplayQR(elemPref, _type, _version, priKeyPEM, pubKeyId, payloadValueArray) {
const uri = PCF.sign(_type, _version, priKeyPEM, pubKeyId, payloadValueArray);
const [schema, type, version, signature, pubKeyLink, payload] = PCF.parseURI(uri);
drawsQR(elemPref, uri);
// Updates screen elements.
e(elemPref+"-result").innerHTML= schema+":<span class='protocol'>"+type+":"+version+"</span>:" +
"<span class='signature'>" + signature + "</span>" + ":" +
"<span class='pub-key'>" + pubKeyLink + "</span>" + ":" +
"<span class='message'>" + payload + "</span><br>";
// "Signature DER: <span class='signature'>" + signatureDER + "</span><br><br>"+
// "Payload SHA256 Hash: <span class='message'>" + payloadSHA256 + "</span><br><br>";
e(elemPref+"-verified").innerHTML = "Signature: Not Verified";
// Verifies URI is valid
e(elemPref + "-verified").innerHTML = PCF.debugDownloadVerify(pubKeyLink, payload, signature);
}
function drawsQR(elemPref, value) {
// Builds QR Element
QRCode.toCanvas(e(elemPref+'-code'), value, params, function (error) { });
let qr = QRCode.create(value, params);
let qrQ = null;
try {
qrQ = QRCode.create(value, { margin:0, width:275, errorCorrectionLevel: 'Q', color: {dark: '#3654DD' }});
} catch (err) {
console.error("Q " + err);
}
let qrH = null;
try {
qrH = QRCode.create(value, { margin:0, width:275, errorCorrectionLevel: 'H', color: {dark: '#3654DD' }});
} catch (err) {
console.error("H " + err);
}
let qrM = QRCode.create(value, { margin:0, width:275, errorCorrectionLevel: 'M', color: {dark: '#3654DD' }});
let qrL = QRCode.create(value, { margin:0, width:275, errorCorrectionLevel: 'L', color: {dark: '#3654DD' }});
e(elemPref+"-bytes").innerHTML = "URI in A/N (5.5bit/char): "+ Math.round(value.length * 5.5/8) + " bytes<br>";
e(elemPref+"-bytes").innerHTML += "<br>QR Size Analysis: ";
e(elemPref+"-bytes").innerHTML += "<br>- ECC L 7% " + describe(qrL);
e(elemPref+"-bytes").innerHTML += "<br>- ECC M 15% " + describe(qrM);
e(elemPref+"-bytes").innerHTML += "<br>- ECC Q 25% " + describe(qrQ);
e(elemPref+"-bytes").innerHTML += "<br>- ECC H 30% " + describe(qrH);
e(elemPref+"-bytes").innerHTML += "<br><br>QR built with " + qr.segments.length + " segments";
for (i=0; i<qr.segments.length; i++) {
e(elemPref+"-bytes").innerHTML += "<br>- " + i + ": " + qr.segments[i].mode.id + " " + qr.segments[i].data;
}
}
function describe(qr) {
if (qr == null || qr === undefined) return "Data is too big to be stored in a QR";
return qr.modules.size + "x" + qr.modules.size + " bits " + Math.round((qr.modules.size*qr.modules.size)/8) + " bytes ";
}
function parse(str) {
if(!/^(\d){8}$/.test(str)) return "invalid date";
var y = str.substr(0,4),
m = str.substr(4,2),
d = str.substr(6,2);
return new Date(y,m-1,d);
}
function generateQRCodes() {
// Where to Download the public key
const pubKeyLink = e("qr-link").value.trim().replace("http://","");
// PEM code of the private key
const priKeyPEM = e('privkey').value;
const fieldArray = [
"qr-pat-id", "qr-pat-refid", "qr-pat-name", "qr-pat-age", "qr-pat-gender", "qr-pat-nationality",
"qr-location-address1", "qr-location-address2", "qr-location-district", "qr-location-city", "qr-location-zip", "qr-location-state", "qr-location-country",
"qr-immunization-date", "qr-immunization-manuf", "qr-immunization-product", "qr-immunization-lot", "qr-immunization-eff-start", "qr-immunization-eff-end",
"qr-immunization-dose", "qr-immunization-total-doses", "qr-immunization-id", "qr-immunization-verifier",
"qr-facility-name", "qr-facility-address1", "qr-facility-address2", "qr-facility-district", "qr-facility-city", "qr-facility-zip", "qr-facility-state", "qr-facility-country",
"qr-head-issuance-date",
];
signAndDisplayQR("qr-divoc", "cowin", "1", priKeyPEM, pubKeyLink, getValueArray(fieldArray));
let divocW3C = {
"@context": e("qr-head-context").value.split(', '),
"type": e("qr-head-type").value.split(', '),
"issuer": e("qr-head-issuer").value,
"issuanceDate": parse(e("qr-head-issuance-date").value).toJSON(),
"nonTransferable": e("qr-head-nontransfer").value,
"credentialSubject": {
"type": e("qr-pat-type").value,
"id": e("qr-pat-id").value,
"refId": e("qr-pat-refid").value,
"name": e("qr-pat-name").value,
"gender": e("qr-pat-gender").value,
"age": e("qr-pat-age").value,
"nationality": e("qr-pat-nationality").value,
"address": {
"streetAddress": e("qr-location-address1").value,
"streetAddress2": e("qr-location-address2").value,
"district": e("qr-location-district").value,
"city": e("qr-location-city").value,
"addressRegion": e("qr-location-state").value,
"addressCountry": e("qr-location-country").value,
"postalCode": e("qr-location-zip").value,
}
},
"evidence": [
{
"id": "https://cowin.gov.in/vaccine/" + e("qr-immunization-id").value,
"feedbackUrl": "https://cowin.gov.in/?" + e("qr-immunization-id").value,
"infoUrl": "https://cowin.gov.in/?" + e("qr-immunization-id").value,
"type": [e("qr-immunization-type").value],
"batch": e("qr-immunization-lot").value,
"vaccine": e("qr-immunization-product").value,
"manufacturer": e("qr-immunization-manuf").value,
"date": e("qr-immunization-date").value,
"effectiveStart": e("qr-immunization-eff-start").value,
"effectiveUntil": e("qr-immunization-eff-end").value,
"dose": e("qr-immunization-dose").value,
"totalDoses": e("qr-immunization-total-doses").value,
"verifier": {
"name": e("qr-immunization-verifier").value
},
"facility": {
"name": e("qr-facility-name").value,
"address": {
"streetAddress": e("qr-facility-address1").value,
"streetAddress2": e("qr-facility-address2").value,
"district": e("qr-facility-district").value,
"city": e("qr-facility-city").value,
"addressRegion": e("qr-facility-state").value,
"addressCountry": e("qr-facility-country").value,
"postalCode": e("qr-facility-zip").value,
}
}
}
]
};
DIVOC.sign(divocW3C).then(signed => {
let cert = JSON.stringify(signed);
var zip = new JSZip();
zip.file("certificate.json", cert, {
compression: "DEFLATE",
compressionOptions: {
level: 9
}
});
zip.generateAsync({type: "binarystring"}).then(function (bin) {
drawsQR("qr-divoc-orig", bin);
e("qr-divoc-orig-result").innerHTML= bin;
});
e("qr-divoc-orig-result").setAttribute('data-title', cert);
DIVOC.verify(signed).then(verified => {
e("qr-divoc-orig-verified").innerHTML = "Signature: " + (verified ? "Independently Verified" : "Not Valid");
});
});
e("qr-divoc-orig-code").style.display='block';
e("qr-divoc-orig-result").style.display='block';
e("qr-divoc-orig-bytes").style.display='block';
}
function copyToClipboard() {
navigator.permissions.query({name: "clipboard-write"}).then(result => {
if (result.state == "granted" || result.state == "prompt") {
var copyText = e("qr-divoc-orig-result").getAttribute('data-title');
navigator.clipboard.writeText(copyText);
}
});
}
function verifyQRCode() {
const payload = e("qr-verify").value;
if (payload.startsWith("CRED:")) {
e("qr-verify-result").innerHTML = PCF.debugParseURI(payload);
e('qr-verify-verified').innerHTML = PCF.debugVerify(payload);
} if (payload.startsWith("{")) {
DIVOC.verify(JSON.parse(payload)).then(verified => {
e("qr-verify-result").innerHTML = "W3C VC Payload";
e("qr-verify-verified").innerHTML = "Signature: " + (verified ? "Independently Verified" : "Not Valid");
});
}
}
</script>
<script>
// Defaults
e("qr-immunization-date").value = new Date().toJSON().slice(0, 10).replaceAll("-","");
function loadDemo() {
e("qr-head-context").value = "https://www.w3.org/2018/credentials/v1, https://cowin.gov.in/credentials/vaccination/v1";
e("qr-head-issuance-date").value = new Date().toJSON().slice(0, 10).replaceAll("-","");
e("qr-head-type").value = "VerifiableCredential, ProofOfVaccinationCredential";
e("qr-head-issuer").value = "https://cowin.gov.in/";
e("qr-head-nontransfer").value = "true";
e("qr-pat-type").value = "Person";
e("qr-pat-id").value = "did:in.gov.uidai.aadhaar:2342343334";
e("qr-pat-refid").value = "12346";
e("qr-pat-name").value = "Bhaya Mitra";
e("qr-pat-age").value = "27";
e("qr-pat-gender").value = "Male";
e("qr-pat-nationality").value = "Indian";
e("qr-location-address1").value = "101-102, Mangal Ashirwad";
e("qr-location-address2").value = "S V Road";
e("qr-location-district").value = "Santacruz West";
e("qr-location-city").value = "Mumbai";
e("qr-location-zip").value = "400054";
e("qr-location-state").value = "Maharashtra";
e("qr-location-country").value = "IN";
e("qr-immunization-id").value = "undefined";
e("qr-immunization-type").value = "Vaccination";
e("qr-immunization-manuf").value = "COVPharma";
e("qr-immunization-product").value = "CoVax";
e("qr-immunization-lot").value = "MB3428BX";
e("qr-immunization-eff-start").value = "20201202";
e("qr-immunization-eff-end").value = "20251202";
e("qr-immunization-dose").value = "1";
e("qr-immunization-total-doses").value = "1";
e("qr-immunization-verifier").value = "Sooraj Singh";
e("qr-facility-name").value = "ABC Medical Center";
e("qr-facility-address1").value = "123, Koramangala";
e("qr-facility-address2").value = "";
e("qr-facility-district").value = "Bengaluru South";
e("qr-facility-city").value = "Bengaluru";
e("qr-facility-zip").value = "";
e("qr-facility-state").value = "Karnataka";
e("qr-facility-country").value = "IN";
}
loadDemo();
</script>
<script>
async function preloadKey() {
PCF.getKeyId(e("qr-link").value);
}
window.onload = function() {
preloadKey();
}
</script>
</body>
</html>