微信网页授权

2024-02-09 10:08:40

文章目录

一、首先判断是否在微信中打开的网页
- 注：微信网页开发可以在微信开发者工具中进行调试
二、判断链接是否包含code，如果没有，说明微信未授权
三，有code之后，保存code，传给后端，获取身份信息即可
四、链接携带参数的情况
- 我的vue项目是hash模式的，如http://192.168.1.166:8080/#/

今天看一下微信网页授权前端要做的

一、首先判断是否在微信中打开的网页

var ua = navigator.userAgent.toLowerCase();
      if(ua.match(/MicroMessenger\/[0-9]/i)){
        this.wechatMeth()
      }else{
          // this.initView()
          console.log("不是微信");
      }

注：微信网页开发可以在微信开发者工具中进行调试

输入链接回车就好

二、判断链接是否包含code，如果没有，说明微信未授权

、判断链接是否包含code，如果没有，说明微信未授权，我们需要重定向来授权，我这边是静默授权

授权之后的连接格式： https://zxxxxxxx.ssxxxxx.cn/questionnaire/?code=031lzk0w3dmvxddddu1w3OZ3ZS1lzk0b&state=STATE#/?id=10259521790009644635

后面携带的id是重定向的id

这边后端的朋友返回了重定向的路径，当然前端也可以自己拼接，我们后端小朋友给力
官方地址
重定向也就是重新打开页面
window.location.href = res

 let code = this.GetUrlParame("code");
        if (!code) {
          utils.requestGet(api.codeUrl,location.href).then(res=>{ 
            console.log("res",res);
            window.location.href = res
            console.log("地址信息",res);
           })
        }
        else{ 
          console.log("已有code",code);
          this.code = code
          this.initView()
        }

GetUrlParame获取code的方法

// 截取code
    GetUrlParame(parameName) {
      /// 获取地址栏指定参数的值
      /// <param name="parameName">参数名</param>
      // 获取url中跟在问号后面的部分
      var parames = window.location.search;
      // 检测参数是否存在
      if (parames.indexOf(parameName) > -1) {
        var parameValue = "";
        parameValue = parames.substring(
          parames.indexOf(parameName),
          parames.length
        );
        // 检测后面是否还有参数
        if (parameValue.indexOf("&") > -1) {
          // 去除后面多余的参数, 得到最终 parameName=parameValue 形式的值
          parameValue = parameValue.substring(0, parameValue.indexOf("&"));
          // 去掉参数名, 得到最终纯值字符串
          parameValue = parameValue.replace(parameName + "=", "");
          return parameValue;
        }
        return "";
      }
    },

三，有code之后，保存code，传给后端，获取身份信息即可

四、链接携带参数的情况

我的vue项目是hash模式的，如http://192.168.1.166:8080/#/

这里举例子，一般来说放在服务器调试好一点，本地授权调试我还没试过，so，为了不麻烦发布的童鞋，我学习了xshell自己发布测试
假如你的地址是http://192.168.1.166:8080/#/?id=123
重定向之后的链接就是
http://192.168.1.166:8080/?code=031lzk0w3dmvxddddu1w3OZ3ZS1lzk0b&state=STATE#/?id=123
这边获取id的方法如下


    getId() {
      var parames = window.location.href
      console.log('parames', parames)
      // 检测参数是否存在
      var parameValue = ''
      if (parames.indexOf('id') > -1) {
        parameValue = parames.substring(parames.indexOf('id'), parames.length)
        // 检测后面是否还有参数
        if (parameValue.indexOf('&') > -1) {
          // 去除后面多余的参数, 得到最终 "id"=parameValue 形式的值
          parameValue = parameValue.substring(0, parameValue.indexOf('&'))
          // 去掉参数名, 得到最终纯值字符串
          parameValue = parameValue.replace('id' + '=', '')
          return parameValue
        }
        // 问卷id
        this.id = parameValue.replace('id=', '')
      }
    },

码农公寓