企業(yè)微信掃碼登錄網(wǎng)頁功能實現(xiàn)代碼
企業(yè)微信掃碼登錄網(wǎng)頁功能,代碼如下所示:
//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("服務(wù)器或網(wǎng)絡(luò)問題"); } }); }; 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, //用于保持請求和回調(diào)的狀態(tài),授權(quán)請求后原樣帶回給企業(yè)。該參數(shù)可用于防止csrf攻擊(跨站請求偽造攻擊),建議企業(yè)帶上該參數(shù) "href" : "", //自定義樣式鏈接,企業(yè)可根據(jù)實際需求覆蓋默認(rè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ò)問題"); } }); },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", //企業(yè)微信的cropID,在 企業(yè)微信管理端->我的企業(yè) 中查看 "redirect_uri" :"xxxxxxxxxxxx", //重定向地址,需要進(jìn)行UrlEncode "state" : "3828293919281", //用于保持請求和回調(diào)的狀態(tài),授權(quán)請求后原樣帶回給企業(yè)。該參數(shù)可用于防止csrf攻擊(跨站請求偽造攻擊),建議企業(yè)帶上該參數(shù) "href" : "", //自定義樣式鏈接,企業(yè)可根據(jù)實際需求覆蓋默認(rè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="手動輸入登錄"></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();//輪詢后臺數(shù)據(jù)登錄 },3000); } },
待完善碼過期后傳入的參數(shù)沒有變化問題,后續(xù)優(yōu)化...
到此這篇關(guān)于企業(yè)微信掃碼登錄網(wǎng)頁功能的文章就介紹到這了,更多相關(guān)企業(yè)微信掃碼登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
用JS動態(tài)設(shè)置CSS樣式常見方法小結(jié)(推薦)
本文給大家總結(jié)了js動態(tài)設(shè)置css樣式的常見方法,非常實用,對js設(shè)置css樣式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-11-11JavaScript滾動條屬性scrollTop和scrollHeight
在開發(fā)中我們常常會用到判斷滾動條是否觸底的邏輯,我一般都會在網(wǎng)上搜一段代碼,這段代碼有用到scrollTop、clientHeight、 scrollHeight,這篇文章主要給大家介紹了關(guān)于JavaScript滾動條屬性scrollTop和scrollHeight的相關(guān)資料,需要的朋友可以參考下2023-11-11js使用for循環(huán)查詢數(shù)組中是否存在某個值
IE8不支持indexOf,因此寫一個for循環(huán)來判斷是否存在,下面是代碼,經(jīng)測試還不錯2014-08-08基于bootstrap寫的一點localStorage本地儲存
這篇文章主要介紹了基于bootstrap寫的一點localStorage本地儲存,需要的朋友可以參考下2017-11-11JavaScript在IE和Firefox瀏覽器下的7個差異兼容寫法小結(jié)
盡管那需要用長串的、沉悶的不同分支代碼來應(yīng)付不同瀏覽器的日子已經(jīng)過去,偶爾還是有必要做一些簡單的區(qū)分和目標(biāo)檢測來確保某塊代碼能在用戶的機(jī)器上正常運行。2010-06-06javascript數(shù)組對象常用api函數(shù)小結(jié)(連接,插入,刪除,反轉(zhuǎn),排序等)
這篇文章主要介紹了javascript數(shù)組對象常用api函數(shù),結(jié)合實例形式總結(jié)分析了javascript針對數(shù)組的連接、刪除、反轉(zhuǎn)、排序、插入等操作相關(guān)函數(shù)用法,需要的朋友可以參考下2016-09-09