介绍
在很多H5应⽤⾥，当⽤户访问第三⽅应⽤时就需要进⾏⽹页授权，并且很多涉及安全的操作我们必须要先获取⽤户信息才能继续，本⽂章简单介绍了授权流程，并通过申请测试账号来模拟⽹页授权，⽤户在授权页点击确定登录后获取⽤户信息并显⽰在前端页⾯，最后效果如下图
⼯具及开发准备
1. 开发者⼯具及测试号
因为是授权，所以必须要在环境下使⽤，⾸先我们要在安装开发者⼯具，因为我们没有⾃⼰的应⽤，所以还需要在申请⼀个接⼝测试号，这个接⼝测试号就相当于我们的第三⽅应⽤。
2. 参数设置
登陆测试号后可以查看到⾃⼰的appId和appsecret信息，将体验接⼝权限表⾥的⽹页服务的⽹页授权获取⽤户基本信息修改为127.0.0.1:8800，该地址就是⽤户确认授权后回调的地址即我们应⽤的后台处理地址，如下图
最后拿出⾃⼰扫码关注该测试号即可，如下图所⽰
授权流程介绍
具体流程及详细介绍⼤家可以到官⽹查看,⼤致分为四步：
1. 引导⽤户进⼊授权页⾯同意授权，此时会调⽤api获取code
2. 授权通过后会带上code参数请求回调地址
3. 后台获取code，再次调⽤接⼝换取⽹页授权access_token和openid
4. 通过⽹页授权access_token和openid获取⽤户基本信息（如果有unionid还会获取到unionid参数）
正式开始
1. 原始代码
let express = require("express");const https = require('https');
let app = express();
//appIDlet
appID = `wxec6fa9e9bc03d885`;
//appsecretlet
appSerect = `4c8a0d14cff08959b4e17334cabf9cf0`;
//点击授权后重定向url地址
let redirectUrl = `/getUserInfo`;
let host = `127.0.0.1:3000`;
//授权api，接⼝返回code，点击授权后跳转到重定向地址并带上code参数
let authorizeUrl = `open.weixin.qq/connect/oauth2/authorize?appid=${appID}&redirect_uri=` + `${host}${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect` ("/login", function(req, res) {
res.solve(__dirname,'login.html'));
});
<("/auth", function(req, res) {
res.writeHead(302, {
'Location': authorizeUrl
});
});
<("/getUserInfo", function(req, res) {
let code = de;
let getaccess = `api.weixin.qq/sns/oauth2/access_token?appid=` + `${appID}&secret=${appSerect}&code=$[code]&grant_type=authorization_code`;
//通过拿到的code和appID、app_serect获取access_token和open_id
<(getaccess, (resText) => {
var ddd = "";
<('data', (d) => {
ddd += d;
});
<('end', () => {
// console.log(ddd);
var obj = JSON.parse(ddd);
var access_token = obj.access_token;
var open_id = obj.openid;
//通过上⼀步获取的access_token和open_id获取userInfo即⽤户信息
let getUserUrl = `api.weixin.qq/sns/userinfo?access_token=${access_token}&openid=${open_id}⟨=zh_CN`;
<(getUserUrl, (resText) => {
网user = "";
<('data', (d) => {
user += d;
});
<('end', () => {
console.log(user);
var userobj = JSON.parse(user);
res.send(userobj);
console.log(userobj);
});
}) });
}).on('error', (e) => {
<(e);
});
app.listen(3000);
具体使⽤时要将appID和appSerect换成你对应的参数即可，因为我们的请求是要按⼀定顺序的，但是node发送请求是异步的，所以我们的请求嵌套了三层，代码很难
看，所以这⾥可以采⽤ES6的async和await解决异步回调地狱。
2. 使⽤ES6的async和await的改进代码
async function wxAuth(req, res) {
//解析querystring获取URL中的code值
let code = de;
//通过拿到的code和appID、app_serect获取返回信息
let resObj = await getAccessToken(code);
//解析得到access_token和open_id
let access_token = resObj.access_token;
let open_id = resObj.openid;
//通过上⼀步获取的access_token和open_id获取userInfo即⽤户信息
let userObj = await getUserInfo(access_token, open_id);
console.log(userObj);
// res.send(userObj);}
//通过拿到的code和appID、app_serect获取access_token和open_id
function getAccessToken(code) {
return new Promise( (resolve, reject) => {
let getAccessUrl = `api.weixin.qq/sns/oauth2/access_token?appid=` + `${appID}&secret=${appSerect}&code=$[code]&grant_type=authorization_code`;
<(getAccessUrl, (res) => {
var resText = "";
<('data', (d) => {
resText += d;
});
<('end', () => {
var resObj = JSON.parse(resText);
resolve(resObj);
});
}).on('error', (e) => {
<(e);
});
});
}
/
/通过上⼀步获取的access_token和open_id获取userInfo即⽤户信息
function getUserInfo(access_token, open_id) {
return new Promise( (resolve, reject) => {
let getUserUrl = `api.weixin.qq/sns/userinfo?access_token=${access_token}&openid=${open_id}⟨=zh_CN`;
<(getUserUrl, (res) => {
var resText = "";
<('data', (d) => {
resText += d;
});
<('end', () => {
var userObj = JSON.parse(resText);
resolve(userObj);
});
}).on('error', (e) => {
<(e);
});
})}
修改后代码流程清晰了很多，最后点击确认登陆后将获取到的userObj通过ejs模板渲染在前端页⾯，就能看到⽂章最开始展现的效果图。
写在最后
我前端刚⼊门没多久，最近在公司实习，受到⾝边同事影响，所以也开始写⽂章来记录⾃⼰的学习⼼得，这是我第⼀次写⽂章，所以可能写的不太好，⼤家对⽂章和代码有什么建议欢迎提出来⼀起交流，谢谢！也希望⼤家多多⽀持。
发布评论