开发日记之微信公众号授权|2023-09-25

本文用于记录微信网页授权的相关步骤以及注意点，避免下次又到处找资料。

首先了解微信官方文档中关于接入公众号的大致流程（https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html）：

image.png

网页授权分两种方式：

image.png

配置好了之后，在h5页面中进行授权操作，参考（https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html）：

image.png

通常这时候会由后端将授权链接拼接好了返回给前端，由前端进行跳转授权获取code，拿到code后再将code传给后端，由后端去微信端获取微信提供的access_token，拿到之后后端将对应的access_token存储起来，用于实现调取微信提供的相关接口（这里不确定），再将项目中所需的token（或Id，根据具体项目情况而定）返回给前端，前端用于调用业务接口。

这里详细解析一下前端部分在vue项目中的实现。

首先可以在App.vue中去实现获取授权链接的操作，这样做的原因是有可能项目会有多个入口，比如说首页可以进入，某个商品的详情页需要进入，这个时候如果不在App.vue中定义，那么关于微信授权的逻辑就需要在多个页面重复编写，不是很合理。

具体实现逻辑可参考以下伪代码：

created() {
  // 获取链接上的code参数
  const code = this.getQueryString('code')
  if (code) {
    // 如果此时已经有code，则说明这是授权后的页面，只需要将code传给后台获取对应的业务token，类似于登录的一个操作
  } else {
    // 如果没有，则向后台请求拿到授权地址，
  }
},
methods: {
  getQueryString(name)  {
    const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    const search = window.location.search.split('?')[1] || '';
    const r = search.match(reg) || [];
    return r[2];
  },
}

在上面的else分支中，这里的接口可以做得更灵活一点，由前端提供当前的url作为授权链接参数中的redirect_uri，以便后面直接跳转。

当用户进入首页时，此时的链接是这种格式：http://xxxxx.com/pages/draw/draw，进行微信授权后会携带code参数，形如：http://xxxxx.com/pages/draw/draw?code=888883220000&state=，此时的state也可以根据业务需求储存相关信息，例如：用户A分享一个商品，用户B点击分享出来的链接时，将用户B与用户A进行一个关联，此时就可以通过state进行保存。当然，这只是解决方法之一，我曾经做过的一个项目中当时是这样实现的，理论上应该也可以通过在链接后拼接参数来实现。

当用户需要直接跳转到某个商品详情页，此时的链接是这种格式：http://xxxxx.com/pages/draw/draw?drawId=1，这时用户会先进入else流程去获取授权链接，然后重定向到当前页面，此时进入页面的链接应该变成这种格式：http://xxxxx.com/pages/draw/draw?drawId=1&code=888883220000&state=

注意，整个过程都是没有用到JS-SDK的。