微信公众号开发总结

Posted 2021-03-07 tracine0513

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

• 查看测试号的 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 等是否存在，否则跳转到授权登录地址

最后总结

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