微信公众号网页授权

简介

如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。

网页授权的两种方式

• 静默授权

  以snsapi_base为 scope 发起的网页授权，是用来获取进入页面的用户的 openid 的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）

• 非静默授权

  以snsapi_userinfo为 scope 发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

授权后重定向回调地址的两种方式

• 方式一：这里以vue项目为例，回调地址直接写项目访问地址。对vue-router中进行改造，在路由钩子中进行判断。

router.beforeEach(async (to, from, next) => {
  const isDevMode = process.env.NODE_ENV === 'development';
  // const isDevMode = false;
  if (!isDevMode) {
    const openid = localStorage.getItem('openid');
    if (!openid) {
      const code: any = getQueryString('code');
      if (code) {
        await getOpenid(code, next);
      } else {
        location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
          process.env.VUE_APP_APPID
        }&redirect_uri=${encodeURIComponent(
          url
        )}&response_type=code&scope=snsapi_base&state=111&connect_redirect=1#wechat_redirect`;
      }
    } else {
      next();
    }
  } else {
    next();
  }
});

// 换取openid
async function getOpenid(code: string, callback: any) {
  try {
    const res = await getOenIdByCode(code);
    const data = res.data;
    if (data.errorCode == '0') {
      const result = data.data;
      localStorage.setItem('openid', result.openid);
      location.href = url;
    } else {
      setTimeout(() => {
        callback();
      }, 2000);
    }
  } catch (e) {
    console.log(e);
    setTimeout(() => {
      callback();
    }, 2000);
  }
}

• 方式二：新加一个专门用来授权的网页，跳转过来后进行逻辑判断，请求后台接口