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.
350 lines
16 KiB
350 lines
16 KiB
<!doctype html>
|
|
<head>
|
|
<link rel="stylesheet" href="css/style.verify.css">
|
|
<link rel="shortcut icon" href="https://www.pathcheck.org/hubfs/Favicon.png">
|
|
<title>Certificate Verifier</title>
|
|
</head>
|
|
<body>
|
|
<div class="center">
|
|
<div class="full-div">
|
|
<div id="pre-verify-section">
|
|
<h1>Certificate Verifier</h1>
|
|
|
|
<div class="select" tabindex="1" id="cameras"></div>
|
|
<button class="qr-btn" id='camera-btn' onclick="startQR()">Open Camera</button>
|
|
<br><br>
|
|
|
|
<video id="preview" width="600px"></video>
|
|
|
|
<h2>Or Paste the QR Code here:</h2>
|
|
<textarea id="qr-verify" rows="10" style="width:100%;" placeholder="cred:type:version:signature:pubkey:payload"></textarea>
|
|
<br><br>
|
|
|
|
<div class="center-in-div">
|
|
<button class="qr-btn" onclick="verifyQRCode()">Verify</button>
|
|
</div>
|
|
</div>
|
|
|
|
<br><br>
|
|
|
|
<div id="post-verify-section" style="display: none;">
|
|
<div class="card center-in-div">
|
|
<h1 id="qr-verify-title" style="text-align: center;"></h1>
|
|
<canvas style="padding:0px 50px" id="qr"></canvas><br/>
|
|
<h1 id="qr-verify-name" style="text-align: center;"></h1>
|
|
<h2 id="qr-verify-verified" style="text-align: center;"></h2>
|
|
</div>
|
|
</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 type="text/javascript" src="js/instascan.min.js"></script>
|
|
|
|
<script>
|
|
function e(elem) { return document.getElementById(elem); }
|
|
|
|
const args = { video: document.getElementById('preview'), mirror: false };
|
|
|
|
window.URL.createObjectURL = (stream) => {
|
|
args.video.srcObject = stream;
|
|
return stream;
|
|
};
|
|
|
|
var scanner = new Instascan.Scanner(args);
|
|
scanner.addListener('scan', function (content) {
|
|
onScanSuccess(content);
|
|
});
|
|
|
|
const monthNames = [ " ", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
|
|
|
|
function parseDate(str) {
|
|
console.log(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 monthNames[parseInt(m)] + ' ' + d + ', ' + y;
|
|
}
|
|
|
|
function parseISODate(str) {
|
|
const d = new Date(str);
|
|
return monthNames[parseInt(d.getMonth()+1)] + ' ' + d.getDate() + ', ' + d.getFullYear();
|
|
}
|
|
|
|
function short(hash) {
|
|
return hash.substr(0,10) + ".." + hash.substr(hash.length-10,10)
|
|
}
|
|
|
|
function verifyQRCode(data) {
|
|
if (!data)
|
|
data = e("qr-verify").value;
|
|
|
|
if (data !== "" && data != null && typeof(data) === 'string' && data.startsWith("CRED:")) {
|
|
let uri = data.substring(data.indexOf("CRED:"));
|
|
|
|
e("pre-verify-section").style.display = 'none';
|
|
e("post-verify-section").style.display = '';
|
|
|
|
const [schema, type, version, signatureBase32NoPad, pubKeyLink, payload] = PCF.parseURI(uri);
|
|
const result = PCF.downloadKeyVerify(pubKeyLink, payload, signatureBase32NoPad);
|
|
const fields = PCF.getPayloadFields(payload);
|
|
|
|
let params = {margin:0, width:700, errorCorrectionLevel: 'M', color: {dark: '#3654DD' }};
|
|
QRCode.toCanvas(e('qr'), uri, params, function (error) {
|
|
if (result) {
|
|
const imgDim={width:150,height:150}; //logo dimention
|
|
var context = e('qr').getContext('2d');
|
|
var imageObj = new Image();
|
|
imageObj.src = './img/ok-256.png';
|
|
imageObj.onload = function() {
|
|
context.drawImage(imageObj,
|
|
e('qr').width / 2 - imgDim.width / 2 +1,
|
|
e('qr').height / 2 - imgDim.height / 2,imgDim.width,imgDim.height);
|
|
};
|
|
}
|
|
});
|
|
|
|
if (result == null) {
|
|
e('qr-verify-verified').innerHTML = "Unable to Verify";
|
|
} else if (result) {
|
|
e('qr-verify-verified').innerHTML = 'Signed by ' + pubKeyLink + (fields['date'] || fields['issuanceDate'] ? ' on ' + parseDate(fields['date'] ? fields['date'] : fields['issuanceDate']) : '');
|
|
} else {
|
|
e('qr-verify-verified').innerHTML = "Credential Invalid";
|
|
}
|
|
|
|
if (type == 'BADGE') {
|
|
e('qr-verify-title').innerHTML = "COVID-19 Vaccine Record"
|
|
e('qr-verify-name').innerHTML = (fields['name'] ? fields['name'] : short(fields['passkey'])) + "<br>";
|
|
e('qr-verify-name').innerHTML += fields['dob'] ? parseDate(fields['dob']) : "" + "<br>";
|
|
}
|
|
if (type == 'COUPON') {
|
|
e('qr-verify-title').innerHTML = "COVID-19 Vaccine Coupon"
|
|
e('qr-verify-name').innerHTML = "Coupon " + fields['number'] + "/" + fields['total'] + "<br>";
|
|
e('qr-verify-name').innerHTML += "<small>Phase " + fields['phase'] + " in " + fields['city'] + "</small><br>";
|
|
}
|
|
if (type == 'STATUS') {
|
|
e('qr-verify-title').innerHTML = "COVID-19 Pass"
|
|
e('qr-verify-name').innerHTML = "Status: " + (fields['status'] === '2' ? "Vaccinated" : fields['status'] === '1' ? "One Dose" : "Not Vaccinated") + "<br />";
|
|
e('qr-verify-name').innerHTML += (fields['initials'] ? "Initials: " + fields['initials'] : "Key: " + short(fields['passkey'])) + "<br>";
|
|
}
|
|
if (type == 'PASSKEY') {
|
|
e('qr-verify-title').innerHTML = "COVID-19 PassKey"
|
|
e('qr-verify-name').innerHTML = "Name: " + fields['name'] + "<br>";
|
|
e('qr-verify-name').innerHTML += "DoB: " + parseDate(fields['dob']);
|
|
}
|
|
if (type == 'LIBERTY') {
|
|
e('qr-verify-title').innerHTML = "COVID-19 Pass"
|
|
e('qr-verify-name').innerHTML = fields['credentialSubject.subject.name.given'] + " " + fields['credentialSubject.subject.name.family'] + "<br>";
|
|
e('qr-verify-name').innerHTML += fields['credentialSubject.subject.birthDate'];
|
|
}
|
|
if (type == 'COWIN') {
|
|
e('qr-verify-title').innerHTML = "COVID-19 Vaccine Record"
|
|
e('qr-verify-name').innerHTML = fields['credentialSubject.name'] + "<br>";
|
|
e('qr-verify-name').innerHTML += fields['credentialSubject.age'] + "yrs old";
|
|
}
|
|
|
|
processed();
|
|
} else if (data !== "" && data != null && (data.startsWith("{") || data.startsWith("PK"))) {
|
|
if (data.startsWith("PK")) {
|
|
unZipVerifyDisplayDIVOC(data);
|
|
} else {
|
|
// Make sure it's not encoded.
|
|
let json = '';
|
|
if (data.includes("%22")) {
|
|
json = JSON.parse(decodeURIComponent(data))
|
|
} else {
|
|
json = JSON.parse(data);
|
|
}
|
|
|
|
verifyDisplayDIVOC(json);
|
|
}
|
|
} else {
|
|
e('qr-verify-title').innerHTML = '';
|
|
e('qr-verify-name').innerHTML = '';
|
|
let canvas = e('qr');
|
|
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
|
|
e('qr-verify-verified').innerHTML = "Certificate not found. ";
|
|
}
|
|
|
|
// Update the page's address without causing a reload
|
|
window.location.hash = '#processed'
|
|
}
|
|
|
|
function unZipVerifyDisplayDIVOC(data) {
|
|
var zip = new JSZip();
|
|
zip.loadAsync(data).then((contents) => {
|
|
console.log("unzipped", contents);
|
|
return contents.files["certificate.json"].async('text')
|
|
}).then(function (contents) {
|
|
console.log("json", contents);
|
|
verifyDisplayDIVOC(JSON.parse(contents));
|
|
}).catch(err => {
|
|
console.log(err);
|
|
}
|
|
);
|
|
}
|
|
|
|
function verifyDisplayDIVOC(json) {
|
|
DIVOC.verify(json).then(result => {
|
|
let params = {margin:0, width:700, errorCorrectionLevel: 'L', color: {dark: '#3654DD' }};
|
|
|
|
var zip = new JSZip();
|
|
|
|
zip.file("certificate.json", JSON.stringify(json), {
|
|
compression: "DEFLATE",
|
|
compressionOptions: {
|
|
level: 9
|
|
}
|
|
});
|
|
|
|
zip.generateAsync({type: "binarystring"}).then(function (bin) {
|
|
QRCode.toCanvas(e('qr'), bin, params, function (error) {
|
|
if (result) {
|
|
const imgDim={width:150,height:150}; //logo dimention
|
|
var context = e('qr').getContext('2d');
|
|
var imageObj = new Image();
|
|
imageObj.src = './img/ok-256.png';
|
|
imageObj.onload = function() {
|
|
context.drawImage(imageObj,
|
|
e('qr').width / 2 - imgDim.width / 2 +1,
|
|
e('qr').height / 2 - imgDim.height / 2,imgDim.width,imgDim.height);
|
|
};
|
|
}
|
|
});
|
|
});
|
|
|
|
if (result == null) {
|
|
e('qr-verify-verified').innerHTML = "Unable to Verify";
|
|
} else if (result) {
|
|
e('qr-verify-verified').innerHTML = 'Signed by ' + json.evidence[0].facility.name + ' on ' + parseISODate(json.issuanceDate);
|
|
} else {
|
|
e('qr-verify-verified').innerHTML = "Credential Invalid";
|
|
}
|
|
|
|
e('qr-verify-title').innerHTML = "COVID-19 Vaccine Record"
|
|
e('qr-verify-name').innerHTML = json.credentialSubject.name + "<br>";
|
|
e('qr-verify-name').innerHTML += json.credentialSubject.age + "yrs old";
|
|
|
|
processed();
|
|
});
|
|
}
|
|
|
|
function onScanSuccess(qrMessage) {
|
|
if (qrMessage !== "" && qrMessage != null) {
|
|
let uri = qrMessage.substring(qrMessage.indexOf("CRED:"));
|
|
e("qr-verify").value = uri;
|
|
verifyQRCode(qrMessage);
|
|
}
|
|
}
|
|
|
|
function onScanFailure(error) {
|
|
console.warn(`QR error = ${error}`);
|
|
}
|
|
|
|
function getQueryVariable(variable) {
|
|
var query = window.location.search.substring(1);
|
|
var vars = query.split('&');
|
|
for (var i = 0; i < vars.length; i++) {
|
|
var pair = vars[i].split('=');
|
|
if (pair[0] == variable) {
|
|
return pair[1];
|
|
}
|
|
}
|
|
console.log('Query variable %s not found', variable);
|
|
}
|
|
|
|
function startQR() {
|
|
if (e('camera-btn').innerHTML === "Open Camera") {
|
|
Instascan.Camera.getCameras().then(function (cameras) {
|
|
if (cameras.length > 0) {
|
|
scanner.start(cameras[document.querySelector('input[name="camera"]:checked').id.substr(3)]);
|
|
} else {
|
|
console.error('No cameras found.');
|
|
}
|
|
}).catch(function (e) {
|
|
console.error(e);
|
|
});
|
|
e('camera-btn').innerHTML = "Close Camera";
|
|
} else {
|
|
scanner.stop();
|
|
e('preview').pause();
|
|
e('preview').removeAttribute('src'); // empty source
|
|
e('preview').load();
|
|
e('camera-btn').innerHTML = "Open Camera";
|
|
}
|
|
}
|
|
|
|
function home() {
|
|
e("pre-verify-section").style.display = '';
|
|
e("post-verify-section").style.display = 'none';
|
|
}
|
|
|
|
function processed() {
|
|
e("pre-verify-section").style.display = 'none';
|
|
e("post-verify-section").style.display = '';
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
// Loading URI from qr parameter.
|
|
const queryString = window.location.search;
|
|
|
|
const qr = getQueryVariable("qr")
|
|
|
|
if (qr !== "" && qr != null) {
|
|
uri = qr.substring(qr.indexOf("CRED:"));
|
|
|
|
console.log(uri);
|
|
|
|
e("qr-verify").value = uri;
|
|
verifyQRCode(uri);
|
|
}
|
|
|
|
Instascan.Camera.getCameras().then(function (cameras) {
|
|
cameras.forEach(function(camera, index) {
|
|
let newInput = document.createElement("input");
|
|
newInput.setAttribute('class',"selectopt");
|
|
newInput.setAttribute('name',"camera");
|
|
newInput.setAttribute('type',"radio");
|
|
newInput.setAttribute('id',"opt"+index);
|
|
|
|
if (index == 0)
|
|
newInput.setAttribute('checked',true);
|
|
|
|
e('cameras').appendChild(newInput);
|
|
|
|
newInput = document.createElement("label");
|
|
newInput.setAttribute('for',"opt"+index);
|
|
newInput.setAttribute('class',"option");
|
|
newInput.innerHTML = camera.name;
|
|
|
|
e('cameras').appendChild(newInput);
|
|
});
|
|
});
|
|
|
|
window.onpopstate = function() {
|
|
switch(location.hash) {
|
|
case '#processed':
|
|
processed();
|
|
break
|
|
default:
|
|
home();
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|