官方文档
首先要做微信网页授权之前我们需要做些准备，申请公众号，但个人公众号在没有进行认证的情况下，权限不足，所以我这里是先用的测试号，权限很多，可用于开发时进行测试，
测试号登录地址：
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
可以看到那里有需要你进行的配置信息
往下看
对了，不要加上http://
接口配置信息修改
可以先阅读接口指南
https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html
说白了就是让你在后台写个get请求的接口。而Token就是类似与字段值，在测试号这里配置的，跟接口里设置的相同就好了。
事实上只要是个get请求的接口，而且返回是 echost参数内容那就是成功的
但微信官方为了安全起见，不建议我们之前这样返回，而经过了一些处理
接口代码实例有：java，php，c#，c++等，就是没有ndoe的，哈哈，但是还是可以看着写出来的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| async index() {
const { ctx, app } = this;
let { signature, echostr, timestamp, nonce } = ctx.query;
console.log(ctx.query)
const token = 'zwp123';
const arr = [token, timestamp, nonce];
arr.sort();
const str = arr[0]+ arr[1] + arr[2];
var sha1 = require('sha1');
if(sha1(str) === signature){
ctx.body = echostr;
}else{
ctx.body = false;
}
}
|
到了这里即可提交接口配置信息，在服务器后台可以看到get请求获取的参数信息，这样也就配置成功了
好了，那我们看看网页上是怎么写吧，如何获取code
官方文档写的很清楚，需要这些参数，那就直接给就好了
授权方式有两种，我这里选择的是第二种，重点是redirect_uri这里。一开始看文档看到我一头雾水，
这里需要写个接口用于接受code信息，在后台写好前端可否访问就行，一样是get请求
这里示例get请求auth接口
1
2
3
4
5
6
7
8
|
async auth() {
const { ctx, app } = this;
let { code } = ctx.query;
console.log(ctx.query)
ctx.body = code;
}
|
##网页代码示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<title>微信网页授权登录</title>
</head>
<body>
<script>
var local = encodeURI('http://zwp.xiat123.cn/auth')
var appid = 'wx74e1bXXXXXXf'
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+ appid +'&redirect_uri='+ local +'&response_type=code&scope=snsapi_userinfo#wechat_redirect'
</script>
</body>
</html>
|
当访问这个页面就能看到这个样子的页面，也就是用户是否同意登录
允许，则获取到code信息
