企業(yè)微信掃碼登錄網(wǎng)頁(yè)功能實(shí)現(xiàn)代碼
企業(yè)微信掃碼登錄網(wǎng)頁(yè)功能,代碼如下所示:
//jq寫(xiě)法完善版
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>信息平臺(tái)</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("服務(wù)器或網(wǎng)絡(luò)問(wèn)題");
}
});
};
getSessionWX();
function getSession(){
var clientId= $('#state').val();
console.log(clientId);
window.WwLogin({
"id" : "code", //顯示二維碼的容器id
"appid" : "wx86dd16937ec6403f",
"agentid" : "1000014", //企業(yè)微信的cropID,在 企業(yè)微信管理端->我的企業(yè) 中查看
"redirect_uri" :"https://xxxxxxxxx.com", //重定向地址,需要進(jìn)行UrlEncode
"state" : clientId, //用于保持請(qǐng)求和回調(diào)的狀態(tài),授權(quán)請(qǐng)求后原樣帶回給企業(yè)。該參數(shù)可用于防止csrf攻擊(跨站請(qǐng)求偽造攻擊),建議企業(yè)帶上該參數(shù)
"href" : "", //自定義樣式鏈接,企業(yè)可根據(jù)實(shí)際需求覆蓋默認(rèn)樣式。詳見(jiàn)文檔底部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("服務(wù)器或網(wǎng)絡(luò)問(wèn)題");
}
});
},3000);
</script>
</body>
</html>//通用大眾,不完整版,存在用戶(hù)同時(shí)掃碼,用戶(hù)串登錄
<!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", //企業(yè)微信的cropID,在 企業(yè)微信管理端->我的企業(yè) 中查看
"redirect_uri" :"xxxxxxxxxxxx", //重定向地址,需要進(jìn)行UrlEncode
"state" : "3828293919281", //用于保持請(qǐng)求和回調(diào)的狀態(tài),授權(quán)請(qǐng)求后原樣帶回給企業(yè)。該參數(shù)可用于防止csrf攻擊(跨站請(qǐng)求偽造攻擊),建議企業(yè)帶上該參數(shù)
"href" : "", //自定義樣式鏈接,企業(yè)可根據(jù)實(shí)際需求覆蓋默認(rèn)樣式。詳見(jiàn)文檔底部FAQ
});
</script>
</body>
</html>
B.vue完整版<div class="itemLogin WXLogin" v-show="isWXCode == true">
<div class="pcOrWX">
<span class="webTitle webTitleWX">企業(yè)微信掃碼登錄</span>
<span class="iconfont icon-diannao pcCode" @click="pcWXCode(false)" title="手動(dòng)輸入登錄"></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();//輪詢(xún)后臺(tái)數(shù)據(jù)登錄
},3000);
}
},待完善碼過(guò)期后傳入的參數(shù)沒(méi)有變化問(wèn)題,后續(xù)優(yōu)化...
到此這篇關(guān)于企業(yè)微信掃碼登錄網(wǎng)頁(yè)功能的文章就介紹到這了,更多相關(guān)企業(yè)微信掃碼登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
用JS動(dòng)態(tài)設(shè)置CSS樣式常見(jiàn)方法小結(jié)(推薦)
本文給大家總結(jié)了js動(dòng)態(tài)設(shè)置css樣式的常見(jiàn)方法,非常實(shí)用,對(duì)js設(shè)置css樣式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-11-11
JavaScript滾動(dòng)條屬性scrollTop和scrollHeight
在開(kāi)發(fā)中我們常常會(huì)用到判斷滾動(dòng)條是否觸底的邏輯,我一般都會(huì)在網(wǎng)上搜一段代碼,這段代碼有用到scrollTop、clientHeight、 scrollHeight,這篇文章主要給大家介紹了關(guān)于JavaScript滾動(dòng)條屬性scrollTop和scrollHeight的相關(guān)資料,需要的朋友可以參考下2023-11-11
js使用for循環(huán)查詢(xún)數(shù)組中是否存在某個(gè)值
IE8不支持indexOf,因此寫(xiě)一個(gè)for循環(huán)來(lái)判斷是否存在,下面是代碼,經(jīng)測(cè)試還不錯(cuò)2014-08-08
基于bootstrap寫(xiě)的一點(diǎn)localStorage本地儲(chǔ)存
這篇文章主要介紹了基于bootstrap寫(xiě)的一點(diǎn)localStorage本地儲(chǔ)存,需要的朋友可以參考下2017-11-11
JS案例分享之金額小寫(xiě)轉(zhuǎn)大寫(xiě)
這篇文章主要介紹了JS金額小寫(xiě)轉(zhuǎn)大寫(xiě)的方法,需要的朋友可以參考下2014-05-05
JavaScript在IE和Firefox瀏覽器下的7個(gè)差異兼容寫(xiě)法小結(jié)
盡管那需要用長(zhǎng)串的、沉悶的不同分支代碼來(lái)應(yīng)付不同瀏覽器的日子已經(jīng)過(guò)去,偶爾還是有必要做一些簡(jiǎn)單的區(qū)分和目標(biāo)檢測(cè)來(lái)確保某塊代碼能在用戶(hù)的機(jī)器上正常運(yùn)行。2010-06-06
javascript數(shù)組對(duì)象常用api函數(shù)小結(jié)(連接,插入,刪除,反轉(zhuǎn),排序等)
這篇文章主要介紹了javascript數(shù)組對(duì)象常用api函數(shù),結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)數(shù)組的連接、刪除、反轉(zhuǎn)、排序、插入等操作相關(guān)函數(shù)用法,需要的朋友可以參考下2016-09-09
9個(gè)JavaScript評(píng)級(jí)/投票插件
在訪問(wèn)某個(gè)網(wǎng)站或者博客時(shí),如果該站點(diǎn)為用戶(hù)提供內(nèi)容的評(píng)級(jí)或投票功能的話(huà),可以增強(qiáng)用戶(hù)參與的交互性之外,更可以給用戶(hù)一種“主人”的親切感,使得用戶(hù)可以切實(shí)地參與到網(wǎng)站內(nèi)容的評(píng)價(jià)體系中來(lái)。2010-01-01

