springboot+vue获得微信openId

本文介绍前后端分离的开发模式如何获取用户的微信openId（用户已关注公众号，并通过公众号菜单跳转页面），后端采用springboot，前端采用vue。

一、后端所需代码

建议直接参考Binary Wang大佬的demo，后期可将需要的代码转移到你自己的后端项目中（demo项目名：weixin-java-mp-demo-springboot），gitHub地址：https://github.com/binarywang
项目拉下来之后先看README文件，配置相关信息（其中的appId、appsecret和token如何配置请继续向下看，而aesKey随便输入点内容即可，因为这个是用于消息加密用的，获取openId用不到这个）

二、申请微信测试号及相关准备操作

开发阶段可以申请一个公众账号测试号用于接口的开发测试，直接访问网址然后微信扫码登录即可，链接：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421137522
登陆后如图所示：appId和appsecret就是要填写到后端项目配置文件中的信息，token则是自己设置，只要保证测试号中的token和后端项目配置文件中设置的token保持一致即可。

1. 接口配置信息中的URL应该填写服务器的部署地址，但是开发阶段可采用ngrok内网穿透来映射自己的本地开发地址，具体操作可参考https://www.jianshu.com/p/6e2db0ee73f6和https://blog.csdn.net/a5252145/article/details/84895271 （打开ngrok官网后先登录，选择用gitHub账号登录即可，然后就可以看到自己的authtoken了）

下载好ngrok后，打开ngrok.exe文件，输入命令ngrok authtoken (ngrok官网上显示的你的token)，然后输入命令ngrok http (你的项目运行端口号，例如：8080)，最后显示如下页面即证明内网穿透成功：
然后你就可以在测试号的接口配置信息中填写URL了，例如我的ngrok域名是 edf53df6.ngrok.io，api路径是后端demo项目WxPortalController的路径名“/wx/portal/{appid}”，所以最后URL中填写的就是：http://edf53df6.ngrok.io/wx/portal/(这里填你的appId)，最后在测试号管理页面-接口配置信息中点击确定即可验证是否设置成功（免费版的ngrok默认连的是国外服务器，所以速度比较慢，点击一次可能会提示配置失败，多点几次确定即可），至此接口配置信息就设置完成了。
2. JS接口安全域名可以不设置，也可以直接填入你之前获得的ngrok域名。这个设置是用来授权你的域名可以调用微信的JSSDK高级接口的（一般是公众号的一些功能接口，你可以直接参考微信jssdk的文档，看是否有需要用到的接口）
3. 测试号管理的体验接口权限表中有一个很重要的设置，在网页服务-网页账号-网页授权获取用户基本信息的后边有一个设置按钮，这里填写你回调页面的域名（就是你要用户点击菜单后要跳转哪个页面的域名，测试号中可设置ip地址，例如：192.168.0.xxx:8080）。到此微信测试号的设置就完成了。

三、前端页面方法实现

1. 首先你需要使用axios进行跨域请求来获取微信传给你的openId等信息，axios跨域请求实现方法可参考：https://www.cnblogs.com/lieaiwen/p/9772927.html （注：应设置的请求地址为：https://api.weixin.qq.com）
2.在微信公众号跳转页面是，微信会将code返回到url路径中，例如：http://192.168.0.xxx:8080/?code=xxxxxx&state=/#/open url中的open是我自己前端项目的路由，code即我们要获取的值，可用如下方法获取：

let code = window.location.search.split('&')[0].split('=')[1];

（注：window.location.search相关用法可自行百度，可参考：https://blog.csdn.net/qq_41261490/article/details/81205920
获取code之后，最好是把url恢复正常，否则后面的路由跳转都会带有code，恢复方法可参考：https://www.cnblogs.com/manman04/p/6129464.html）
接下来就是拼接我们想微信请求openId的url了，代码如下：

      let appId = 'xxxx';let appsecret = 'xxxxxxxx';let code = window.location.search.split('&')[0].split('=')[1];let urlPath ='/api/sns/oauth2/access_token?appid=' +appId +'&secret=' +appsecret +'&code=' +code +'&grant_type=authorization_code';

（注：url中的“/api”是第一步中设置axios跨域请求设置的，实际上/api=‘https://api.weixin.qq.com’）
3. 最后就是写一个axios用于数据的请求和接收了，代码示例如下（具体业务自己实现即可，但切记这个请求一定是在页面加载时自动调用的，例如在mounted中调用axios所在的方法）：

      this.axios.get(urlPath) //这个urlPath就是上一步拼接的请求地址.then((res) => {console.log(res); //如果请求成功，你就可以看到openId了，否则会返回错误代码和错误原因}).catch(function(err) {console.log(err);});

至此前端页面也完成了。

四、公众号菜单设置

1. 设置你公众号的跳转菜单，这个除非是你自己的公众号，不然都是公众号的所有者去设置，测试号的菜单如何设置可以自行百度，或者直接去设置一下后端demo项目中的WxMenuController中的menuCreateSample方法，其中的一段代码可做如下更改：

ServletRequestAttributes servletRequestAttributes =(ServletRequestAttributes) RequestContextHolder.getRequestAttributes();if (servletRequestAttributes != null) {HttpServletRequest request = servletRequestAttributes.getRequest();URL requestURL = new URL(request.getRequestURL().toString());String url = this.wxService.switchoverTo(appid).oauth2buildAuthorizationUrl(//String.format("%s://c4e7eb18.ngrok.io/wx/redirect/%s/greet", requestURL.getProtocol(), appid), //原代码，目的是拼接回调地址String.format("http://192.168.0.164:8080/#/open"), //此处是我修改的，设置自己的前端项目的页面地址，域名或ip地址一定要跟测试号设置 网页账号中的域名或ip地址一样，并且这个页面就是刚才介绍的axios跨域请求所在的页面WxConsts.OAuth2Scope.SNSAPI_BASE, null);button34.setUrl(url);}

（此段代码就在WxMenuController中的第86行左右，）
2. 代码修改好了之后，在浏览器或者以你自己的方式调用一下这个方法即可
3. 打开微信扫码，扫一下你测试号管理页面中的关注二维码关注即可（关注期间可注意后端demo项目的debug日志，会有用户关注的信息提示打印出来），然后你就会看到你自定义的菜单了，点即可跳转（理论上来说如果你手机和你本地项目不在一个局域网内页面是打不开的，你可以下载微信开发者工具来进行测试（下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html ），访问地址就在你第二步调用menuCreateSample方法时debug日志打印的内容中）。至此整个获取openId的过程就都完成了。

五、后端demo项目代码的转移

1. 你需要将项目配置文件中的相关代码复制到你自己后端项目的配置文件中
2. 将我如图所示中圈出部分的文件复制到你自己项目中（controller文件夹中的文件你可以放在你自己的项目controller文件夹中，其实这些代码几乎可以完成你整个公众号的运营了）

3. 在pom文件中加入如下依赖：

        <!--微信公众号相关--><dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-mp</artifactId><version>3.4.0</version></dependency>

至此项目代码转移完毕！

springboot+vue公众号页面授权获得微信openId相关推荐

微信公众号开发系列-获取微信OpenID
在微信开发时候在做消息接口交互的时候需要使用带微信加密ID(OpenId),下面讲讲述2中类型方式获取微信OpenID,接收事件推送方式和网页授权获取用户基本信息方式获取. 1.通过接收被动消息方式获 ...
vue 公众号扫描_vue编写微信公众号打开相机功能
vue编写微信公众号打开相机功能,什么都不多说直接上代码页面布局代码 class="previewer-demo-img" :key="index" :src ...
微信公众号页面如何跳转至关注公众号页面
微信公众号页面如何跳转至关注公众号页面 1.获取微信公众号biz字段 a.点击公众号历史文章,在浏览器中打开 b.鼠标右键,查看网页源代码 c.复制红框的字段即为biz字段 2.拼接biz字段成完 ...
微信公众号第三方授权开发——推送component_verify_ticket协议
微信公众号第三方授权--接受微信推送component_verify_ticket协议作者:凌晨四点的newyork 接收component_verify_ticket 在第三方平台创建审核通过后, ...
公众号如何获得关注粉丝openid?
前言寻找一个公众号关注者的微信openid,知道他的手机号等基本信息,如何获取这位粉丝的openid? 本来有个数据库直接可以存储注册用户的基本信息的,但是查询的用户属于只关注,并没有注册,所以数据 ...
微信公众号网页授权--前端获取code及用户信息（vue）
前段时间开发微信公众号网页授权,虽然网上已经有很多关于这方面的博客或者教程,但是第一次开发还是遇到挺多坑的,以下分享一下我的踩坑填坑之路. 一.测试号相关配置首先在你公司申请的测试号上配置好相关信息 ...
关于微信公众号页面获取code进行微信授权登录
关于微信公众号页面获取code进行微信授权登录前言提示:本文章为个人平时开发中的一些坑,对于新手可以耐心看一下,如果您感觉可以的话,请点个小星星再走吧,多谢了~~~ 提示:以下是本篇文章正文内容( ...
vue微信公众号页面分享
vue微信公众号页面分享 utils=>share.js const wx = require("weixin-js-sdk"); // 这块因为我们业务是必须在公众号里面的 ...
微信公众号网页授权--前端获取code及用户信息（vue）【简单详细版】
嗨喽大家好,前段时间开发微信公众号网页授权,虽然网上已经有很多关于这方面的博客或者教程,但是第一次开发还是遇到挺多坑的,以下分享一下我的遇到的一些问题的见解,希望对你们有帮助. 一.测试号相关配置首 ...
微信网页扫码登录和公众号网页授权登录的比较
最近在做PC二维码扫码登录的功能,总结了一些问题 # 主要区别二者的主要区别: 差异 PC网页扫码登录公众号网页授权登录账号要求需要开放平台账号创建网站应用一个认证过的服务号就可以(也可以使 ...

springboot+vue公众号页面授权获得微信openId