网页添加企业微信扫码登录-前端
created(){
//创建二维码
this.createWXQRCode();
//调取微信登录
this.wxLoginFunction();
}
1.在页面中创建二维码
createWXQRCode() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js';
const wxElement = document.body.appendChild(s);
// 调用企业微信二维码方法
wxElement.onload = function() {
var wwLogin = new WwLogin({
id: 'weChat',
appid: "企业微信的CorpID,在企业微信管理端查看",
agentid: "授权方的网页应用ID,在具体的网页应用中查看",
redirect_uri: encodeURIComponent( 'https://www.xxx.com/login'),//重定向地址,需要进行UrlEncode
href: '',
lang: 'zh'
});
};
}
2.扫码成功后会根据redirect_uri重定向地址跳回网页,获取url地址中传递的code值
getQueryVariable(variable) {
let query = window.location.search.substring(1);
let vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (pair[0] == variable) {
return pair[1];
}
}
return false;
}
3.根据url中是否存在code值调取登录接口
wxLoginFunction(){
let code = this.getQueryVariable('code');
if(code ){
//调登录接口
(登录接口).then(response=>{
//登录成功-进入首页
})
}
}
4.后台流程
后台根据前端传递的code值,调取企业微信的接口,获取访问用户身份