公众号授权网页获取 openid

参考官方文档的介绍，网页授权流程分为四步：

1. 引导用户进入授权页面同意授权，获取 code；
2. 通过 code 换取网页授权 access_token（与基础支持中的 access_token 不同）；
3. 如果需要，开发者可以刷新网页授权 access_token，避免过期；
4. 通过网页授权 access_token 和 openid 获取用户基本信息（支持 unionid 机制）。

网页授权有两种 scope，以 snsapi_base 为 scope 发起的网页授权，是用来获取进入页面的用户 openid，同时是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面），具体步骤如下：

第一步：用户同意授权，获取 code
访问页面的时候，重定向到授权页面（https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect），授权完成页面将跳转至 redirect_uri/?code=CODE&state=STATE。

第二步：通过 code 换取网页授权 access_token
本步骤中获取到网页授权 access_token 的同时，也获取到了 openid。
注意：由于公众号的 secret 和获取到的 access_token 安全级别都非常高，必须只保存在服务端，不允许传给客户端。因此，服务器发起获取 openid 的接口：

window.onload = function() {
    var localUrl = window.location.href;
    var code = getQueryString('code');
    var APPID = 'xxxxxxx';
    if(code == null || code == '' ) {
        var scopeUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=" + encodeURIComponent(localUrl) + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect"
        window.location.href = scopeUrl;
    } else {
        console.log(code)
        // 调用服务端的通过 code 获取 openid 接口
        getWebOpenId(code).then(function(res) {
            console.log(res.result.openid)
        });  }

}

第三步：服务端获取 openid

相关代码如下所示：

// appid 和 appsecret 存储在服务端
var appId = config.appId,
    appSecret = config.appSecret;

// 公众号授权网页通过 code 获取 openid
router.post('/getCode', function(req, res) {
  console.log(req.body);
  var url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + appId + '&secret='+ appSecret +'&code=' + req.body.code + '&grant_type=authorization_code';
  axios.get(url)
    .then(function(response) {
      console.log('response', response.data);
      res.json(response.data)
    })
    .catch(function(err) {
      console.log(err)
      res.json(err)
    })
    .then(function() {

    })
})

获取的 openid 如下图所示：

网页获取到的 openid