基于Node.js的微信JS-SDK后端接口实现（三）

微信公众号开发之五微信网页授权

开始之前建议先阅读微信官方文档 微信公众号开发之五微信网页授权

一.网页授权的作用

我们一般会自己开发web应用中加入授权，用来获取用户的openid(或unionid)，来实现用户体系。比如：我们常做的基于微信的用户体系，利用openid做唯一的身份识别。

二.微信网页授权包括2种形式：

1. 静默授权。只能获取到openid;用户不用手动点击确定，直接跳到回调页面。code=snsapi_base

2. 手动授权。可以获取所有的用户信息；会出现上图的页面，用户需手动确定后，才会跳到回调页面。code=snsapi_userinfo

838315728-5bd94499b066b_articlex.png

三.授权也要access_token

网页授权access_token与我们前面说的接口access_token不是同一个东西，网页授权的access_token是通过OAuth2.0机制实现的，在用户授权给公众号后，可以获取到一个网页授权特有的接口调用凭证，简单地来说，这个access_token是要用户确定才能获取。

注意：使用网页授权之前，一定先先到微信后台设置网页授权的安全域名，不然授权会失败。也就是说，授权的回调地址的域名一定要与设置的域名一样。

四.网页授权的流程

1. 引导用户进入授权页面同意授权，获取code

2. 根据获取的code换取网页授权的access_token。如果是静默授权的话，到这里就可以结束了，因为获取access_token的同时，也可以获取到openid。

3. (这一步是手动授权才有的)获取用户完整的信息(根据上一步获取的access_token和openid)

五.网页授权的实现

封装get 和 post请求

在根目录新建util文件夹；在文件夹中新建http.js文件；加入如下代码：

'use strict' //设置为严格模式
let https = require('https');

/**
 * 用于处理 https Get请求方法
 * @param {String} url 请求地址 
 */
function requestGet(url) {
    return new Promise(function (resolve, reject) {
        https.get(url, function (res) {
            var buffer = [],
                result = "";
            //监听 data 事件
            res.on('data', function (data) {
                buffer.push(data);
            });
            //监听 数据传输完成事件
            res.on('end', function () {
                result = Buffer.concat(buffer).toString('utf-8');
                //将最后结果返回
                resolve(result);
            });
        }).on('error', function (err) {
            reject(err);
        });
    });
}

/**
 * 用于处理 https Post请求方法
 * @param {String} url  请求地址
 * @param {JSON} data 提交的数据
 */
function requestPost(url, data) {
    return new Promise(function (resolve, reject) {
        //解析 url 地址
        var urlData = urltil.parse(url);
        //设置 https.request  options 传入的参数对象
        var options = {
            //目标主机地址
            hostname: urlData.hostname,
            //目标地址 
            path: urlData.path,
            //请求方法
            method: 'POST',
            //头部协议
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Content-Length': Buffer.byteLength(data, 'utf-8')
            }
        };
        var req = https.request(options, function (res) {
                var buffer = [],
                    result = '';
                //用于监听 data 事件 接收数据
                res.on('data', function (data) {
                    buffer.push(data);
                });
                //用于监听 end 事件 完成数据的接收
                res.on('end', function () {
                    result = Buffer.concat(buffer).toString('utf-8');
                    resolve(result);
                })
            })
            //监听错误事件
            .on('error', function (err) {
                reject(err);
            });
        //传入数据
        req.write(data);
        req.end();
    });
}


exports.requestPost = requestPost;
exports.requestGet = requestGet;

打开app.js文件；新增oauth请求

//微信网页授权
app.get("/oauth", (req, res) => {
    //没有code就跳转去授权
    if (!req.query.code) {
        let redirect_uri = `http://${req.hostname}${req.path}`;
        res.redirect(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appID}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`)
        return;
    }
    //获取code值
    let code = req.query.code;
    //通过code换取网页授权access_token
    https.requestGet(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${config.appID}&secret=${config.appScrect}&code=${code}&grant_type=authorization_code`).then(function (data) {
        let {access_token,openid} = JSON.parse(data);
        //拉取用户信息
        https.requestGet(`https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&lang=zh_CN`).then(result =>{
            res.send(result)
        })
    })
})

在微信中打开链接(我的是http://23y8q85354.qicp.vip/oauth)发现已经获取成功！

QQ截图20190418232510.png

基于Node.js的微信JS-SDK后端接口实现(一)

基于Node.js的微信JS-SDK后端接口实现(二)

基于Node.js的微信JS-SDK后端接口实现(三)