受域名等因素的影响，在开发过程中，我们一般不采用注册的公众号来部署测试，而是采用公众平台测试号
公众平台测试号访问地址
在测试号页面中，我们需要获取或操作一下几个相关的配置
- 查看测试号的 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 等是否存在，否则跳转到授权登录地址
最后总结
- 从上面三个步骤可以看出来，基本上都是进行页面重定向
- 前端登录 --(重定向)--> 微信授权地址 --(重定向)--> 后端接口 --(重定向)--> 前端首页
- 最主要的访问微信服务器的核心