1 第一步:用户同意授权,获取code2 第二步:通过code换取网页授权access_token3 第三步:拉取用户信息(需scope为 snsapi_userinfo)SpringBoot:2.1.4.RELEASEweixin-java-mp:3.4.0引言


这里我们开发微信公众号使用了第三方SDK何为第三方SDK呢?

前人封装了一系列的API调用方法我们只需引入就可快速开发微信端。

我们如何调试本地微信的授权呢?或者微信其他相关的API接口?

由于项目在本地微信是外部,微信外部无法访问我们本地的接口所以这时候我们需要使用一款内网穿透工具Natapp,这样我们的项目就可以供外部访问。

没有公众号怎么办?

微信提供了测试公众号给开发者调试对于普通公众号来讲少了支付好像其他的都支持。

测试账号


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

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

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

项目配置

<dependency>  <groupId>com.github.binarywanggroupId>  <artifactId>weixin-java-mpartifactId>  <version>3.4.0version>dependency>
wechat:  appId: #appId  appSecret: #appSecret  token: #服务器消息token  aesKey: #aesKeyprojecturl:  projectUrl: #natapp调试地址

项目代码


1、配置类

/*** 可以放一些微信相关的配置属性*/@Component@ConfigurationProperties(prefix = "wechat")@Datapublic class WeChatAccountConfig {    /**     * 设置微信公众号的appid     */    private String appId;    /**     * 设置微信公众号的app secret     */    private String appSecret;    /**     * 设置微信公众号的token     */    private String token;    /**     * 设置微信公众号的EncodingAESKey     */    private String aesKey;}
/*** 项目公用d 一些API地址*/@Component@ConfigurationProperties(prefix = "projecturl")@Datapublic class ProjectUrlConfig {    /**     * 项目访问URL     */    private String projectUrl;}

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

2、SDK配置类

@Componentpublic 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配置。

3、控制层

@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接口这里大家可以自由发挥返回前端页面也可以。项目测试



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

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

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

以上就是用户授权的操作一般在公众号开发嵌入H5网页常用的第一步还有就是jdsk验证也需要这里不细讲可以百度相关教程,使用了此SDK之后不需要自己去封装一些API操作简便了微信开发。

挂代理无法访问网页了怎么办_微信H5网页授权相关推荐

  1. h5 修改title 微信_微信h5网页自定义分享(标题、描述、图标)

    $this->appId =$appId; $this->appSecret =$appSecret; }publicfunction getSignPackage() { $jsapiT ...

  2. 微信H5网页链接如何自定义分享标题,简介和图片

    微信H5网页链接怎么才能自定义分享标题,简介和图片? 需求概述 微信中可以直接转发网页链接,用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友,朋友圈,QQ等.但直接这样分享的话,用 ...

  3. 微信H5网页调用扫一扫功能(vue)中遇到的问题

    微信H5网页使用扫一扫时遇到的问题 首次进入界面调用失败 首次进入界面调用失败 问题:进入页面,点击扫一扫按钮调用微信扫一扫功能失效,但是刷新当前页调用就正常了 解决方法: // 使用扫一扫按钮的页面 ...

  4. app 访问h5 如何截取_微信H5支付申请相关问题

    之前的文章「微信支付申请相关问题」里说过微信公众号和 APP 申请微信支付,今天来说下微信 H5 支付的申请. 背景介绍 H5 支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认 ...

  5. facebook网页版登录_微信网页版关闭登录将影响一大批使用itchat等Web Api方案的微信机器人...

    微信网页版限制登录或禁止登录将影响一大批使用itchat等Web Api方案的微信机器人 网页版微信 API 被封了,像使用 itchat wxpy wxbot等基于 web API 的微信 robo ...

  6. python手机远程控制电脑访问网页_Python 实战系列-微信或网页远程控制电脑

    Python 实战系列-微信或网页远程控制电脑 本系列课程为Python实战系列课程:使用微信控制电脑,使用Python的Web框架Flask搭建网页, 并使用网页控制电脑:使用wxPython编写图 ...

  7. paypal中授权返回_微信开放平台授权登录流程详解

    最近在工作中用到了一些微信开放平台授权第三方登录,来获取用户基本信息的操作.看了一下微信给出的官方文档,写的已经很详细了,这里按照自己的步骤进行了一下总结,并附带了一些示例,方便大家理解. 微信公众号 ...

  8. 在微信H5网页中获取用户基本信息

    在微信中访问一些HTML5网页时,我们常看到是否允许访问用户公开信息的提示.如果用户点击"允许",网页就可以获取到用户的头像以及昵称等信息. 如果把在网址拷贝出来,然后在非微信环境 ...

  9. vue在微信里面的兼容问题_微信H5页面兼容性问题分析及解决方法

    随着H5页面越来越流行,越来越多的开发者都开始用最近H5做微信公众号,在这个过程中自然也会遇到不少的问题.小编在这里整理了五种常见的微信H5页面兼容性问题,来和大家分析一下问题的详情.出现原因以及相对 ...

最新文章

  1. 《JAVA与模式》之模板模式(转载)
  2. TabStrip within ASP.NET 2.0 in C# with Design Time Support
  3. try-catch语句讲解
  4. jQuery插件实现网页底部自动加载-类似新浪微博
  5. 第七讲 塔木德破产分配法练习题
  6. Qt第六课 QDateTime使用
  7. AI和大数据结合,智能运维平台助力流利说提升竞争力
  8. 不符合c语言表达式,C语言的基本语法有哪些?,已知各变量的类型说明如下,则以下不符合C语言语法的表达式是...
  9. phpQuery乱码解决经验分享
  10. Hybrid App 混合app 开发
  11. 数据价值挖掘利器!阿里云实时数仓AnalyticDB PG
  12. 路由器有以下几种联网接口
  13. Shell脚本三种循环
  14. 关于 range.autofilter 和 VBA的 filter
  15. 负数时的有符号整型和无符号整型的转换
  16. 挣扎数学建模:各种算法汇总(2)多属性决策模型
  17. CentOS 8 下载中文输入法的问题
  18. 高分SCI都在用 P for trend,快来看看吧
  19. 最后一次谈开源与免费
  20. linux下安装pycharm社区版

热门文章

  1. eval 与 Function
  2. (原)Eclipse中将JNI生成的so打包成jar的步骤
  3. 通过Windows Azure Connect ,实现本地机器与Windows Azure 虚拟机的相互连接(转+译)...
  4. 惜分飞oracle,惜分飞 - 提供7*24专业数据库(Oracle,SQL Server,MySQL等)恢复和Oracle技术服务@Tel:+86 13429648788...
  5. push计算机语言,数组的操作push,pop,shift,unshift详解
  6. 00018计算机应用基础2019年4月,2019年4月自考计算机应用基础考前试题和答案00018.pdf...
  7. android 仿微信聊天气泡显示图片,实现仿照微信聊天气泡里显示图片效果的自定义View...
  8. 字符串从右截取_跟运维组学Python基础day04(字符串str的索引和切片)
  9. 算法c语言源码_C语言实现推箱子
  10. body curl 设置post_深入说说postman发送post请求