微信公众号开发-授权

采用 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);
}