企业微信扫码登录网页功能实现代码
时间：2022-05-21 10:49:37|栏目：JavaScript代码|点击： 次
企业微信扫码登录网页功能，代码如下所示：
//jq写法完善版
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>信息平台</title>
<script src="http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
#code{
/*wrp_code_rl_btn*/
width: 100px;
height: 100px;
}
iframe img{
width: 100px;
height: 100px;
}
</style>
</head>
<body >
<input type="text" id="state"/>
<div id="code" onclick="getSessionWX8()"></div>
<script>
function getSessionWX(){
let url = 'https://xxxxxxxxxxxxx.com/getState';
let vm=this;
$.ajax({
url: url,
method: 'get',
dataType: 'json',
success: function(data){
$('#state').val(data.payload.results.state);
getSession();
},
error:function(){
// alert("服务器或网络问题");
}
});
};
getSessionWX();
function getSession(){
var clientId= $('#state').val();
console.log(clientId);
window.WwLogin({
"id" : "code", //显示二维码的容器id
"appid" : "wx86dd16937ec6403f",
"agentid" : "1000014", //企业微信的cropID，在 企业微信管理端->我的企业 中查看
"redirect_uri" :"https://xxxxxxxxx.com", //重定向地址，需要进行UrlEncode
"state" : clientId, //用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议企业带上该参数
"href" : "", //自定义样式链接，企业可根据实际需求覆盖默认样式。详见文档底部FAQ
});
}
setInterval(function(){
var clientId= $('#state').val();
let url = 'https://xxxxx.com/getSessionId?state=' + clientId;
$.ajax({
url: url,
method: 'get',
dataType: 'json',
success: function(data){
console.log(data);
// window.location.href='/index.html';
},
error:function(){
//alert("服务器或网络问题");
}
});
},3000);
</script>
</body>
</html>
//通用大众，不完整版，存在用户同时扫码，用户串登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>1111</title>
<script src="http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body >
<div id="code" ></div>
<script>
window.WwLogin({
"id" : "code", //显示二维码的容器id
"appid" : "xxxxxx",
"agentid" : "xxxxxx", //企业微信的cropID，在 企业微信管理端->我的企业 中查看
"redirect_uri" :"xxxxxxxxxxxx", //重定向地址，需要进行UrlEncode
"state" : "3828293919281", //用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议企业带上该参数
"href" : "", //自定义样式链接，企业可根据实际需求覆盖默认样式。详见文档底部FAQ
});
</script>
</body>
</html>
B.vue完整版
<div class="itemLogin WXLogin" v-show="isWXCode == true">
<div class="pcOrWX">
<span class="webTitle webTitleWX">企业微信扫码登录</span>
<span class="iconfont icon-diannao pcCode" @click="pcWXCode(false)" title="手动输入登录"></span>
</div>
<div id="code" @click="getSessionWX1(1)">
<iframe id="iframe1" :src="WXCodeUrl" frameborder="0" scrolling="no" width="320px" height="313px"></iframe>
</div>
</div>
getSessionWX(){
let vm=this;
let url = 'https://xxxxx.com/getState';
$.get(url,function(data){
var data = JSON.parse(data);
//https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=wx86dd16937ec6403f&agentid=1000014&redirect_uri=https://xxxxxx.com/loginPCByWx&state=5245fc29-ff12-459d-b880-9f16047ba8cd&login_type=jssdk
vm.stateWX = data.payload.results.state;
var cssUrl = "https://xxxxx.com/static/css/wxerweima.css";
vm.WXCodeUrl = "https://open.work.weixin.qq.com/wwopen/sso/qrConnect?appid=wx86dd16937ec6403f&agentid=1000014&redirect_uri=https://xxxxxx.com/loginPCByWx&state=" + vm.stateWX + "&href=" + cssUrl + " rel="external nofollow" &login_type=jssdk";
},"text");
},
getSessionWXLogin(){
let vm=this;
let url = 'https://xxxxxx.com/getSessionId?state=' + vm.stateWX;
$.get(url,function(data){},"text");
},
pcWXCode(val){
let vm = this;
this.isWXCode = val;
if(vm.isWXCode == true){
setInterval(function(){
vm.getSessionWXLogin();//轮询后台数据登录
},3000);
}
},
待完善码过期后传入的参数没有变化问题，后续优化...
栏 目：JavaScript代码
下一篇：TypeScript命名空间讲解
本文标题：企业微信扫码登录网页功能实现代码
本文地址：http://www.codeinn.net/misctech/202493.html
