采用 springboot、vue开发微信公众号
1. 注册、认证公众号
2. 准备服务器、备案域名
3. 配置公众号
4. 前端开发
5. 后端开发
1.注册、认证公众号
用企业信息注册和认证公众号
2. 准备服务器、备案域名
准备服务器和域名,服务器和域名要在同一服务商,例如用阿里的服务器需要在阿里备案的域名。
(海外和香港服务器不需要备案也可以访问,拿到域名要先确认备案信息和服务器是否统一)
3. 配置公众号
配置IP白名单(开发环境:自己路由器的IP | 生产环境:服务器IP)
配置网页授权域名(公众号设置-功能设置)
JS接口安全域名和网页授权域名配置一个就可以,一个前端校验,一个后端校验
JS接口安全域名(前端校验:因为采用vue前后端分离开发,前端部署在nginx)
- 配置nginx 配置之后能通过 http://域名/MP_verify_xxxxx.txt 访问就可
server {
listen 80;
server_name 域名;
location / {
root 项目/文件上传路径;
index index.html;
}
}
网页授权域名(后端校验)
将springboot 后端设置为80端口启动,返回MP_verify.txt校验文件的文本即可
@GetMapping("/MP_verify_xxxxxx.txt")
public String mpVetify() {
return "xxxxxxx";
}
因为开发过程中不想搭建nginx,所以采用natapp内网映射工具生成的域名映射到本地的80的端口,将临时域名配置到网页授权域名,先通过校验,然后将后端改为其他端口,将前端设置为80端口-微信网页授权回调地址无法访问80端口外的其他端口
总结一下:
开发时通过后端校验域名
2. 下载校验文件,获取校验文件名称和内容
3. 添加接口,通过访问校验文件名称能获取校验文件内容
4. 修改后端为80端口启动
5. 在”网页授权域名“配置为natapp产生的临时域名
6. 校验通过,域名设置成功
7. 修改后端启动端口,将前端的端口设置为80
开发时通过前端校验域名
- 搭建nginx,修改配置文件
- 在”JS接口安全域名“配置为natapp产生的临时域名
4. 前端开发
获取code
function getCode() {
let appId = '微信公众号appId'
let redirect_uri = encodeURIComponent("http://域名/页面路径")
let scope = "snsapi_base"
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"
}
redirect_uri 为微信网页授权回调的页面,在页面中接收code 参数
将获取到的code传递给后端,后端通过code获取openId等信息
(部署到nginx之后,获取到code 访问-http://域名/页面路径-会发生404,暂时直接在http://域名访问的页面中接收返回的code,希望有大大可以指导)
5. 后端开发
后端采用微信开发 Java SDK进行开发
@GetMapping("login/{code}")
public ResponseEntity<Object> login(@PathVariable("code") String code) throws WxErrorException {
WxOAuth2AccessToken wxOAuth2AccessToken = wxMpService.getOAuth2Service().getAccessToken(code);
String openId = wxOAuth2AccessToken.getOpenId();
Map<String,Object> result = mpUserService.validOpenId(openId);
return new ResponseEntity<>(result, HttpStatus.OK);
}