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 等是否存在,否则跳转到授权登录地址

最后总结

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

分类:

技术点:

相关文章: