微信公众号网页授权支持用户在关注微信公众号后,通过 OAuth2.0 协议,允许第三方网页获取用户在微信中的基本信息的授权机制。这种授权机制在很多场景下都可以被应用,包括但不限于以下几个方面:
网页登录: 微信公众号网页授权可以用于实现用户在网页上使用微信账号登录的功能,无需额外注册账号即可登录网站或应用。
个性化服务: 基于用户授权获取的微信信息,可以为用户提供个性化的服务和体验,比如根据用户的微信昵称、头像等信息进行定制化的展示。
线下营销: 在线下活动中,可以通过微信公众号网页授权收集用户信息,比如举办抽奖活动、线下签到等。
参考博客:JAVA(SpringBoot)对接微信登录_java对接微信登录-CSDN博客
我们需要提前对后端服务进行内网穿透,这里只做测试,使用 Cpolar(或者自己使用其他的内网穿透工具)进行内网穿透,如果不熟悉的可以关注我之前的博文: http://t.csdnimg.cn/gTGRV。我的后端服务地址为 localhost:9998,故我只需提前将端口穿透出去即可,如:
敲下回车,等待响应,此时会得到两个公网地址 http://532908f7.r24.cpolar.top 或 https://532908f7.r24.cpolar.top 选择一个使用即可,需要注意的是,这个公网地址是临时的,意味着你一旦结束服务即会作废。:
完成了内网穿透后,我们打开微信公众平台接口测试账号申请页面:微信公众平台,如果你有已经注册的企业微信公众号可以参考官方文档进行配置,这里只介绍测试公众号的开发流程,真实公众号开发流程与测试公众号开发流程基本一致,做个参考即可。
登录进去以后我们需要配置几个信息:
1.记录下自己的 appID 和 appsecret,后面需要使用
2.配置接口配置信息,点击修改,然后将之前的公网地址填入 URL 处,再自己自定义一个 Token(Token 在后面参数校验时需要使用),填完之后点提交,不出意外的话会提示配置失败,如下:
为什么?ok,我们看一下官方文档:
官方文档说明了,当你提交信息后,微信服务器将发送 GET 请求到你自己的服务器上,来进行校验,它要求你对微信服务器发送的请求信息进行校验,校验通过后要原样返回 echostr 参数的内容,注意是原样返回,你不能对它作任何修改!
由于此时我们还未完成校验接口,故暂时不能提交,那么我们就先填好信息不提交,等到后面完成代码再提交即可。
3.配置网页账号-网页授权获取用户基本信息,我们往下找:
红色框标出的就是我们需要修改的,点击修改,并填入与上面一样的域名:
这里有个坑,你需要填的是域名,不要带上了 http、https 或者端口号等信息,否则会检测不通过!填写正确后,点击确认即可。到这里就完成了微信开放平台的基本配置,除了第二步我们暂时放下,等完成代码再重新提交即可。
user_id是逻辑外键,需要自己实现一个user表,当然也可以仅使用公众号授权登录。
整体架构是这样的:
这个代码就是授权成功的回调页面,在自己业务场景下可以不使用它,直接在前端实现一下授权成功的页面
在测试之前我们还需要把前面准备阶段放下的配置接口配置信息给提交上。我们先启动后端服务,然后在配置接口配置信息填写好下面这个接口信息,比如 http:xxxx.top/wechat/verifyToken:
校验成功后就可以开始测试啦!这里要注意,校验接口我们只需要在初次使用的时候校验一次就行了,如果你的域名发生了更改才需要重新校验。
我们先用自己的微信扫码关注一波测试公众号:
关注成功后我们,我们尝试完成授权。我们需要引导用户点击授权链接,这里我把授权链接放进二维码,通过扫码来实现(当然大家可以以其他方式实现),这里和校验接口一样,如果你的域名没有发生改变只需要生成一次就可以了,在控制层中是这个接口:
我们直接发一个 GET 请求,可以获得一张二维码,具体保存路径可以通过修改 IMG_PATH 这个常量实现:
如果你的配置是完全正确的,那么当你第一次扫码授权,会得到下面结果:
如果你历史已经授权了,那么会得到下面结果:
上面两个结果都只是模拟授权场景,具体还需要进行修改,授权成功后数据库中就能看到授权用户的信息啦~
有了用户信息我们就能根据用户信息完成其他业务了,比如后续的公众号授权登录功能等等。