微信开发——网页授权

前期准备

①微信客户端中访问第三方页面，公众号可以通过网页登陆授权，获取微信用户的基本信息（头像、昵称等），实现业务逻辑。一切按照官方文档说明开发。
②安装微信开发者工具。
③一个官方认证的公众号，或者使用微信公众平台的测试公众号。

④如果使用微信公众平台测试号，需要配置JS接口安全域名和网页授权获取用户基本信息，填写正确的域名和端口号。


⑤本文使用测试号来演示网页授权。前端页面使用VSCode的Live Server本地开启服务器，端口号是5500。后端使用Node的express本地开启服务器，端口号是3000。

前端

页面介绍
①回调页面： 你自己写的网页，即http://127.0.0.1:5500/，与之前配置的JS接口安全域名和网页授权获取用户基本信息一致，可以打开在微信平台与非微信平台。
②静默授权链接： 将你的回调页用微信规定的静默授权格式包裹起来。在微信中打开时，会返回展示你的回调页，并且在URL上附加额外的code和state参数。静默授权只能获取到微信用户的openid。
③主动授权链接： 将你的回调页用微信规定的主动授权格式包裹起来。在微信中打开时，弹出主动授权框。用户点击确定授权后，会返回展示你的回调页，并且在URL上附加额外的code和state参数。若用户近期主动授权过，则不会弹出主动授权框，自动刷新跳转到回调页。主动授权能进一步获取到微信用户的头像、昵称等信息。
④在主动授权链接中带上state=auth参数，能够在用户主动授权后的回调页的URL上，知道用户已经主动授权了。

// 回调页
const cbURL = encodeURIComponent(`http://127.0.0.1:5500/`);
// 静默授权链接
const shareURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${cbURL}&response_type=code&scope=snsapi_base#wechat_redirect`;
// 主动授权链接
const authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${cbURL}&response_type=code&scope=snsapi_userinfo&state=auth#wechat_redirect`;

二次分享与code参数
①code参数是微信平台附加在回调页URL上的随机码，用于获取当前微信用户的access_token。随机码只能用一次，5分钟未使用自动过期。原地刷新页面也会导致code失效，需要重定向静默授权链接，重新获取随机码。
②非微信端打开的回调页分享到微信为首次分享，首次分享的分享链接即为静默授权链接。
③微信端打开的回调页，通过微信浏览器右上角的···继续进行分享为二次分享，需要调用微信的SDK，参见我的另一篇博客《微信开发——开放标签》。
④二次分享的链接应该设置为回调页链接http://127.0.0.1:5500/。若其他用户在微信平台打开二次分享的链接，那么就无法进行主动授权。所以需要在回调页判断微信平台，并在无code参数时，重定向至静默授权链接。
记录并判断用户的主动授权
①从URL的state参数或localStorage中判断用户曾经是否主动授权过。
②若用户完成主动授权，则在localStorage中持久化存入标志信息，建议设置一个过期时间，可以借助storejs第三方库。

// 判断微信平台
const ua = navigator.userAgent.toLowerCase();
const isWechat = /micromessenger/.test(ua);
// 解析URL的query参数
function query() {
  const map = {};
  const params = window.location.search.substring(1).split("&");
  params.forEach((item) => {
    const temp = item.split("=");
    map[temp[0]] = temp[1];
  });
  return map;
}
// 判断用户是否曾经主动授权过
const auth = localStorage.getItem("Auth") || query().state || "";
const code = query().code || "";
const lastCode = sessionStorage.getItem("vercode");
// 在微信平台中
if (isWechat) {
  // 储存本次code
  sessionStorage.setItem("vercode", code);
  // 二次分享无code，保证每次页面刷新，均存在有效的code，
  if (code === lastCode || !code) {
    window.location.replace(shareURL);
  } else {
    // 发起请求（下一节）
  }
}

发起请求
①当回调页在微信浏览器中记载完毕时，需要做的第一件事就是发起一个请求，向后端发送code参数，并判断用户是否主动授权过，从后端获取用户的基本信息。
②若用户未曾主动授权则只能获取到openid，主动授权过才能获取到更多基本信息。

// AJAX请求
const ajax = {
  get(url) {
    return new Promise((resolve, reject) => {
      let xhr = new XMLHttpRequest();
      xhr.open("GET", url);
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            const res = JSON.parse(xhr.response);
            if (!res.code) resolve(res.data);
            else reject(res);
          }
        }
      };
    });
  },
};
// 1是静默授权，0是主动授权
ajax
  .get(`${location.protocol}//${location.hostname}:3000/auth?code=${code}&type=${auth ? 0 : 1}`)
  .then((res) => {
    UserInfo.openId = res.openId;
    if (res.UserName && res.UserPhoto) {
      UserInfo.UserName = res.UserName;
      UserInfo.UserPhoto = res.UserPhoto;
      // 主动授权后，储存记录
      localStorage.setItem("Auth", 1);
    }
  })
  .catch((e) => console.log(e.message));

引导用户主动主动授权
①在页面中放置一个按钮用于交互，绑定事件，出发主动授权，弹出主动授权框。已主动授权过的用户则点击无效。

const authBtn = document.getElementById("authBtn");
// 按钮点击事件，获取主动授权
const handleAuth = () => {
  if (!auth) {
    window.location.replace(authURL);
  }
};
authBtn.addEventListener("click", handleAuth);

后端

express搭建一个服务器
①由于前后端不在一个服务器上，所以需要解决跨域的问题。

const express = require("express");
const app = express();
// CORS跨域设置
app.all("*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", " 3.2.1");
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});
app.listen(3000, () => console.log("服务器已开启"));

通过code换取access_token和openid
①前端会将code传给后端，后端需要用该code向微信获取access_token和openid等信息。
②每个用户对于同一公众号的openid都是唯一固定不变的。
③静默授权的流程到此结束。

const https = require("https");
const getAccessToken = (code) => {
  return new Promise((resolve, reject) => {
    const URL = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appId}&secret=${appSecret}&code=${code}&grant_type=authorization_code`;
    https
      .get(URL, (res) => {
        let rawData = "";
        res.on("data", (data) => (rawData += data));
        res.on("end", () => resolve(JSON.parse(rawData)));
      })
      .on("error", (e) => console.log(e.message));
  });
 };

通过access_token和openid获取UserInfo
①用户主动授权后，通过上一步获取的access_token和openid可以进一步获取用户的基本信息。

const getUserInfo = (accessToken, openId) => {
  return new Promise((resolve, reject) => {
    const URL = `https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openId}&lang=zh_CN`;
    https
      .get(URL, (res) => {
        let rawData = "";
        res.on("data", (data) => (rawData += data));
        res.on("end", () => resolve(JSON.parse(rawData)));
      })
      .on("error", (e) => console.log(e.message));
  });
};

部署GET接口
①根据前端传的type参数确定本次获取的是静默授权信息还是主动授权信息，返回用户基本信息。

app.get("/auth", function (req, res) {
  const wxAuth = async () => {
    // 解析query参数，字符串类型
    const { code, type } = req.query;
    const token = await getAccessToken(code);
    // 请求报错
    if (!token.access_token) {
      return res.send({ code: token.errcode, message: token.errmsg });
    }
    // 静默授权
    if (Number(type)) {
      return res.send({
        code: 0,
        message: "success",
        data: { openId: token.openid },
      });
      // 主动授权
    } else {
      const UserInfo = await getUserInfo(token.access_token, token.openid);
      // 请求报错
      if (!UserInfo.openid) {
        return res.send({ code: UserInfo.errcode, message: UserInfo.errmsg });
      }
      return res.send({
        code: 0,
        message: "success",
        data: {
          openId: UserInfo.openid,
          UserName: UserInfo.nickname,
          UserPhoto: UserInfo.headimgurl,
        },
      });
    }
  };
  wxAuth();
});