开发资料

业务场景

在微信环境中需要识别微信用户的唯一身份，控制设备许可。

主体流程

打开H5页面，如url上面无code,则跳转微信授权，获得code到url上；如有code,则发送请求给后端换取openid；需要注意code过期问题，表现为用户在刷新页面时，使用过期code给后端获取openid。
流程图作者：简书周星星的学习笔记

微信配置

配置对应公众号的微信授权权限，注意目前只能放2个域名

代码实现

项目中选择的授权方式为snsapi_base，用户无需手动授权

if (ua.match(/MicroMessenger/i) == "micromessenger") {
  window.isWeChat = true;
} else {
  window.isWeChat = false;
}
if(window.isWeChat){
  //存储微信配置
  if (!window.__retail_wx_config) {
    window.__retail_wx_config = {};
  }
  //code过期规则：使用过或5分钟内未使用
  let wxCode = new cb.utils.queryString(window.location.search).query.code;
  if (wxCode) {
    window.__retail_wx_config.wxCode = wxCode;
    console.log("wxCode=====", wxCode);
  }
 //如果url中没有code,则跳转微信授权
 if (!wxCode) {
    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${obj.appId}&redirect_uri=${window.location.origin}&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect`
} else {
    //获取url上的微信code，换取openid
    if (localStorage.getItem('lastWxCode') == wxCode) {
          //防止有code情况刷新界面，code过期会报错
          return;
    } else {
        //code传给后端，换取openid
        const getOpenIdConfig = {
          //openid请求配置
          url: "bill/weChatOfficialAccount/getWeChatOpenId",
          method: "POST",
          params: { code: window.__retail_wx_config.wxCode || "" },
        };
        proxy(getOpenIdConfig)
          .then(function (openIdJson) {
            if (openIdJson&&openIdJson.data&&openIdJson.data.openid) {
              //存储openid到缓存中
              localStorage.setItem("wxOpenId", openIdJson.data.openid)
            } else {
              cb.utils.alert("获取openId失败:"+(openIdJson&&openIdJson.message?openIdJson.message:""))
            }
          localStorage.setItem('lastWxCode', wxCode);
        }).catch(err => {
          console.log(err,"获取openid失败")
       })
    }
 }
}

总结

重要判断逻辑如下，给需要的朋友参考。

判断当前是否为微信环境
URL上面无code则跳转授权
判断当前code是否与上一次code相同
传递code给后端换取openid

参考文章

微信网页授权登录流程总结

微信JSSDK获取openId流程