首先登录微信开发者平台
https://mp.weixin.qq.com
1.png
由于我个人是订阅号，没权限，就借了朋友一个账号
先设置域名，我这里直接看他的域名了
2.png
当然我们没有他的域名的权限，而且为了测试方便，把我们本地的host改一下映射到他的域名上
3.png
我这里用的fiddler改的，自己改的时候直接改host文件也是可以的
除了域名之外，还需要appId和AppSecret
从微信公众号平台找一下
4.png
然后配一下自己的访问链接
https://open.weixin.qq.com/connect/oauth2/authorize?appid=【这里填写appid】&redirect_uri=【这里填写授权链接(注意域名)】&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect
进入链接看一下
5.png
loading过后点击复制出来当前的链接看一下
http://m.xxxxx.com/?code=xxxxxxxxxxx&state=1
我们会发现经过这个open.weixin.qq.com包装之后的链接，会多出来一个query，为code和state
我们要把这个code发送给后端，然后处理后会返回授权信息和用户信息
这里后端我们用的是nodeJS，思路都一样的，举一反三，由于本身代码量很少，我就尽量少的引用各种库和包了
先是nodeJS项目初始化
先创建一个文件夹，然后$npm init，一路回车
node的标配哈，会生成一个package.json
在这个文件夹下新建一个index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信授权</title>
</head>
<body>
<div class="result"></div>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && /^2\d\d$/.test(xhr.status)) {
document.querySelector('.result').innerHTML = xhr.responseText
}
};
xhr.open("post", "/oauth", false);
xhr.send(JSON.stringify({ code: /code=(.*?)\&/.exec(location.search)[1] }))
</script>
</body>
</html>
前端就先写这么简单了
大概就是进入页面之后会将query中的code用ajax发出去，返回的内容直接innerHTML放到div里
然后右键新建一个server.js，先创建一个httpServer
var http = require('http');
var fs = require('fs');
var url = require('url');
http.createServer(function (req, res) {
var urlObj = url.parse(req.url);
if (urlObj.path == '/'||urlObj.path.indexOf('/?')==0) {
fs.readFile('index.html', 'utf8', function (err, data) {
res.end(data)
})
} else {
res.end("404")
}
}).listen(8081);
如果访问的是网站根路径，就直接读文件index.html，然后吐出去
此时文件目录大概是这样的
8.png
然后控制台
node server再访问这个授权的连接
https://open.weixin.qq.com/connect/oauth2/authorize?appid=【这里填写appid】&redirect_uri=【这里填写授权链接(注意域名)】&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect
会发现返回的是404
因为我们前端代码ajax调用的
xhr.open("post", "/oauth", false);嘛，没有oauth这个路由，当然是404了
9.png
现在写一下oauth的登录路由
在creatServer里加一个else if
http.createServer(function (req, res) {
var urlObj = url.parse(req.url);
if (urlObj.path == '/'||urlObj.path.indexOf('/?')==0) {
fs.readFile('index.html', 'utf8', function (err, data) {
res.end(data)
})
} else if (urlObj.path == '/oauth') {
var str = '';
req.on('data', function (data) {
str += data;
});
req.on('end', async function () {
res.end(str)
})
} else {
res.end("404")
}
}).listen(8081);
这样就会接受到什么内容，就直接返回了什么内容
当然我们是需要处理一下再返给前端的，而处理主要是调用两个微信的接口
一般node调用外部接口都是用superagent，所以要安装一下
命令行输入npm i superagent --save-dev
然后头部require一下
var superagent = require('superagent')
而获取用户信息大概分为两步骤，
1、先根据前端传过来的code，获取openid和access_token
let getOauthInfo = (code) => new Promise((res, rej) => {
superagent.get("https://api.weixin.qq.com/sns/oauth2/access_token")
.query({
appid:"【这里填写你的公众号appid】",
secret:"【这里填写你的公众号secret】",
code:code,
grant_type:"authorization_code"
})
.end((e, d) => {
res(JSON.parse(d.text))
})
})
JSON.parse(d.text)这个对象里就包含了openid和access_token了
2、然后根据openid和access_token获取授权信息和用户信息
let getUserInfo = (oauthInfo) => new Promise((res, rej) => {
superagent.get("https://api.weixin.qq.com/sns/userinfo")
.query({
openid:oauthInfo.openid,
access_token:oauthInfo.access_token,
})
.end((e, d) => {
res(d.text)
})
})
有了这两个方法，在req.on end里调用一下就好了
req.on('end', async function () {
let oauthInfo = await getOauthInfo(JSON.parse(str).code)
let userInfo = await getUserInfo(oauthInfo)
res.end(userInfo)
})
好了重启一下后端，然后再访问授权链接
10.png
看到已经授权成功了，并且拿到了JSON，看下JSON的结构
11.png
用户名、openid、地址、头像，前端都已经拿到了，想做什么再前端处理改一下index.html一下就好了~
网友评论