首先要做微信网页授权之前我们需要做些准备，申请公众号，但个人公众号在没有进行认证的情况下，权限不足，所以我这里是先用的测试号，权限很多，可用于开发时进行测试，
测试号登录地址：
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
可以看到那里有需要你进行的配置信息
image.png
往下看
image.png
image.png
对了，不要加上http://
接口配置信息修改
可以先阅读接口指南
https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html
说白了就是让你在后台写个get请求的接口。而Token就是类似与字段值，在测试号这里配置的，跟接口里设置的相同就好了。
事实上只要是个get请求的接口，而且返回是 echost参数内容那就是成功的
image.png
但微信官方为了安全起见，不建议我们之前这样返回，而经过了一些处理
image.png
接口代码实例有：java，php，c#，c++等，就是没有ndoe的，哈哈，但是还是可以看着写出来的
async index() {
const { ctx, app } = this;
let { signature, echostr, timestamp, nonce } = ctx.query;
console.log(ctx.query)
const token = 'zwp123'; // 这里也就是配置里面的token了，可随便设置，只要是一样的就好
// 将token、timestamp、nonce三个参数进行字典序排序
const arr = [token, timestamp, nonce];
arr.sort();
// 将三个参数字符串拼接成一个字符串进行sha1加密
const str = arr[0]+ arr[1] + arr[2];
var sha1 = require('sha1'); // 这里需要你引入sha1进行加密
// 开发者获得加密后的字符串可与signature对比
if(sha1(str) === signature){
ctx.body = echostr;
}else{
ctx.body = false;
}
}
到了这里即可提交接口配置信息，在服务器后台可以看到get请求获取的参数信息，这样也就配置成功了
好了，那我们看看网页上是怎么写吧，如何获取code
image.png
官方文档写的很清楚，需要这些参数，那就直接给就好了
授权方式有两种，我这里选择的是第二种，重点是redirect_uri这里。一开始看文档看到我一头雾水，
这里需要写个接口用于接受code信息，在后台写好前端可否访问就行，一样是get请求
这里示例get请求auth接口
// 微信网页授权登录获取code
async auth() {
const { ctx, app } = this;
let { code } = ctx.query;
console.log(ctx.query)
ctx.body = code;
}
网页代码示例
<!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') // 获取页面url
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>
当访问这个页面就能看到这个样子的页面，也就是用户是否同意登录
image.png
允许，则获取到code信息
网友评论