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

微信授权

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] }))

前端就先写这么简单了

大概就是进入页面之后会将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一下就好了~