受域名等因素的影响，在开发过程中，我们一般不采用注册的公众号来部署测试，而是采用公众平台测试号
公众平台测试号访问地址
在测试号页面中，我们需要获取或操作一下几个相关的配置

• 查看测试号的 APPID 和 APPSECRET
• 给该测试号设置自定义菜单
• 修改授权回调页面域名（测试号可以采用 ip 地址加端口号）
• 扫描测试号二维码，相当于关注这个测试号
• 点击进入 “网页授权获取用户基本信息”，查看微信授权开发文档

一、给测试号设置自定义菜单

给测试号设置自定义菜单需要两步操作，这里采用 postman 工具来进行发送请求

1.获取 Access Token

请求方式：GET
请求地址：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
请求参数：APPID、APPSECRET
返回值：{"access_token":"ACCESS_TOKEN","expires_in":7200}

2.设置自定义菜单

请求方式：POST
请求地址：https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN
请求参数：ACCESS_TOKEN（上面获取到的 access_token）
返回值1(成功)：{"errcode":0,"errmsg":"ok"}
返回值2(失败)：{"errcode":40018,"errmsg":"invalid button name size"}
在 postman -> body -> raw 中添加菜单数据（json格式）

{ "button": [ { "name": "我的项目", "sub_button": [ { "type": "view", "name": "学习", "url": "http://www.baidu.com" }, { "type": "click", "name": "赞一下我", "key": "V1001_GOOD" } ] }, { "type": "click", "name": "关于", "key": "V1001_TODAY_MUSIC" } ]}

二、在公众号 H5 页面微信授权登录

开发前必读：微信授权官方文档
在开发文档中说明，一般我们要进行微信授权登录需要进行一下几个操作步骤

• 第1步：用户同意授权，获取code
• 第2步：通过code换取网页授权access_token
• 第3步：刷新access_token（如果需要）
• 第4步：拉取用户信息(需scope为 snsapi_userinfo)

但是在开发之前须知一下几个事情

• 开发可能采用的前后端分离，前端和后端可能不在同一个域名下
• 测试号“授权回调页面域名”一般设置的是后端服务（域名）地址
• 如果在前端直接向微信服务器发送获取用户信息的相关请求，会出现跨域的问题
• 公众号的 APPID、APPSECRET、Access_Token 等信息涉及到安全性，不适合直接放在前端

所以一般公众号开发过程中，一般我们只有第一步是在前端做，后面三步都是在后端实现。H5 页面微信授权登录的步骤如下：

• 第一步：在前端引导用户进入微信授权登录界面

  访问地址：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
  请求参数：APPID、REDIRECT_URI、SCOPE(snsapi_base或snsapi_userinfo)
  请求参数说明：
  注意1：REDIRECT_URI 为后台地址（即下面第二步的后端接口），且必须为GET
  注意2：REDIRECT_URI 参数需要 encodeURIComponent 函数包裹

• 第二步：后端实现一个接口，接收 code 参数，然后从微信获取用户信息并保存，最后重定向到前端首页

　微信授权成功后，会重定向到这个地址，并携带一个 code 参数，这个 code 参数只能被使用一次

package indi.tracine.demo.controller;import org.json.JSONObject;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import indi.tracine.utils.HttpUtils;/** * @author Tracine * @date 2020-02-24 * @description 微信授权模块 */@Controller@RequestMapping("/wechat")public class WeChatController { //服务号的 APPID 和 SECRET private static final String APP_ID = "***************************"; private static final String APP_SECRET = "***************************"; @RequestMapping(value = "/redirect", method = RequestMethod.GET) public String redirect(String code) { // 获取 Access Token String urlAccessToken = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + APP_ID + "&secret=" + APP_SECRET + "&code=" + code + "&grant_type=authorization_code"; String resultAccessToken = HttpUtils.get(urlAccessToken); JSONObject jsonAccessToken = new JSONObject(resultAccessToken); String openid = jsonAccessToken.getString("openid"); String accessToken = jsonAccessToken.getString("access_token"); // 获取用户信息 String urlUserInfo = "https://api.weixin.qq.com/sns/userinfo?access_token=" + accessToken + "&openid=" + openid + "&lang=zh_CN"; String userJsonString = HttpUtils.get(urlUserInfo); // System.out.println(userJsonString); // 在这里把用户信息存入数据库 // save(); JSONObject userJsonObject = new JSONObject(userJsonString); String userOpenid = userJsonObject.getString("openid"); String userNickname = userJsonObject.getString("nickname"); // 前端首页地址 String urlIndexHome = "http://192.168.23.189:8080/scholar/#/login"; return "redirect:" + urlIndexHome+ "?openid=" + userOpenid + "&nickname=" + userNickname; }}

• 第三步：前端首页从url中获取参数
  　从 url 地址中获取 openid 和 nickname 等信息，然后将信息存储在 localStorage
  　如果是 vue 开发，则可在路由钩子函数中判断 localStorage 判断 openid 等是否存在，否则跳转到授权登录地址

最后总结

• 从上面三个步骤可以看出来，基本上都是进行页面重定向
• 前端登录 --(重定向)--> 微信授权地址 --(重定向)--> 后端接口 --(重定向)--> 前端首页
• 最主要的访问微信服务器的核心