• 企业微信扫码登录网页功能


    //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);
                }
             },
    
    
    
     
    待完善码过期后传入的参数没有变化问题,后续优化...



  • 相关阅读:
    跨域资源共享 CORS 详解
    Vue.js 与 Laravel 分离
    Laravel 5.4+Vue.js 初体验:Laravel下配置运行Vue.js
    移动端web及app设计尺寸
    另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
    vue2.0 keep-alive最佳实践
    教你用Cordova打包Vue项目
    oracle_数据处理
    oracle_集合函数
    oaracel 函数_行转列
  • 原文地址:https://www.cnblogs.com/cx709452428/p/9633337.html
Copyright © 2020-2023  润新知