【无标题】

微信网页授权

本文范围：本文只讨论 微信测试账号，实现h5网页的授权。
你需要自己搭建一个网页服务(可以使用vue3-cli生成一个)

微信开发工具：开发者工具

预览一下测试账号入口
在这个地方你能获取自己的appid（下文中的鉴权页面url，需要替换成自己的appid）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-taPAynQ7-1659604809419)(evernotecid://BC65741E-F9DC-4BA0-9470-FBA0C3BD057C/appyinxiangcom/10165910/ENResource/p1039)]

1 下载一个 “微信开发者工具”

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dBYVPqA1-1659604809421)(evernotecid://BC65741E-F9DC-4BA0-9470-FBA0C3BD057C/appyinxiangcom/10165910/ENResource/p1037)]

在工具地址栏，直接输入微信统一鉴权页面url：
appid ：需要换成自己测试账号的appid（上文提到了）
redirect_uri ： 本地自己的h5网页服务地址（微信鉴权通过后需要重定向到这里）
注意：redirect_uri 要用 urlencode编码，开头http或者https

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxca58813df1fb02b6&redirect_uri=http%3A%2F%2F10.20.37.25%3A8080%2F&response_type=code&scope=snsapi_userinfo&state=STATE&uin=MTI4NjEyNjcxNg%3D%3D&key=f417db0e9b7bfa4dd26c18dd8bb27e43cc583b9f31d03280a743eec516409a283d727fb0e13b2a4b37e5dc2e9c5a008c&pass_ticket=DsCmXHJO0Cm6aY3pRLyPyN6AXghx/S4nKY3RGsFJ639dtRKLvSkYjB7Kvs2MYbxsa9sX0/+lVZkgCI35gTvzig==

2 出现一下问题 需要"公众平台测试账号"，这时候就 “用微信扫描关注测试公众号”

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kRCYskbn-1659604809421)(evernotecid://BC65741E-F9DC-4BA0-9470-FBA0C3BD057C/appyinxiangcom/10165910/ENResource/p1033)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5KMtLCoy-1659604809422)(evernotecid://BC65741E-F9DC-4BA0-9470-FBA0C3BD057C/appyinxiangcom/10165910/ENResource/p1032)]

3 这时候也要配置 “授权回调页面域名”，不配置页面出现 “redirect_uri 参数错误”

这个地方注意因为是测试环境所以可以用ip，用ip的话不能用127.0.0.1
，需要用本机的真实ip “10.20.37.25” （macos 用ifconfig命令可以查看），微信 坑我们啊

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oe9PcCco-1659604809422)(evernotecid://BC65741E-F9DC-4BA0-9470-FBA0C3BD057C/appyinxiangcom/10165910/ENResource/p1034)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-98T24DyV-1659604809422)(evernotecid://BC65741E-F9DC-4BA0-9470-FBA0C3BD057C/appyinxiangcom/10165910/ENResource/p1036)]

4 在工具地址栏，再次输入统一鉴权页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4E1mjjtn-1659604809423)(evernotecid://BC65741E-F9DC-4BA0-9470-FBA0C3BD057C/appyinxiangcom/10165910/ENResource/p1038)]

5 接下来就是 用 code 获取微信用户信息，自行实现吧。

拉取用户信息接口