admin管理员组文章数量:1568679
网页添加企业微信扫码登录-前端
- 1.在页面中创建二维码
- 2.扫码成功后会根据redirect_uri重定向地址跳回网页,获取url地址中传递的code值
- 3.根据url中是否存在code值调取登录接口
- 4.后台流程
created(){
//创建二维码
this.createWXQRCode();
//调取微信登录
this.wxLoginFunction();
}
1.在页面中创建二维码
createWXQRCode() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://wwcdn.weixin.qq/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/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值,调取企业微信的接口,获取访问用户身份
具体详情,请参考–》企业微信API官网
版权声明:本文标题:网页添加企业微信扫码登录-前端 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1727641425a1123332.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论