H5页面接入微信授权

开发文档: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432

由于我这边申请过了所以不做过多演示,这里我们需要注意几个地方,我们如果不适用JDSK的话只需要关注红色方框的地方,如果需要使用JSDK如调用相机、分享等。

其次测试号微信授权需要配置回调域名所以我们需要配置Natapp映射的域名,这里配置的地址只需要域名,配置在页面服务->网页账号->修改。

核心pom.xml。

核心application.yml。

以下配置类@Data使用了Lombok文章中没有说明配置的话自己百度或者自己写GetSet。

这个配置类的由来主要是因为WxMpService接口有多个实现类自动注入的话IOC不知道使用哪个实现类,还有就是每次调用API接口如查用户、素材之类。每次之前都要设置一个wxMpConfigStorage,所以我们这里使用了一个组件来管理相关的Bean配置。

其中我们大体的可以看出authorizationUrl接口是用户在微信端点击的授权API其次方法中才是构建微信授权链接让项目自己去重定向之后会到回调地址userInfo接口这里大家可以自由发挥返回前端页面也可以。

下方就是微信授权访问接口中的方法和官方参数解析。

项目启动之后我们需要把外部访问请求发送到自己的测试公众号前提需要关注。

以上就是用户授权的 *** 作一般在公众号开发嵌入H5网页常用的第一步还有就是jdsk验证也需要这里不细讲可以百度相关教程,使用了此SDK之后不需要自己去封装一些API *** 作简便了微信开发。（此教程于博客迁移,时间并非当日编写其次可去GitHub搜索weixin-java-mp看最新文档和相关使用教程）

接入微信授权，有两种方式：

静默授权和非静默授权

静默授权：scope=snsapi_base，没有d窗，只能获取OPENID

非静默授权： scope=snsapi_userinfo，有d窗需要手动确认授权，可以获取openid, 头像，昵称等信息。

H5登录就是通过授权获取code，将code传给后端，后端再将openid, 头像，昵称等信息返给前端。所以首先要获取到code。获取方式如下：

let appid = '....'//换成自己的appid

let uri = encodeURIComponent(link)  //link是需要登录的页面

let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`//这里使用的是非静默授权

window.location.href = authURL

页面自动刷新后，返回的地址里面会携带code值 ，把地址里的code值取出来传给后端就可以了。

---