微信扫码登录

前言：

该篇的创作时间为2020年10月18日15:36

逻辑思路：

1. 点击按钮时，显示二维码，写入缓存，标记正在微信扫码登陆（为什么要标记？因为welink扫码重定向链接也会携带code，两种扫码点击事件触发时，标记不同的登陆方式）。
2. 扫码后，重定向，路由拦截跳转到登陆页，链接还是会带code。
3. 在登录页加载时，读取链接的code和缓存，用code向后端发送请求，如果返回token，执行登陆方法。如果没有返回token，则把返回的openId写入缓存，跳转至微信注册绑定页面。
4. 在注册绑定页注册绑定时，发送请求时传参带上账号密码等以及openId，注册绑定成功后，执行登陆方法。

我写了个xmind方便理解

第一步：显示二维码

1.写一个div容器，要有id。

<div  id="login_container" v-show="showBack">
</div>

2.引入微信提供的js文件

<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

3.点击微信扫码登陆时，实例JS对象

//wechat扫码登录 生成二维码
      wechatLogin(){ 
   
        this.showBack = true;
        var bast64css = 'data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O2hlaWdodDoyMDBweH0NCi5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMjAwcHh9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lfQ0KaWZyYW1lIHtoZWlnaHQ6IDMyMnB4O30NCg==';
        let url = config.redirect_uri;
        localStorage.setItem('appLoginType',1)
        url = encodeURIComponent(url)
        var obj = new WxLogin({ 
   
          self_redirect:false,//是否在显示的二维码区域跳转，默认是false
          id:"login_container",     //二维码的id容器
          appid: "wx416e72d9944eff03",   //应用唯一标识 ，在微信开放平台提交应用审核通过后获得，后端提供
          scope: "snsapi_login",    //应用授权作用域，网页应用目前仅填写snsapi_login
          redirect_uri: url,    //重定向地址
          state: "<{$state}>",    //用于保持请求或回调状态，授权请求后原样带回给第三方。可设置为简单的随机数加上session进行校验。
          style: "white",   //只有white和black
          href: bast64css   //自定义样式链接，第三方可根据需求覆盖默认样式。
        });
      },

解释一下，我把重定向地址redirect_uri写进了config.js里，这样工作人员可以在外部修改重定向地址

var config = { 
   
  showAppWechat : 1,   //登录页是否显示微信扫码登录, 1：显示，0：不显示
  redirect_uri:"http://"+"nat.ubainsyun.com:30035",   //微信扫码登录使用，根据微信开发平台的授权回调

域填写。
};
Ps:前端要映射ip，假设你连接了后端的ip，跑的项目端口号是8080，ip映射的对应ip后叫30050，那么你的映射ip地址就是
nat.ubainsyun.com:30050

后端填写授权码回调域时，填映射的ipnat.ubainsyun.com:30050，不要带http://，要填根目录，不要在链接后面加上/login之类的。

前端本地测试时，不要用localhost，要用映射的ip粘贴到浏览器进行调试。

重定向失败怎么办？
按照这样写，基本是ok了，二维码能出来。你以为这样就结束了吗？No No No~
我还遇到了重定向回调不成功的问题，意思是导致扫码后页面不会跳转。
只要在created加上以下这一段代码就行了，不要想太多，直接复制粘贴，不用改任何东西，我也看不太懂。大概意思就是把二维码iframe里的一个参数设置一下设为可跳转。

//解决微信扫码登录回调不跳转问题
    !(function(a, b, c) { 
   
      function d(a) { 
   
        var c = "default";
        a.self_redirect === !0
          ? (c = "true")
          : a.self_redirect === !1 && (c = "false");
        var d = b.createElement("iframe"),
          e =
            "https://open.weixin.qq.com/connect/qrconnect?appid=" +
            a.appid +
            "&scope=" +
            a.scope +
            "&redirect_uri=" +
            a.redirect_uri +
            "&state=" +
            a.state +
            "&login_type=jssdk&self_redirect=" +
            c +
            "&styletype=" +
            (a.styletype || "") +
            "&sizetype=" +
            (a.sizetype || "") +
            "&bgcolor=" +
            (a.bgcolor || "") +
            "&rst=" +
            (a.rst || "");
        (e += a.style ? "&style=" + a.style : ""),
          (e += a.href ? "&href=" + a.href : ""),
          (d.src = e),
          (d.frameBorder = "0"),
          (d.allowTransparency = "true"),
          (d.sandbox = "allow-scripts allow-top-navigation allow-same-origin"),//修改的代码在此处，
          (d.scrolling = "no"),
          (d.width = "300px"),
          (d.height = "400px");
        var f = b.getElementById(a.id);
        (f.innerHTML = ""), f.appendChild(d);
      }
      a.WxLogin = d;
    })(window, document);

其实扫码和重定向的问题解决了，后面就没什么太大的问题了，不过为了方便大家，还是继续大概写一下。不能直接复制粘贴就能用了，里面有些代码用到了公共js文件，还是要自己手动调整一下。

第二步：

跳转到登录页后，在created里面，判断是否是微信扫码登录

//获取链接参数
 let code = getvar(window.location.href, "code");
 var appLoginType = localStorage.getItem("appLoginType");
 //微信扫码登录
 if (code!="undefined" && appLoginType == 1) { 
   
     this.getUserInfo_wechat();
 }

Ps：贴一下不知道谁写的我搬到common.js里的getvar方法

//获取链接参数
    getvar(url, par) { 
   
        var urlsearch = url.split('?');
        var pstr = urlsearch[1].split('&');
        for (var i = pstr.length - 1; i >= 0; i--) { 
   
            var tep = pstr[i].split("=");
            if (tep[0] == par) { 
   
                return tep[1];
            }
        }
        return (false);
    },

第三步：

用code发送请求获取token来登录，token获取失败，就根据返回的openId进行注册绑定然后再登录。

//微信扫码登陆获取token
  getUserInfo_wechat() { 
   
      let code = getvar(window.location.href, "code");//获取链接的code
      request({ 
   
          url:"api/wechat/login",
          method:"post",
          headers: { 
   
              'Content-type': 'application/x-www-form-urlencoded'
          },
          params: { 
   
              code:code
          }
      })
      .then(res=>{ 
   
          localStorage.removeItem("appLoginType")//移除微信扫码登录标志
          if(res.data.code =="200"){ 
   
              if (res.data.result.token) { 
   
                  console.log("wechat登陆", res)
                  var token = res.data.result.tokenHead + res.data.result.token
                  localStorage.setItem("token", token);
                  Common.getUserInfo();//使用公共方法的登录
              }
              else{ 
   
                  localStorage.setItem("wechatParams",res.data.result.openId)     //微信绑定用的openId
                  console.log("wechat，未注册",res)
                  this.$message({ 
   
                      message: res.data.result.msg,
                      type: "info",
                      center: this.projectCode == "Korea"
                  });
                  window.location.href = "http://"+window.location.host +"/#/wxregister/wxreg";//跳转至之注册绑定页
              }
          }
      })
  },

还有问题就参考微信开放文档
https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

ps:后来一年后2021年10月我完成了企业微信扫码登录，逻辑和微信扫码基本一致，只是有略微差异

今天的文章微信扫码登录分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。