微信公众号授权登录，微信sdk的使用，及ios配置微信sdk失败-CFANZ编程社区

微信公众号授权登录，微信sdk的使用，及ios配置微信sdk失败

前期配置：（微信开放平台）
需要配置项：服务配置、业务域名、js接口安全域名、网页授权域名

1 服务配置

由后端提供url和token进行配置
在这里插入图片描述
2 业务域名、js接口安全域名、网页授权域名
配置需要授权的网站域名地址（前台页面地址），不需要加http以及子路径

3 授权流程
1）获取code

//微信授权
          let redirect_uri = encodeURI(window.location.href).split('#')[0],
          appid = "";
          let wx_url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
          window.location.href = wx_url;

授权成功后，路径会跟上code
2）根据code去请求后端接口获取access_token

3）配置sdk，也需要请求后端接口进行配置

// 获取微信授权配置
    async getWxConfig(){      
      const res = await getWxConfig({url:encodeURI(window.location.href.split('#')[0])});
      if(res.code ===0){
        this.jsApiList=['checkJsApi','scanQRCode','getLocation','updateAppMessageShareData','updateTimelineShareData','openLocation'];
        this.configData={
          debugger:true,
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp , // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature,// 必填，签名
          jsApiList: this.jsApiList // 必填，需要使用的JS接口列表
        }
        this.$wx.config(this.configData);//vue中使用，已将微信sdk挂在到vue原型链
    },

注：当使用hash模式时，路径应该传#以前的路径进行配置，如果使用的history需要传全路径即：encodeURI(window.location.href)，使用history模式是在ios手机上如果初始进来路由发生了重定向发生变化的（即使是参数变化了）就会配置错误（原因是ios会记录第一次进入页面的地址，如果在配置之前路径就重定向了，此时配置业务地址和ios记录的不一致，本人还遇到一个坑即使是路径没有重定向但是通过二维码扫码进入我的链接也会配置失败），所以在有此场景建议用hash模式（不会记录#以后的）

0 条评论