扫码登录步骤
实现这个功能,总共分三步:
第一步,PC端生成二维码,后台会根据参数key生成数据存在redis里面。
第二步,移动端扫码接口根据这个key更新key的登陆状态,以及是哪个学生扫码登陆的。
第三步,PC端一直请求后台,通过key解析到的数据是如果是已登陆,就能登陆系统了。
三个接口参数值保持一致就可以了。
第三步到时候还要加个判断: 二维码生成之后一分钟之内没扫码, 后台存入redis里面的数据就找不到了, 这时候需要重新调用第一步的接口生成二维码更新下页面上的二维码。
移动端与企业微信JS-SDK集成
同样也是三步
1.引入JS文件
在index.html中接入微信JS-SDK,引入JS文件
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
2.请求后台获取wxconfig需要的信息
前端配置wx.config参数,代码如下
import Vue from 'vue'
Vue.prototype.initWxConfig = function () {
let t = this;
t.$axios({
method: 'get',
// url: window._CONFIG['BASE_API'] + '/sys/getWxConfig',
url: localStorage.getItem('schoolUrl') + '/sys/getWxConfig',
params: {
url: window.location.href.split('#')[0]
}
}).then(res => {
let result = res.data.result;
wx.config({
debug: false,//开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: result.appId,//必填,企业微信的corpID
timestamp: result.timestamp,// 必填,生成签名的时间戳
nonceStr: result.nonceStr, // 必填,生成签名的随机串
signature: result.signature,// 必填,签名
jsApiList: ["scanQRCode"]// 必填,需要使用的JS接口列表
});
})
};
H5不能直接访问,需要服务端通过代理访问。
注意,接口的传入参数url,是当前页面url,需要在企业微信的配置页面授权可信域名。
不然,就一直报signature签名错误。从而导致微信配置初始化失败。
这里很重要,踩坑指南:
如应用页面需要使用微信JS-SDK,需完成域名归属验证。
点击“申请校验域名”,然后点击“下载文件”,将下载的文件上传至填写域名根目录下。
然后输入刚刚配置的域名+文件名称进行访问,如果访问成功,则点击已上传归属校验文件,然后点击确定就配置完成了。
3.调用微信API的扫码功能
组件中调用
created(){
// 微信初始化
this.initWxConfig();
},
scanQRCode(){
// xmp 扫码的api调用还有问题
let that = this;
wx.scanQRCode({
desc: 'scanQRCode desc',
needResult: 1, // 默认为0,扫描结果由企业微信处理,1则直接返回扫描结果,
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
// 回调
let string = res.resultStr;
// loginByCode 是拿到扫码结果后调用的方法
// 扫完码之后更新PC端的登陆状态
that.loginByCode(string);
},
error: function (res) {
if (res.errMsg.indexOf('function_not_exist') > 0) {
alert('版本过低请升级')
}
}
});
},