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

前期配置：（微信公众平台）
需要配置项：设置ip白名单、服务配置、业务域名、js接口安全域名、网页授权域名（获取到AppID和AppSecret）

1 设置ip白名单
通过开发者ID及密码调用获取access_token接口时，需要设置访问来源IP为白名单（一个公众号可换行设置多个）
2 服务配置
由后端提供url和token进行配置

3 业务域名、js接口安全域名、网页授权域名
配置需要授权的网站域名地址（前台页面地址），不需要加http以及子路径
业务域名：配置你的程序地址域名

JS安全域名：配置不正确则影响你公众号网页的jssdk使用（比如无法获取用户的地理位置、收货地址等）
网页授权域名：配置不正确则用户授权访问会报错，无法进入到网址页面在这里插入图片描述

4 授权流程
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;
1
2
3
4
5

授权成功后，路径会跟上code
跳转回调redirect_uri，应当使用https链接来确保授权code的安全性

注：scope有snsapi_base和snsapi_userinfo两种模式
1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）
2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。（对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是scope为snsapi_userinfo，也是静默授权，用户无感知。）
3、用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其他微信接口，都是需要该用户（即openid）关注了公众号后，才能调用成功的。

2）根据code去请求后端接口获取access_token和refresh_token

注：2022 年 7 月 12 日官方对微信网页授权能力调整生效，如果网页开发的需求时用户一进入程序，就调取了授权，此时会进入快照模式（快照页内也无法使用微信其它 JS-SDK 的能力）这样调整的目的就是不强制用户允许网页获取用户信息后才能使用网页服务，如果需要取消进入快照模式，可以自己写一个授权弹出或页面让用户去确认。

5 微信jssdk授权
1）配置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原型链
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注：vue单页面开发时当使用hash模式，路径应该传#以前的路径进行配置，如果使用的history需要传全路径即：encodeURI(window.location.href)，使用history模式是在ios手机上如果初始进来路由发生了重定向发生变化的（即使是参数变化了）就会配置错误（原因是ios会锁定第一次进入页面的地址，如果在配置之前路径就重定向了，此时请求的url签名地址和ios锁定的不一致，当页面发生跳转时去使用js-sdk会提示签名错误，原因就是你所请求的url签名地址和浏览器执行jweixin-1.x.x.js时锁定的地址 不一致。ios下解决这个问题需要记录用户第一次进入的url进行授权，可以将第一次进入的url保存到store里面；使用history在安卓手机上每次路由变化，发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)