- rename .env.example to .env
- add db connection in .env
composer install
php artisan migrate
php artisan serve
- register user and login
- open QR scanner using https://baseurl/qrscanner
-
open https://baseurl/qrstest click on 'login with qr' button qr code comes up save the qr as image.
-
In your QR scanner tab import the QR image(for localhost only), it will be scanned. OR use the camera to scan(probably will work on prod)
Three APIs
- Create QR code from backend (api/login/create/qrcode)
- Poll scan/qrcode api
- Poll web/login/entry/login
method: "POST"
url: "api/login/create/qrcode"
on success response
success: function(data) {
if (data.status == 1) {
var qrcodeimg = data.msg;
$('#key').val(data.key); //key key in DOM
//qrcodeimg looks like this: baseurl/sjjh222.png
$('.qrcode-img').attr('src', qrcodeimg); //set img on DOM
var inter = setInterval(function() {
//hit QRscan api
is_sacn_qrcode(); //Poll For QR scan status
}, 3000);
$('#timing').val(inter);
}
method: "POST"
url: "api/login/scan/qrcode",
data:{key:key}
on success response
success: function(data) {
if (data.status == 1) {
// Scan code successfully
// Cancel timing tasks
clearInterval($('#timing').val());
$('#timing').val('');
var is_login = setInterval(function() {
//hit login api
is_loginfun(); //Poll For Login status
}, 3000);
$('#is_login').val(is_login);
} else if (data.status == 2) {
$('.timeout,.mask').show();
// Cancel timing tasks
clearInterval($('#timing').val());
$('#timing').val('');
}
}
method: "POST"
url: "web/login/entry/login",
data:{key:key}
on success response
success: function(data) {
if (data.status == 1) {
var uid = data.jwt;
var user = data.user;
console.log("user", user);
// var sign = data.sign;
// Cancel timed tasks and clear cookies
clearInterval($('#is_login').val());
$('#is_login').val('');
console.log("login successfull", uid);
$('.qrcode-img').attr('src', '');
alert("login successfull", uid);
$('#thelogindata').text(uid)
window.location.href = '/';
} else if (data.status == 2) {
// Cancel timed tasks
clearInterval($('#is_login').val());
$('#is_login').val('');
alert(data.msg);
}
}
Two APIs
- Scan the QR code by qrreader,set the scanned text as api url
- Attach user passcode with the scanned QR code
- Do login in the QRcode
method: "POST"
url: "/api/login/mobile/scan/qrcode?key=xxx&type=1",
headers: {'userpasscode': '$hashedid'}
on success response
success:function(data) {
if (data.status==1 ){
var qrcodeloginurl = data.msg;
<!-- qrcodeloginurl looks like this: /api/login/qrcodedoLogin?key=xxxx&type=scan&login=xxxx&sign=xxxx -->
//hit 2nd api using the url recieved in msg key
qrcodedoLogin(qrcodeloginurl);
}else if(data.status==2){
//qr expired
console.log("Error",data.msg)
}
method: "POST"
url: qrcodeloginurl,
on success response
success:function(data) {
if (data.status==1 ){
var msg = data.msg;
console.log(msg);
//QR code login successfull
}else if(data.status==2){
//qr expired
console.log("Error",data.msg)
}