Adding Simple UI

Adding UI to authenticate and verify
Fixed bugs
This commit is contained in:
sairajzero 2020-03-04 22:23:46 +05:30
parent 54def5c2eb
commit c6c8e3d9c8

View File

@ -2,8 +2,19 @@
<html> <html>
<head> <head>
<title>FLO Standard Operators</title> <title>FLO Authenticator</title>
<style>
#qr_input, #qr_output{
height: 200px;
width: 200px;
border: 1px solid gray;
display: inline-block;
}
#text_input, #text_output{
height: 200px;
width: 200px;
}
</style>
<script id="floGlobals"> <script id="floGlobals">
/* Constants for FLO blockchain operations !!Make sure to add this at begining!! */ /* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
const floGlobals = { const floGlobals = {
@ -19,7 +30,86 @@
</head> </head>
<body onload="onLoadStartUp()"> <body onload="onLoadStartUp()">
TEST_MODE_Authenticator <div>
<div>
<span id="greet">Login to authorize</span><br/>
<button id="login_qr">Login (QR)</button>
<button id="login_text">Login (Text)</button>
</div><br/>
<div>
INPUT <br/>
<video id="qr_input"></video>
(OR)
<textarea id="text_input"></textarea>
</div>
<div>
<button id="authorize_qr">Authorize(QR)</button>
<button id="verify_qr">Verify(QR)</button>
<button id="authorize_text">Authorize(Text)</button>
<button id="verify_text">Verify(Text)</button>
</div>
<div>
OUTPUT <br/>
<span id="output_log"></span><br/>
<textarea id="text_output" disabled></textarea>
(OR)
<div id="qr_output"></div>
</div>
</div>
<script>
function clearOuputs(){
document.getElementById("output_log").innerHTML = ""
document.getElementById("text_output").innerHTML = ""
document.getElementById("qr_output").innerHTML = ""
}
document.getElementById("login_qr").onclick = function(){
floAuthenticator.scanQRCode("qr_input").then(result =>{
simpleLogin(result)
.then(result => document.getElementById("greet").innerHTML = "Logined in as "+myFloID)
.catch(error => alert(error))
}).catch(error => console.log(error))
};
document.getElementById("login_text").onclick = function(){
let text = prompt("Enter Private Key: ")
if(text)
simpleLogin(text)
.then(result => document.getElementById("greet").innerHTML = "Logined in as "+myFloID)
.catch(error => alert(error))
};
document.getElementById("authorize_qr").onclick = function(){
clearOuputs()
floAuthenticator.generateFromQR("qr_input", "text_output", "qr_output", 200)
.then(result => document.getElementById("output_log").innerHTML = result)
.catch(error => document.getElementById("output_log").innerHTML = error)
};
document.getElementById("authorize_text").onclick = function(){
clearOuputs()
floAuthenticator.generateFromText("text_input", "text_output", "qr_output", 200)
.then(result => document.getElementById("output_log").innerHTML = result)
.catch(error => document.getElementById("output_log").innerHTML = error)
};
document.getElementById("verify_qr").onclick = function(){
clearOuputs()
floAuthenticator.verifyFromQR("qr_input")
.then(result => {
document.getElementById("output_log").innerHTML = "Verification Successful"
document.getElementById("text_output").innerHTML = JSON.stringify(result)
}).catch(error => document.getElementById("output_log").innerHTML = error)
};
document.getElementById("verify_text").onclick = function(){
clearOuputs()
floAuthenticator.verifyFromText("text_input")
.then(result => {
document.getElementById("output_log").innerHTML = "Verification Successful"
document.getElementById("text_output").innerHTML = JSON.stringify(result)
}).catch(error => document.getElementById("output_log").innerHTML = error)
};
</script>
<script id="init_lib"> <script id="init_lib">
//All util libraries required for Standard operations (DO NOT EDIT ANY) //All util libraries required for Standard operations (DO NOT EDIT ANY)
@ -7289,7 +7379,7 @@ Bitcoin.Util = {
setDefaultDB: function (dbName) { setDefaultDB: function (dbName) {
this.dbName = dbName; this.dbName = dbName;
}, },
initDB: function (dbName, objectStores = {}) { initDB: function (dbName, objectStores = {}) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -7322,6 +7412,10 @@ Bitcoin.Util = {
openDB: function (dbName = this.dbName) { openDB: function (dbName = this.dbName) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
var idb = indexedDB.open(dbName); var idb = indexedDB.open(dbName);
idb.onupgradeneeded = (event) => {
event.target.transaction.abort();
reject("Database doesnot exist")
}
idb.onerror = (event) => reject("Error in opening IndexedDB!"); idb.onerror = (event) => reject("Error in opening IndexedDB!");
idb.onsuccess = (event) => resolve(event.target.result); idb.onsuccess = (event) => resolve(event.target.result);
}); });
@ -7329,7 +7423,7 @@ Bitcoin.Util = {
deleteDB: function (dbName = this.dbName) { deleteDB: function (dbName = this.dbName) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
var deleteReq = indexedDB.deleteDatabase(dbName);; var deleteReq = indexedDB.deleteDatabase(dbName);
deleteReq.onerror = (event) => reject("Error deleting database!"); deleteReq.onerror = (event) => reject("Error deleting database!");
deleteReq.onsuccess = (event) => resolve("Database deleted successfully"); deleteReq.onsuccess = (event) => resolve("Database deleted successfully");
}); });
@ -7387,6 +7481,19 @@ Bitcoin.Util = {
}); });
}, },
readIndex: function (obsName, key, index, dbName = this.dbName) {
return new Promise((resolve, reject) => {
this.openDB(dbName).then(db => {
var ind = db.transaction(obsName, "readonly").objectStore(obsName).index(index);
let getReq = ind.get(key);
getReq.onsuccess = (evt) => resolve(evt.target.result);
getReq.onerror = (evt) => reject(
`Read data unsuccessful [${evt.target.error.name}] ${evt.target.error.message}`);
db.close();
}).catch(error => reject(error));
});
},
readAllData: function (obsName, dbName = this.dbName) { readAllData: function (obsName, dbName = this.dbName) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.openDB(dbName).then(db => { this.openDB(dbName).then(db => {
@ -7462,7 +7569,6 @@ Bitcoin.Util = {
} catch (err) { } catch (err) {
throw Error("Unable to decode data") throw Error("Unable to decode data")
} }
if (data.floID !== floCrypto.getFloIDfromPubkeyHex(data.pubKey)) if (data.floID !== floCrypto.getFloIDfromPubkeyHex(data.pubKey))
throw Error("Invalid pubKey/floID combination") throw Error("Invalid pubKey/floID combination")
if (!floCrypto.verifySign(`${data.time}_${data.message}`, data.sign, data.pubKey)) if (!floCrypto.verifySign(`${data.time}_${data.message}`, data.sign, data.pubKey))
@ -7488,7 +7594,7 @@ Bitcoin.Util = {
generateFromQR: function (videoInputID, textOutputID, qrOutputID, qrOutputSize) { generateFromQR: function (videoInputID, textOutputID, qrOutputID, qrOutputSize) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.scanQRCode(videoInputID).then(message => { this.scanQRCode(videoInputID).then(message => {
let signedData = this.generateRawAuthenticator(message) let signedData = this.generateRaw(message)
document.getElementById(textOutputID).innerHTML = signedData; document.getElementById(textOutputID).innerHTML = signedData;
if (qrOutputID) if (qrOutputID)
this.createQRCode(signedData, qrOutputID, qrOutputSize) this.createQRCode(signedData, qrOutputID, qrOutputSize)
@ -7501,7 +7607,7 @@ Bitcoin.Util = {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
let message = document.getElementById(textInputID).value let message = document.getElementById(textInputID).value
let signedData = this.generateRawAuthenticator(message) let signedData = this.generateRaw(message)
document.getElementById(textOutputID).innerHTML = signedData; document.getElementById(textOutputID).innerHTML = signedData;
if (qrOutputID) if (qrOutputID)
this.createQRCode(signedData, qrOutputID, qrOutputSize) this.createQRCode(signedData, qrOutputID, qrOutputSize)
@ -7515,9 +7621,7 @@ Bitcoin.Util = {
verifyFromQR: function (videoInputID) { verifyFromQR: function (videoInputID) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.scanQRCode(videoInputID).then(data => { this.scanQRCode(videoInputID).then(data => {
this.verifyRaw(data) resolve(this.verifyRaw(data))
.then(result => resolve(result))
.catch(err => reject(err))
}).catch(err => reject(err)) }).catch(err => reject(err))
}) })
}, },
@ -7526,9 +7630,7 @@ Bitcoin.Util = {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
try { try {
let data = document.getElementById(textInputID).value let data = document.getElementById(textInputID).value
this.verifyRaw(data) resolve(this.verifyRaw(data))
.then(result => resolve(result))
.catch(err => reject(err))
} catch (err) { } catch (err) {
reject(err) reject(err)
} }
@ -7536,71 +7638,17 @@ Bitcoin.Util = {
} }
} }
</script> </script>
<script> <script>
function Login(privKey) { function simpleLogin(privKey) {
myPrivKey = privKey
myPubKey = floCrypto.getPubKeyHex(myPrivKey)
myFloID = floCrypto.getFloIDfromPubkeyHex(myPubKey)
}
function retriveCredentials(pinInput) {
if (typeof pinInput !== "function") {
pinInput = function () {
return new Promise((resolve, reject) => {
var input = prompt("Enter PIN")
if (input !== null)
resolve(input)
else
reject(null)
})
}
}
const readSharesFromIDB = function (pin, indexArr) {
return new Promise((resolve, reject) => {
var tableArr = []
for (var i = 0; i < indexArr.length; i++)
tableArr[i] = pin[i % pin.length]
var promises = []
for (var i = 0; i < indexArr.length; i++)
promises.push(compactIDB.readData(tableArr[i], indexArr[i], floGlobals.application))
Promise.all(promises).then(shares => {
var secret = floCrypto.retrieveShamirSecret(shares)
if (secret)
resolve(secret)
else
reject("Incorrect PIN or Insufficient Shares")
}).catch(error => reject(error))
})
}
const retrivePrivKey = function () {
return new Promise((resolve, reject) => {
let indexArr = localStorage.getItem(`${floGlobals.application}#privKey`)
if (indexArr) {
pinInput().then(pin => {
if (!pin)
return reject("Empty PIN")
if (!isNaN(pin))
return reject("Invalid PIN")
readSharesFromIDB(pin, JSON.parse(indexArr))
.then(result => resolve(result))
.catch(error => reject(error))
}).catch(error => reject("PIN not entered"))
} else
reject("No Credentials Stored")
})
}
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
retrivePrivKey().then(privKey => { try{
myPrivKey = privKey myPubKey = floCrypto.getPubKeyHex(privKey)
myPubKey = floCrypto.getPubKeyHex(myPrivKey)
myFloID = floCrypto.getFloIDfromPubkeyHex(myPubKey) myFloID = floCrypto.getFloIDfromPubkeyHex(myPubKey)
resolve('Login Credentials loaded successful') myPrivKey = privKey
}).catch(error => reject(error)) resolve("Login Successful")
}catch(error){
reject("Invalid Private-Key")
}
}) })
} }
</script> </script>