授权步骤

用户同意授权,获取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页面接入微信授权相关推荐

  1. 微信小程序webview(H5页面)调用微信小程序支付

    1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现: 2.微信小程序(webview访问H5页面)必须使用微信小程序支付: 如何实现以及实现方式以及支付后页面返回 ...

  2. 微信首页登录html页面,H5页面接入微信授权登录和分享

    前期准备 接入微信授权 分静默授权和非静默授权两种 静默授权: scope=snsapi_base,没有弹窗,只能获取用户的openId. 非静默授权: scope=snsapi_userinfo,有 ...

  3. 公众号H5页面接入微信登录流程

    起步 首先创建一个项目,我们采用uni-app来作为我们的前端框架 环境安装 全局安装vue-cli npm install -g @vue/cli 创建uni-app 使用正式版(对应HBuilde ...

  4. 微信小程序嵌套h5页面+发布微信小程序(超级简单)

    将发布的h5页面转换成微信小程序,无需重新开发,操作超级简单!!! 使用到的技术为uniapp和web-view 首先,我们先来了解一下web-view是什么: 简单的一句话来讲:web-view 是 ...

  5. h5在微信自定义分享php,h5页面自定义微信分享

    官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 开发准备:公众号绑定好需要开发的服务器域名. ...

  6. H5页面使用微信网页授权实现登录认证

    在用H5开发微信公众号页面应用时,往往需要获取微信的用户信息,H5页面在微信属于访问第三方网页,因此通过微信网页授权机制,来获取用户基本信息,此处需要用户确认授权才能获取,用户确认授权后,我们可以认为 ...

  7. 小程序跳到h5页面_微信小程序跳转到H5页面实战篇

    有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...

  8. 微信无法连接支付服务器,App接入微信H5支付常见错误及原因

    在App上接入微信H5支付一般都会遇到一些错误.本文讨论了这些错误的解决方案和背后的原因,希望能让读者能少踩些坑. 错误可以分为两类:一是H5支付域名设置错误,二是URL Scheme跳转App错误. ...

  9. [html] H5页面在微信中如何禁止分享给好友和朋友圈?

    [html] H5页面在微信中如何禁止分享给好友和朋友圈? 利用JSBridge实现调用微信提供的一些原生功能,可以通过调用隐藏操作菜单来实现禁用分享. 代码如下: document.addEvent ...

最新文章

  1. Smart Card知识
  2. Maven jdk.1.7
  3. FLEX RSL 部署产生的问题
  4. 突袭HTML5之SVG 2D入门1 - SVG综述
  5. AJAX省市县三级联动的实现
  6. 【项目管理】风险分析
  7. 微博营销不可不知的微博六种人
  8. html人物动画效果图,9款用HTML5/CSS3制作的动物、人物动画
  9. 参观云栖小镇体会_云栖小镇感受
  10. Java爬虫Jsoup篇
  11. en55032最新标准下载_欧盟CE认证EN55032标准
  12. 无线摄像头服务器关闭,监控摄像头服务器停止
  13. [Hello World教程] 使用HBuilder和Uni-app 生成一个简单的微信小程序DEMO
  14. win10桌面mac化保姆级教程[干货] 小白也能拥有的简(酷)约(炫)实用桌面
  15. duilib开发(六):基本控件介绍
  16. 推荐几款比较好用的聊天机器人bot开发工具
  17. java实现9*9乘法表
  18. 用isprime判断是否为素数(函数法)
  19. JAVA第一次授课心得_关于第一次java课的感想
  20. GJCTF 官方WP PWN部分

热门文章

  1. mysql被覆盖安装找回数据
  2. AssemblyInfo.cs文件详解
  3. 锐捷睿易:路由器WAN口三种上网方式的选择
  4. 用C语言编码定积分,C语言__用六种方法求定积分C语言__用六种方法求定积分.doc...
  5. 2020年成都市集成电路行业产量、市场规模及集成电路行业潜力趋势分析[图]
  6. HTML+CSS实现导航页
  7. Geany 中文编码问题
  8. 【Cqupt热身赛】诡异的饭卡 【01背包、动态规划】
  9. hdu 2546 饭卡(P01-背包)
  10. 跳槽,如何选择一家公司