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

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>

至此项目代码转移完毕！