微信html5网站 集成,H5页面接入微信授权
授权步骤
用户同意授权,获取code
通过code换取网页授权access_token
拉取用户信息(需scope为 snsapi_userinfo)
项目依赖
SpringBoot:2.1.4.RELEASE
weixin-java-mp:3.4.0
公众测试号申请
开发文档.png
由于我这边申请过了所以不做过多演示,这里我们需要注意几个地方,我们如果不适用JDSK的话只需要关注红色方框的地方,如果需要使用JSDK如调用相机、分享等。
测试公众号.png
其次测试号微信授权需要配置回调域名所以我们需要配置Natapp映射的域名,这里配置的地址只需要域名,配置在页面服务->网页账号->修改。
网页授权配置.png
项目配置
核心pom.xml。
com.github.binarywang
weixin-java-mp
3.4.0
核心application.yml。
wechat:
appId: #appId
appSecret: #appSecret
token: #服务器消息token
aesKey: #aesKey
projecturl:
projectUrl: #natapp调试地址
项目代码
配置类
以下配置类@Data使用了Lombok文章中没有说明配置的话自己百度或者自己写GetSet。
/**
* 可以放一些微信相关的配置属性
*/
@Component
@ConfigurationProperties(prefix = "wechat")
@Data
public class WeChatAccountConfig {
/**
* 设置微信公众号的appid
*/
private String appId;
/**
* 设置微信公众号的app secret
*/
private String appSecret;
/**
* 设置微信公众号的token
*/
private String token;
/**
* 设置微信公众号的EncodingAESKey
*/
private String aesKey;
}
/**
* 项目公用一些API地址
*/
@Component
@ConfigurationProperties(prefix = "projecturl")
@Data
public class ProjectUrlConfig {
/**
* 项目访问URL
*/
private String projectUrl;
}
SDK配置类
@Component
public class WeChatMpServerConfig {
@Autowired
private WeChatAccountConfig weChatAccountConfig;
@Bean
public WxMpService wxMpService(){
WxMpService wxMpService = new WxMpServiceImpl();
wxMpService.setWxMpConfigStorage(wxMpConfigStorage());
return wxMpService;
}
@Bean
public WxMpConfigStorage wxMpConfigStorage(){
WxMpInMemoryConfigStorage wxMpConfigStorage = new WxMpInMemoryConfigStorage();
wxMpConfigStorage.setAppId(weChatAccountConfig.getAppId());
wxMpConfigStorage.setSecret(weChatAccountConfig.getAppSecret());
return wxMpConfigStorage;
}
}
这个配置类的由来主要是因为WxMpService接口有多个实现类自动注入的话IOC不知道使用哪个实现类,还有就是每次调用API接口如查用户、素材之类。每次之前都要设置一个wxMpConfigStorage,所以我们这里使用了一个组件来管理相关的Bean配置。
控制层
@Controller
@RequestMapping("/oauth/")
public class WeChatOAuthController {
@Autowired
private ProjectUrlConfig projectUrlConfig;
@Autowired
private WxMpService wxMpService;
/**
* 构造网页授权URL
* https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
*
* @Param returnUrl 可以传入微信端应用地址
*/
@GetMapping("authorization")
public String authorizationUrl(@RequestParam(value = "returnUrl",defaultValue = "STATE") String returnUrl){
String url = projectUrlConfig.getProjectUrl()+"/oauth/userInfo";
String redirectUrl = wxMpService.oauth2buildAuthorizationUrl(url, WxConsts.OAuth2Scope.SNSAPI_USERINFO, URIUtil.encodeURIComponent(returnUrl));
return "redirect:"+redirectUrl;
}
@GetMapping("userInfo")
@ResponseBody
public String userInfo(@RequestParam("code") String code,@RequestParam("state") String state){
WxMpOAuth2AccessToken auth2AccessToken;
WxMpUser wxMpUser;
try {
auth2AccessToken = wxMpService.oauth2getAccessToken(code);
wxMpUser = wxMpService.oauth2getUserInfo(auth2AccessToken,null);
} catch (WxErrorException e) {
e.printStackTrace();
throw new ProjectException(ResultEnum.WECHAT_ERROR.getCode(),e.getMessage());
}
return "你好!"+wxMpUser.getNickname()+",openId="+auth2AccessToken.getOpenId();
}
}
其中我们大体的可以看出authorizationUrl接口是用户在微信端点击的授权API其次方法中才是构建微信授权链接让项目自己去重定向之后会到回调地址userInfo接口这里大家可以自由发挥返回前端页面也可以。
项目测试
下方就是微信授权访问接口中的方法和官方参数解析。
链接详解.png
参数详解.png
https://open.weixin.qq.com/connect/oauth2/authorize?
appid=APPID&
redirect_uri=REDIRECT_URI&
response_type=code&
scope=SCOPE&
state=STATE#wechat_redirect
项目启动之后我们需要把外部访问请求发送到自己的测试公众号前提需要关注。
4E9587DA-CC77-49E7-BE8C-9162ACB1E634.png
E389D301-F12D-4B04-AD9B-F73F85D25838.png
以上就是用户授权的操作一般在公众号开发嵌入H5网页常用的第一步还有就是jdsk验证也需要这里不细讲可以百度相关教程,使用了此SDK之后不需要自己去封装一些API操作简便了微信开发。(此教程于博客迁移,时间并非当日编写其次可去GitHub搜索weixin-java-mp看最新文档和相关使用教程)
微信html5网站 集成,H5页面接入微信授权相关推荐
- 微信小程序webview(H5页面)调用微信小程序支付
1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现: 2.微信小程序(webview访问H5页面)必须使用微信小程序支付: 如何实现以及实现方式以及支付后页面返回 ...
- 微信首页登录html页面,H5页面接入微信授权登录和分享
前期准备 接入微信授权 分静默授权和非静默授权两种 静默授权: scope=snsapi_base,没有弹窗,只能获取用户的openId. 非静默授权: scope=snsapi_userinfo,有 ...
- 公众号H5页面接入微信登录流程
起步 首先创建一个项目,我们采用uni-app来作为我们的前端框架 环境安装 全局安装vue-cli npm install -g @vue/cli 创建uni-app 使用正式版(对应HBuilde ...
- 微信小程序嵌套h5页面+发布微信小程序(超级简单)
将发布的h5页面转换成微信小程序,无需重新开发,操作超级简单!!! 使用到的技术为uniapp和web-view 首先,我们先来了解一下web-view是什么: 简单的一句话来讲:web-view 是 ...
- h5在微信自定义分享php,h5页面自定义微信分享
官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 开发准备:公众号绑定好需要开发的服务器域名. ...
- H5页面使用微信网页授权实现登录认证
在用H5开发微信公众号页面应用时,往往需要获取微信的用户信息,H5页面在微信属于访问第三方网页,因此通过微信网页授权机制,来获取用户基本信息,此处需要用户确认授权才能获取,用户确认授权后,我们可以认为 ...
- 小程序跳到h5页面_微信小程序跳转到H5页面实战篇
有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...
- 微信无法连接支付服务器,App接入微信H5支付常见错误及原因
在App上接入微信H5支付一般都会遇到一些错误.本文讨论了这些错误的解决方案和背后的原因,希望能让读者能少踩些坑. 错误可以分为两类:一是H5支付域名设置错误,二是URL Scheme跳转App错误. ...
- [html] H5页面在微信中如何禁止分享给好友和朋友圈?
[html] H5页面在微信中如何禁止分享给好友和朋友圈? 利用JSBridge实现调用微信提供的一些原生功能,可以通过调用隐藏操作菜单来实现禁用分享. 代码如下: document.addEvent ...
最新文章
- Smart Card知识
- Maven jdk.1.7
- FLEX RSL 部署产生的问题
- 突袭HTML5之SVG 2D入门1 - SVG综述
- AJAX省市县三级联动的实现
- 【项目管理】风险分析
- 微博营销不可不知的微博六种人
- html人物动画效果图,9款用HTML5/CSS3制作的动物、人物动画
- 参观云栖小镇体会_云栖小镇感受
- Java爬虫Jsoup篇
- en55032最新标准下载_欧盟CE认证EN55032标准
- 无线摄像头服务器关闭,监控摄像头服务器停止
- [Hello World教程] 使用HBuilder和Uni-app 生成一个简单的微信小程序DEMO
- win10桌面mac化保姆级教程[干货] 小白也能拥有的简(酷)约(炫)实用桌面
- duilib开发(六):基本控件介绍
- 推荐几款比较好用的聊天机器人bot开发工具
- java实现9*9乘法表
- 用isprime判断是否为素数(函数法)
- JAVA第一次授课心得_关于第一次java课的感想
- GJCTF 官方WP PWN部分
热门文章
- mysql被覆盖安装找回数据
- AssemblyInfo.cs文件详解
- 锐捷睿易:路由器WAN口三种上网方式的选择
- 用C语言编码定积分,C语言__用六种方法求定积分C语言__用六种方法求定积分.doc...
- 2020年成都市集成电路行业产量、市场规模及集成电路行业潜力趋势分析[图]
- HTML+CSS实现导航页
- Geany 中文编码问题
- 【Cqupt热身赛】诡异的饭卡 【01背包、动态规划】
- hdu 2546 饭卡(P01-背包)
- 跳槽,如何选择一家公司