vue-h5微信公众号 网页授权登录（静默授权）

公司需求：h5网站支持微信授权登录

1.微信只支持微信浏览器进行授权登录。所以我们先判断浏览器，如果是微信浏览器，那么显示微信图标，可以点击微信图标授权登录。如果不是则不显示图标。

// 判断是否是微信浏览器function is_weixin(){
   var ua = navigator.userAgent.toLowerCase();
   if(ua.match(/MicroMessenger/i)=="micromessenger") {
       return true;
   } else {
       return false;
   }}

2.前置条件

• 需要在微信公众平台注册账号

• 服务号需要微信认证 否者接口权限无法使用

• 如果使用unionid，需要先将公众号绑定到微信开放平台帐号后，才会出现该字段。

3.微信授权分为静默授权（snsapi_base）和非静默授权（snsapi_userinfo）

我们选择静默授权

静默授权流程：以snsapi_base为scope发起网页授权得到code，再用公众号的appid和secret获取微信公众号的全局唯一凭证access_token，然后用拿到的access_token调用公众号的“用户管理接口”中的“获取用户信息接口”获得unionID。

前端需要做的：
以snsapi_base为scope发起网页授权得到code，调用后台接口获取unionId
核心代码如下：

if (this.isWeiXin()) {
    const code = this.getUrlParam("code"); // 截取路径中的code
    if (code == null || code === "") {
        let url = "";
        let userAgent = navigator.userAgent;
        if (userAgent.includes("iPhone") || userAgent.includes("iPad")) {
            url = sessionStorage.getItem("originUrl");
        } else {
            url = window.location.href;
        }
        window.location.href =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=你申请的appkey&redirect_uri=" +
            encodeURIComponent(url) +
            "&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";
    } else {
    }

    if (code != "" && code != null) {
        this.wxCode = code;
        console.log(code)
        this.getOpenid(code)
    }}