provide a OTP verification for user mobile and email address, for secure shopping on our site
when a user sign up for first time and when a user change their mobile no and email.
it will be very helpful for wix user like us who are not so good on coding
we have implemented 2FA on our website, but for OTP this could be adjusted slightly.
This is an adaption of an OTP that we were supported by @brainstorrrm with to implement external code that works with google authenticator. This provides an 8 digit number for the purpose of enabling access by non logged in individuals to pages secured by the same secret and algorithm. We also developed it to advise those who own the pages via email that individuals have been accessing or attempting to access the pages restricted by the OTP code. you will require multiple elements and modules to make this work, I am not an expert in this field by a long way so use at your discretion but the link below will help you understand what is needed.
$w.onReady( function () {
$w(“#buttonToVerify”).onClick(() => {
wixData.query(‘YourDataCollection’)
.find()
.then(result => {
const item = result.items[0];
let userId = item._owner;
let otp = $w(‘#text’).text;
otp = otp.substr(0, 4) + otp.substr(4, 8);
let token = $w(‘#input’).value;
let x = token.length;
if (x < 8) {
$w(‘#red’).show();
$w(‘#green’).hide();
$w(‘#textStatus’).show();
$w(‘#textStatus’).text = “Token needs 8 digits”;
const subject = failed attempt from ${$w("#nameInput").value};
const body = Name: ${$w("#nameInput").value} \rEmail: ${$w("#emailInput").value} \rCode: ${$w("#input").value} \rMessage: "The individual stated above within this email has attempted to gain access to ......, if you do not recognise the individual? Please make sure that you are only sharing deatils on your public profile that you are happy to do so with general public";
const recipient = item.email;
sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));
return ;
}
if (token === otp) {
$w(‘#green’).show();
$w(‘#red’).hide();
$w(‘#textStatus’).show();
$w(‘#textStatus’).text = “Correct - Authorised!”;
const subject = attempt from ${$w("#nameInput").value};
const body = Name: ${$w("#nameInput").value} \rEmail: ${$w("#emailInput").value} \rCode: ${$w("#input").value} \rMessage: "The individual has successfully gained access to......., if you do not recognise the individual? Please make sure that you carry out appropriate actions";
const recipient = item.email;
sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));
let url = Any URL or item.url you want to redirect too;
wixLocation.to(url)
console.log(“going to URL”);
} else {
$w(‘#red’).show();
$w(‘#green’).hide();
$w(‘#textStatus’).show();
$w(‘#textStatus’).text = “Authorisation failed!”;
const subject = failed attempt from ${$w("#nameInput").value};
const body = Name: ${$w("#nameInput").value} \rEmail: ${$w("#emailInput").value} \rCode: ${$w("#input").value} \rMessage: "The individual stated above within this email has attempted to gain access ....., if you do not recognise the individual? Please make sure you carry out appropriate actions";
const recipient = item.email;
sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));
}
})
})
$w.onReady( function () {
wixData.query(‘YourDataCollection’)
.find()
.then(results => {
const item = results.items[0];
let userId = item._owner;
$w(‘#text’).text = item.secret;
var myVar = setInterval(timer, 1000);
updateOtp();
})
function dec2hex(s) { return (s < 15.5 ? ‘0’ : ‘’) + Math.round(s).toString(16); }
function hex2dec(s) { return parseInt(s, 16); }
function base32tohex(base32) {
var base32chars = “ABCDEFGHIJKLMNOPQRSTUVWXYZ234567”;
var bits = “”;
var hex = “”;
for ( var i = 0; i < base32.length; i++) {
var val = base32chars.indexOf(base32.charAt(i).toUpperCase());
bits += leftpad(val.toString(2), 5, ‘0’);
}
for ( var i = 0; i + 4 <= bits.length; i += 4) {
var chunk = bits.substr(i, 4);
hex = hex + parseInt(chunk, 2).toString(16);
}
return hex;
}
function leftpad(str, len, pad) {
if (len + 1 >= str.length) {
str = Array(len + 1 - str.length).join(pad) + str;
}
return str;
}
async function updateOtp() {
var key = base32tohex($w(“#text”).text);
var epoch = Math.round( new Date().getTime() / 1000.0);
var time = leftpad(dec2hex(Math.floor(epoch / 1200)), 16, ‘0’);
let hmac = await getSHAobj(key, time);
$w("#text264").text = "" + key
$w('#text265').text = " " + ((key.length * 4) + ' bits');
$w('#text266').text = "Epoch: " + time;
var offset = hex2dec(hmac.substring(hmac.length - 1));
var part1 = hmac.substr(0, offset * 2);
var part2 = hmac.substr(offset * 2, 8);
var part3 = hmac.substr(offset * 2 + 8, hmac.length - offset);
var displayHMAC = “”;
if (part1.length > 0) {
displayHMAC = part1;
}
displayHMAC = displayHMAC + " - " + part2;
if (part3.length > 0) {
displayHMAC = displayHMAC + " - " + part3;
}
$w('#text267').text = "" + part1 + " - " + part2 + " - " + part3;
var otp = (hex2dec(hmac.substr(offset * 2, 10)) & hex2dec(‘7fffffff’)) + ‘’;
otp = (otp).substr(otp.length - 8, 8);
$w(“#text268”).text = otp.substr(0, 4) + “” + otp.substr(4, 8);
}
function timer() {
var epoch = Math.round( new Date().getTime() / 1000.0);
var countDown = 1200 - (epoch % 1200);
let minutes = (countDown / 60) | 0;
let seconds = (countDown % 60) | 0;
minutes = minutes < 10 ? “0” + minutes : minutes;
seconds = seconds < 10 ? “0” + seconds : seconds;
if (epoch % 1200 === 0) updateOtp();
$w(‘#text261’).text = minutes + “:” + seconds;
}
})
})
Same here. My website also needed to verify Email Address and Mobile Number of users by sending verification code during registration. It removes the possibility of a user registering with fake Email Address/Mobile Number.
I’m a beginner, got stuck, have no idea how to implement it. Someone please help.
Thank you