-
企業微信掃碼登錄網頁功能
//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 + "&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); } },
待完善碼過期後傳入的參數沒有變化問題,後續優化...
企業微信掃碼登錄網頁功能
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
美團面試:說說Netty的零拷貝技術?
Java中文社羣
2024-06-07 14:39:30
2024 Web 新特性 - 使用 Popover API 創建彈窗
劉漢貴
2024-06-07 14:33:29
開發視頻會議系統:使用GPU解碼渲染視頻
zhuweisky
2024-06-07 14:33:09
C#/.NET/.NET Core優秀項目和框架2024年5月簡報
追逐時光
2024-06-07 14:28:29
計劃做點事情-還是跳槽
eonie
2024-06-07 14:26:39
好久沒來了-20240607
eonie
2024-06-07 14:26:39
vscode win11 配置go
張博的博客
2024-06-07 14:26:29
構建Arm版jdk1.8 docker基礎鏡像
M_mxy
2024-06-07 14:23:19
微軟RPA工具Power Automate Desktop
2018
2024-06-07 14:20:58
Power Automate Desktop 安裝完,登錄後老是提示one driver 錯誤
Power Automate Desktop 安裝完,登錄後老是提示one driver 錯誤
2018
2024-06-07 14:20:58
k8s網絡問題以及容器跨宿主機通信原理 k8s組件和網絡插件掛掉,演示已有的pod是否正常運行 k8s組件和網絡插件掛掉,演示已有的pod是否正常運行
馬昌偉
2024-06-07 14:19:58
dubbo~全局異常攔截器的使用與設計缺陷
張佔嶺
2024-06-07 14:18:38
24小時熱門文章
-
再談23種設計模式(3):行爲型模式(學習筆記)
-
Power Automate Desktop 安裝完,登錄後老是提示one driver 錯誤
-
微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索
-
微前端學習筆記(1):微前端總體架構概述,從微服務發微
-
985 碩士程序員,空窗 4 個月沒有 Offer!
-
一文搞懂 Spring 循環依賴
-
賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。
-
VScode右鍵打開(添加到右鍵)
-
記一次 .NET某工控視覺自動化系統 卡死分析
-
WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發