Activating PhotoIDs via QRs

index.v5.html

@@ -177,6 +177,7 @@ DcJqR5clbAYlO9lHmvb4lsPLZHjugQ==
         </div>
         
         <script src="js/qrcode.min.js"></script>
+        <script src="js/base32url.min.js"></script>
 
         <script src="js/libbcmath.js" type="text/javascript"></script>
         <script src="js/bcmath.js" type="text/javascript"></script>
@@ -192,7 +193,11 @@ DcJqR5clbAYlO9lHmvb4lsPLZHjugQ==
 
             function getValueArray(elemArray) {
                 const fields = elemArray.map(function(elemId) {
-                    return e(elemId).value;
+                    if (elemId.endsWith("url")) {
+                        return Base32URL.encode(e(elemId).value);
+                    } else {
+                        return e(elemId).value;
+                    }    
                 })
                 return fields;
             }
@@ -217,6 +222,18 @@ DcJqR5clbAYlO9lHmvb4lsPLZHjugQ==
 
                         CRED.unpackAndVerify(uri).then(result => {
                             UIUtils.drawVerifiedSymbol(elemPref+'-code',result);
+
+                            CRED.mapHeaders(result, _type, _version).then(headers => {
+                                if (headers["photo-url"] && headers["photo-hash"]) {
+                                    const url = Base32URL.decodeAsString(headers["photo-url"]);
+                                    CRED.verifyEndPoint(url, headers["photo-hash"]).then(verified => {
+                                        console.log(verified);
+                                        if (verified) {
+                                            UIUtils.drawPicture(elemPref+'-code',url);
+                                        }
+                                    }); 
+                                }
+                            });
                         });
                     });
                 });
@@ -267,18 +284,21 @@ DcJqR5clbAYlO9lHmvb4lsPLZHjugQ==
                 signAndDisplayQR("qr-coupon", "coupon","1", priKeyPEM, pubKeyLink, couponArray);
 
                 // PassKey QR
-                const passKeyArray = getValueArray(["qr-passkey-name", "qr-passkey-dob", "qr-passkey-salt", "qr-passkey-phone"]);  
-                signAndDisplayQR("qr-passkey", "passkey","1", priKeyPEM, pubKeyLink, passKeyArray);
+                const passKeyArray = getValueArray(["qr-passkey-name", "qr-passkey-dob", "qr-passkey-salt", "qr-passkey-phone", 
+                                                    "qr-passkey-photo-url", "qr-passkey-photo-hash"]);  
+                signAndDisplayQR("qr-passkey", "passkey","3", priKeyPEM, pubKeyLink, passKeyArray);
 
                 // Badge QR
                 const badgeArray = getValueArray(["qr-badge-date", "qr-badge-manuf", "qr-badge-product", "qr-badge-lot", 
                                   "qr-badge-required_doses", "qr-badge-vaccinee", "qr-badge-route", 
-                                  "qr-badge-site", "qr-badge-dose", "qr-badge-name", "qr-badge-dob"]);
-                signAndDisplayQR("qr-badge", "badge","2", priKeyPEM, pubKeyLink, badgeArray);
+                                  "qr-badge-site", "qr-badge-dose", "qr-badge-name", "qr-badge-dob", 
+                                  "qr-badge-photo-url", "qr-badge-photo-hash"]);
+                signAndDisplayQR("qr-badge", "badge","3", priKeyPEM, pubKeyLink, badgeArray);
  
                 // Status QR
-                const statusArray = getValueArray(["qr-status-vaccinated", "qr-status-vaccinee", "qr-status-vaccinee-red"]);
-                signAndDisplayQR("qr-status", "status","2", priKeyPEM, pubKeyLink, statusArray);
+                const statusArray = getValueArray(["qr-status-vaccinated", "qr-status-vaccinee", "qr-status-vaccinee-red", 
+                                  "qr-status-photo-url", "qr-status-photo-hash"]);
+                signAndDisplayQR("qr-status", "status","3", priKeyPEM, pubKeyLink, statusArray);
             }
             
             function verifyQRCode() {
@@ -373,7 +393,7 @@ DcJqR5clbAYlO9lHmvb4lsPLZHjugQ==
                 e("qr-passkey-phone").value = "16173332345";
                 e("qr-passkey-dob").value = "19820321";
                 e("qr-passkey-photo-hash").value = "";
-                e("qr-passkey-photo-url").value = "https://github.pathcheck.org/img/profile.png";
+                e("qr-passkey-photo-url").value = "https://github.pathcheck.org/img/janedoe.jpeg";
 
                 e("qr-badge-manuf").value = "Moderna";
                 e("qr-badge-product").value = "COVID19";

js/ui-utils.js

@@ -14,6 +14,20 @@ var UIUtils = {
     }
   },
 
+  drawPicture: function (element, url) {
+    if (url) {
+        const imgDim= {width:e(element).width/3,height:e(element).width/3}; //logo dimention
+        var context = e(element).getContext('2d');
+        var imageObj = new Image();  
+        imageObj.src = url.toLowerCase();      
+        imageObj.onload = function() {
+            context.drawImage(imageObj, 
+            e(element).width / 2 - imgDim.width / 2 +1,
+            e(element).height / 5 - imgDim.height / 2,imgDim.width,imgDim.height);
+        }; 
+    }
+  },
+
   qrSizeBytes: function(qr) {
       return Math.round((qr.modules.size*qr.modules.size)/8);
   },