微信公众号开发之五微信网页授权
开始之前建议先阅读微信官方文档 微信公众号开发之五微信网页授权
一.网页授权的作用
我们一般会自己开发web应用中加入授权,用来获取用户的openid(或unionid),来实现用户体系。比如:我们常做的基于微信的用户体系,利用openid做唯一的身份识别。
二.微信网页授权包括2种形式:
静默授权。只能获取到openid;用户不用手动点击确定,直接跳到回调页面。code=snsapi_base
手动授权。可以获取所有的用户信息;会出现上图的页面,用户需手动确定后,才会跳到回调页面。code=snsapi_userinfo
838315728-5bd94499b066b_articlex.png
三.授权也要access_token
网页授权access_token与我们前面说的接口access_token不是同一个东西,网页授权的access_token是通过OAuth2.0机制实现的,在用户授权给公众号后,可以获取到一个网页授权特有的接口调用凭证,简单地来说,这个access_token是要用户确定才能获取。
注意:使用网页授权之前,一定先先到微信后台设置网页授权的安全域名,不然授权会失败。也就是说,授权的回调地址的域名一定要与设置的域名一样。
四.网页授权的流程
引导用户进入授权页面同意授权,获取code
根据获取的code换取网页授权的access_token。如果是静默授权的话,到这里就可以结束了,因为获取access_token的同时,也可以获取到openid。
(这一步是手动授权才有的)获取用户完整的信息(根据上一步获取的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