手机 app 扫码登录网站
用户打开web端网页,进入扫码登录的界面;
从web端服务器获取二维码的唯一标识,用于表示该二维码所对应的用户,方便后面 PC端网页异步轮询xmlhttprequest (ajax),定期轮询后台 查看用户是否扫描二维码
web端服务器在生成二维码时,与请求会的唯一标识(uuid)进行关联,后端将uuid存储到数据库中,方便后面轮询后台
用户打开APP端,扫描二维码进行授权登录操作
APP客户端从二维码中读取到uuid,带着APP内的身份信息访问服务器 也就是token
服务器获取到用户信息之后,将用户的id更新到数据库前面存储的单条数据uuid中,此时web服务器就能拿到对应的用户id,之后生成登录身份信息返回给浏览器,即用户在web端完成了登录
代码实现
PC端
// 首先下载 qrcodejs2 模块 npm i qrcodejs2 --save
// 在组件中使用
<template>
<div class="qrcode" ref="qrCodeUrl"></div>
</template>
<script>
import QRCode from "qrcodejs2";
import axios from "axios";
export default {
data() {
return {
uuid: "", // 请求回来的唯一标识
timer: "",
};
},
methods: {
// 获取唯一id生成二维码
async getUuid() {
const {
data: { uuid },
} = await axios.get("http://127.0.0.1:3000/ewm");
this.uuid = uuid;
// 生成二维码
this.creatQrCode();
},
creatQrCode() {
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: JSON.stringify({
uuid: this.uuid,
token: "123",
}), // 需要转换为二维码的内容
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
// 二维码显示成功之后 运行PC端网页异步轮询xmlhttprequest (ajax),定期轮询后台 每隔200毫秒向后端发送一次请求 查看是否登录成功
this.getStatus();
},
// 轮询后端
async getStatus() {
let _this = this;
const {
data: { status },
} = await axios.get("http://127.0.0.1:3000/isLogin", {
params: {
uuid: this.uuid,
},
});
// 如果没有登录成功的话 一直询问是否登录成功
if (status === 400) {
this.timer = setTimeout(function () {
_this.getStatus();
}, 200);
}
clearTimeout(this.timer);
},
},
mounted() {
this.getUuid();
},
};
</script>
APP端
<template>
<view class="content">
<view @click="scan">扫码验证</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
scan() { //扫码验证
var _this = this;
uni.scanCode({
onlyFromCamera: false, //为true只允许相机扫码,不加允许相册扫码
success: function(res) {
console.log(res.result, '@@@')
// 发送请求将获取的 {"uuid":1650462410424,"token":"123"} 数据发送到服务端 服务端返回用户数据到浏览器 浏览器页面进行跳转页面
uni.showToast({
title: '扫码成功'
})
},
fail: function(err) {
console.log('扫码失败', err)
}
})
},
}
}
</script>