PC网页端第三方微信登录_window.open 第三方登录-CSDN博客

本文链接：https://blog.csdn.net/weixin_40466351/article/details/120131200

1、window.open 弹出框

 loginClick(tab, event) {
      if (this.activeName == "third") {
        var top = (window.screen.availHeight - 450) / 2; //获得窗口的垂直位置;
        var left = (window.screen.availWidth - 400) / 2; //获得窗口的水平位置;
        window.open(
          `yourUrl/qrCode.html`,
          "_blank",
          `top=${top},left=${left},width=400,height=450,menubar=no,toolbar=no,status=no,scrollbars=yes`
        );
      }
    },

2、qrcode.html,获取二维码

<html>
    <head>

    </head>
    <body>
        <div style="height:400px">
            <iframe
                frameborder="no"
                border="0"
                marginwidth="0"
                marginheight="0"
                scrolling="no"
                id="qrcode"
                title="Inline Frame Example"
                width="400"
                height="400"
                src=""
            ></iframe>
        </div>
        
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
             function getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
                }
                return false;
            }
            var userId = getQueryVariable("userId");
            console.log('userId: ', userId);
            var params = {
                source: "wechat_open",
            }
            if(userId){
                params.userId = userId
            }
            //生成二维码
            $.ajax({
                    type: "get",
                    url:"yourUrlblade-auth/oauth/render",
                    data:params,
                    success:function(res){
                       $("#qrcode").attr("src",res.data)
                    }
                })
        </script>
    </body>
</html>

3、微信扫码回调页面

<html>
  <head> </head>
  <body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split("=");
          if (pair[0] == variable) {
            return pair[1];
          }
        }
        return false;
      }
      var code = getQueryVariable("code");
      var state = getQueryVariable("state");
      $.ajax({
        type: "get",
        url: "yourUrl/blade-auth/oauth/check/wechat_open",
        data: {
          code: code,
          state: state,
        },
        success: function (res) {
          var bindState = 1;
          var message = "绑定成功";
          if (res.data.binding == "0") {
            bindState = 0;
            tip = res.msg;
          } 
          window.opener.postMessage(
            {
              status: bindState,
              message:message,
              code:code,
              state:state,
              oauthId:res.data.oauthId
            }, '*'
          );
          window.close();
        },
      });
    </script>
  </body>
</html>

4、回调处理页面，根据返回结果，处理各自业务逻辑

created() {
    this.addEventListenerMessage();
  },
destroyed() {
    this.removeEventListener();
  },
  methods: {
    removeEventListener(){
        window.removeEventListener("message",this.eventHandle);
    },
    eventHandle(e){
        let that = this;
        let data = e.data;
         console.log('data.status: ', data.status);
        if (data.status == 1) {
          //获取用户信息
          that.$store.dispatch("LoginBySocial", {
              oauthId:data.oauthId
          }).then(() => {
            //获取用户信息
            getUserInfo().then((res) => {
              let user = res.data.data;
              window.localStorage.setItem("roleId", user.roleId);
              window.localStorage.setItem("deptName", user.deptName);
              window.localStorage.setItem("tenantId", user.tenantId);
              that.$router.push({ path: "/wel/index" });
            });
          });
        } else if (data.status == 0) {
          that.$router.push({ path: "/accountBind", query: {
              oauthId:data.oauthId
          } });
        }
    }
    }