adds qr code scanner to auth

bnan · Apr 18, 2021 · 8df3224 · 8df3224
1 parent 41d516d
commit 8df3224
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 26 deletions.
diff --git a/src/Auth.js b/src/Auth.js
@@ -1,7 +1,7 @@
 const Auth = (function() {
   function checkPermissions(auth){
       var authObj = JSON.parse(auth);
-      console.log(authObj);
+      console.log("authObj", authObj);
 
       return true;
 

diff --git a/src/app.js b/src/app.js
@@ -1,7 +1,7 @@
 class App {
   constructor() {
-    this.providerAddress = "0x1688d0d48C1E45C711f36B4fb03d3FA8975C4203";
-    this.clientAddress = "0x76313a8170daA3C2B68517937c757Cb4505411c1";
+    this.providerAddress = "0xF70c5332F7aE16c588F6689fc8998d3aae6ceFd5";
+    this.clientAddress = "0xC12AE3C32921C245aEe9d811d82c0C0F5E3C5CBb";
     this.blockchainRpcServer = "http://localhost:7545";
 
     this.loadAccount();
@@ -26,11 +26,11 @@ class App {
   async createAccess(address, expiry, photoUrl) {
     const permissions = JSON.stringify({ expiry: expiry, photoUrl: photoUrl });
     console.log(`Authorizing ${this.clientAddress} with ${permissions}`);
-    await this.contract.createAccess(this.clientAddress, permissions);
+    await this.contract.createAccess(address || this.clientAddress, permissions);
     console.log(`Authorized access ${JSON.stringify(this.authorization())}`);
   }
 
-  async authorization() {
-    return await this.contract.authorization(this.clientAddress)
+  async authorization(address) {
+    return await this.contract.authorization(address || this.clientAddress)
   }
 };
diff --git a/src/authorize.html b/src/authorize.html
@@ -7,6 +7,8 @@
     <script src="https://unpkg.com/[email protected]/dist/index.js" integrity="sha384-5bXRcW9kyxxnSMbOoHzraqa7Z0PQWIao+cgeg327zit1hz5LZCEbIMx/LWKPReuB" crossorigin="anonymous"></script>
     <title>Let Me In</title>
     <link rel="stylesheet" href="main.css">
+    <script src="vendor/qr_packed.js">  </script>
+
   </head>
   <body>
     <header>
@@ -15,40 +17,40 @@ <h1>Let Me In</h1>
 
     <h2>Authenticate to Gain Access</h2>
     <div>
-      <label for="address">Client Address</label>
-      <input type="text" id="address">
+
+      <div>
+        <label for="address">Scan client Address:</label>
+        <div id="container" height="280" width="340" >
+
+          <canvas hidden="" id="qr-canvas"></canvas>
+
+        </div>
+
+
+      </div>
+    <!--  <input type="text" id="address">-->
     </div>
 
-    <div>
+  <!--  <div>
       <button type="button" id="submitVerification">Verify</button>
-    </div>
+    </div>-->
 
     <div>
-      <img style="display: none" id="photo">
+      <h6>User photo:</h6>
+      <img style="width:200px; length: 300px;" id="photo">
     </div>
 
     <script src="vendor/@truffle/contract/dist/truffle-contract.min.js"></script>
     <script src="vendor/web3/dist/web3.min.js"></script>
     <script src="IpfsModule.js"></script>
     <script src="Auth.js"></script>
     <script src="app.js"></script>
+    <script src="qrCodeScannerAuth.js"></script>
+
     <script>
     (function () {
       const app = new App();
-      const verification = document.getElementById("submitVerification");
-      if (verification) {
-        verification.addEventListener("click", async () => {
-          const auth = await app.authorization();
-
-          if (Auth.checkPermissions(auth)) {
-            const photo = document.getElementById("photo");
-            photo.src = Auth.getClientURLPhoto(auth);
-            photo.display = "block";
-          } else {
-            window.alert("User not Authorized");
-          }
-        });
-      }
+
     })();
     </script>
   </body>

diff --git a/src/qrCodeScanner.js b/src/qrCodeScanner.js
@@ -12,7 +12,7 @@ let scanning = false;
 
 qrcode.callback = res => {
   if (res) {
-    outputData.value = res;
+    outputData.value = res.split('ethereum:')[1];
     scanning = false;
 
     video.srcObject.getTracks().forEach(track => {

diff --git a/src/qrCodeScannerAuth.js b/src/qrCodeScannerAuth.js
@@ -0,0 +1,72 @@
+var qrcode = window.qrcode;
+
+const video = document.createElement("video");
+const canvasElement = document.getElementById("qr-canvas");
+const canvas = canvasElement.getContext("2d");
+
+
+let scanning = false;
+const app = new App();
+qrcode.callback = ((res) => {
+  if (res) {
+    res = res.split('ethereum:')[1];
+    console.log(res);
+    //scanning = false;
+    console.log("asdsad");
+
+    (async function(){
+      const auth = await app.authorization(res);
+      console.log("asd");
+      if (Auth.checkPermissions(auth)) {
+        const photoElement = document.getElementById("photo");
+        console.log("auth:",auth);
+        photoElement.src = Auth.getClientURLPhoto(auth);
+        console.log("Auth.getClientURLPhoto(auth)", Auth.getClientURLPhoto(auth));
+        photoElement.display = "block";
+      } else {
+        window.alert("User not Authorized");
+      }
+      video.srcObject.getTracks().forEach(track => {
+        track.stop();
+      });
+      load();
+      //canvasElement.hidden = true;
+    })();
+
+
+  }
+});
+function load(){
+  navigator.mediaDevices
+    .getUserMedia({ video: { facingMode: "environment" } })
+    .then(function(stream) {
+      scanning = true;
+
+      canvasElement.hidden = false;
+      video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
+      video.srcObject = stream;
+      video.play();
+      tick();
+      scan();
+    });
+}
+
+document.body.onload = () => {
+  load();
+};
+
+function tick() {
+  canvasElement.height = video.videoHeight;
+  canvasElement.width = video.videoWidth;
+  canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
+
+  scanning && requestAnimationFrame(tick);
+}
+
+function scan() {
+  try {
+    qrcode.decode();
+  } catch (e) {
+    setTimeout(scan, 300);
+  }
+}