前言

作为一个程序员小白要时刻记录自己近期学习成果。最近也是接了一个项目通过微信公众号获取openid拿取微信账号信息绑定

一、微信公众号是什么？

微信公众平台开发概述 | 微信开放文档https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html

二、使用步骤

1.申请微信公众号测试号

微信公众平台进入申请测试号然后获取测试号的appID、appsecret，拿到这些信息就可以开始在springboot项目中的application.yml配置

2.springboot配置微信公众号

3.网页授权

1.第一步：用户同意授权，获取code（具体步骤可查看微信开放文档）

公众号拿取微信授权接口地址然后在application中配置，为方便后面我把整个步骤所需要的微信接口都配置进去

wechat:
  appid: wx6f59d6140611d9ee
  secret: 84cce012e3ccb3f873412b53dfd1c0b2
  #微信授权接口地址
  api-auth: https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
  #获取微信授权的access-token的接口地址
  api-auth-access-token: https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
  #获取微信用户信息接口地址
  api-userinfo: https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
  #微信用户授权成功后回调接口地址
  auth-call-back: http://xinyushiaolu.oicp.net/edu-user/weChatApi/authCallBack

然后在controller类中写授权接口然后前端调用接口，注意跳转回调redirect_uri这个参数是你授权回调的地址会页面将跳转至 redirect_uri/?code=CODE&state=STATE。拿取code

   /**
     * 微信授权
     *
     * @param response
     * @param studentNumber
     * @param authSucceedSkipUrl
     * @return
     * @throws IOException
     */
    @GetMapping("/getWeChat")
    public String getWeChat(HttpServletResponse response, String studentNumber, String authSucceedSkipUrl) throws IOException {
        String uRLEncoderAuthCallBack = URLEncoder.encode(weChatConfig.getAuthCallBack(), "utf-8");

        // 用户授权跳转地址
        String apiAuthUrl = weChatConfig.getApiAuth()
                .replace("APPID", weChatConfig.getAppid())
                .replace("REDIRECT_URI", uRLEncoderAuthCallBack)
                .replace("SCOPE", "snsapi_userinfo")
                .replace("STATE", studentNumber + "," + authSucceedSkipUrl);
        response.sendRedirect(apiAuthUrl);
        log.info("用户授权跳转地址apiAuthUrl = {}", apiAuthUrl);
        return "redirect:" + apiAuthUrl;
    }

weChatConfig类是为了引入刚才在application配置的微信appid等接口方便调用

第二步：通过code换取网页授权access_token

前端在需要的地方调用一下该接口进行授权，我们为此做一个回调接口让授权直接跳该网址获取code，然后通过code换取access_token和openid

则此时开发者可以通过access_token和openid拉取用户信息了然后保存到数据库，该接口一次把这几步做到位了

/**
     * 微信授权回调接口
     *
     * @param code
     * @param state
     * @return
     * @throws IOException
     */
    @GetMapping("/authCallBack")
    public Object authCallBack(String code, String state) throws IOException {
        if (StringUtils.isEmpty(code)) {
            return Result.error(CommonExceptionEnum.PARAMETER_VERIFY_ERROR);
        }
        log.info("微信授权回调， code = {}  ,state = {}", code, state);
        //获取微信授权access_token
        String apiAuthAccessTokenUrl = weChatConfig.getApiAuthAccessToken()
                .replace("APPID", weChatConfig.getAppid())
                .replace("SECRET", weChatConfig.getSecret())
                .replace("CODE", code);
        String result = HttpUtil.get(apiAuthAccessTokenUrl);
        log.info("微信授权access_token返回参数：{}", result);
        HashMap<String, String> wechatAuthTokenMap = JSON.parseObject(result, HashMap.class);

        String accessToken = wechatAuthTokenMap.get("access_token");
        String openid = wechatAuthTokenMap.get("openid");

        //如果微信的返回access_token为空
        if (StringUtils.isBlank(accessToken)) {
            return Result.error(CommonExceptionEnum.WECHAT_LOGIN_ERROR);
        }
        //调用微信通过OPENID和ACCESS_TOKEN获取用户信息接口
        String apiUserinfoUrl = weChatConfig.getApiUserinfo()
                .replace("ACCESS_TOKEN", accessToken)
                .replace("OPENID", openid);
        //获取微信用户信息
        String resultUserinfo = HttpUtil.get(apiUserinfoUrl);
        log.info("微信用户信息：{}", resultUserinfo);
        WechatUserInfoDTO wechatUserInfoDTO = JSON.parseObject(resultUserinfo, WechatUserInfoDTO.class);

        //更新数据
        String[] stateArr = state.split(",");
        if (stateArr.length != 2) {
            return Result.error(CommonExceptionEnum.WECHAT_LOGIN_ERROR);
        }
        UpdateWrapper<User> uw = new UpdateWrapper<>();
        uw.eq("student_number", stateArr[0]);
        log.info("getStuNumber=" +  stateArr[0]);
        uw.set("openid", wechatUserInfoDTO.getOpenid())
                .set("bind", 1)
                .set("wechat_avatar", wechatUserInfoDTO.getHeadimgurl())
                .set("nick_name" ,wechatUserInfoDTO.getNickname());

        boolean updateStatus = userBindService.update(uw);
        if(!updateStatus){
            return Result.error(CommonExceptionEnum.STUDENT_NO_EXIST_ERROR);
        }
        log.info("用户授权登录成功跳转地址：{}",stateArr[1]);
        return "redirect:"+stateArr[1];
    }

总结

该文章只是我对自己这段时间的学习的一个总结和记录，当然有不好的地方请指正！同时希望自己能够坚持向自己目标前进，让自己水平不断提高

 准备工作：

1、认证通过的微信公众号

2、获取微信公众号的appid和secret

3、配置回调地址：开发>接口权限>网页服务>网页授权>修改

 该示例为用户静默状态下获取openid的流程，需要获取微信用户头像昵称这些，scope=snsapi_base改为scope=snsapi_userinfo即可

/**
 * 获取openid
 * @param
 * @param
 * @return
 */
@CrossOrigin
@GetMapping("/getopenid")
@ResponseBody
public String getopenid(String code,HttpServletRequest request, HttpServletResponse response){
    String appid= "公众号appid";
    String secret = "公众号secret";
    response.setHeader("Access-Control-Allow-Origin", "*");
    /*星号表示所有的域都可以接受，*/
    response.setHeader("Access-Control-Allow-Methods", "GET,POST");
    String wxLoginUrl = "https://api.weixin.qq.com/sns/oauth2/access_token";
    String param = "appid="+appid+"&secret="+secret+"&code="+code+"&grant_type=authorization_code";
    String jsonString = GetPostUntil.sendGet(wxLoginUrl, param);
    JSONObject json = JSONObject.parseObject(jsonString);
    String openid = json.getString("openid");
    System.out.println("###############"+openid);
    return openid;
}

以上为java后端代码，主要接收参数为 code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试获取openid</title>
</head>
<body>
   <script>
   var STATE = window.location.search.replace('?', '');
   STATE = encodeURIComponent(STATE)
   window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?'+
   'appid=你的微信公众号appid&redirect_uri=回调地址域名（服务器验证通过后，重定向地址）'+
   '&response_type=code&scope=snsapi_base（snsapi_base只能获取openid，snsapi_userinfo可以获取openid和用户资料，但此方式需要用户授权操作）&state="+ STATE +"#wechat_redirect"'
   </script>
</body>
</html>

以上是第一个页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绑定账号</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/demo.css">
  <!--<script>-->
    <!--(function (doc, win) { var htmlFont = function () { var docEl = doc.documentElement, l = docEl.clientWidth, f; f = l / 7.5; docEl.style.fontSize = f + "px" }; htmlFont(); win.addEventListener("resize", htmlFont, false) })(document, window);-->
  <!--</script>-->
  <script type="text/javascript" src="js/Libs/jquery.min.js" ></script>
</head>
<body>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  !function () {
    // 地址栏获取参数
    function getQueryParam(key, url) {
      var searchStr = url || window.location.search;
      searchStr = url ? decodeURIComponent(searchStr) : searchStr;
      searchStr = searchStr.replace(/^\?/, '');
      var params = searchStr.split('&');
      var paraObj = {};
      params.forEach(function (s) {
        var ss = s.split('=');
        ss.length && (paraObj[ss[0]] = ss[1])
      })
      return paraObj[key] !== undefined ? paraObj[key] : ''
    }
    var code = getQueryParam('code');
    var state = getQueryParam('state');
    //请求后端接口，根据code获取openId
    axios.get('后端域名或ip地址/getopenid?code='+ code,{params:{},headers:{'Access-Control-Allow-Origin':"Access-Control-Allow-Origin"}}).then(function (res) {
     alert("openid="+res.data)
    })

  }()
</script>
</html>

以上为第二个页面，这个页面直接可以获取到我们想要的openid

微信公众号获取openId、扫一扫功能

一、拥有80端口配置：

1、微信公众号相关配置

2、后台授权获取code、access_token、openid
参考微信开发文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

二、未拥有80端口配置：

1、需要通过中间服务器（IIS、tomcat）转发获取code然后传递到后台获取access_token和openId
2、微信公众号菜单配置跳转路径：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4ceddbea1632a889&redirect_uri=http://xxxx.com&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect

三、微信公众号中调用扫一扫：

1、后台获取access_token
	get:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+wxAppID+"&secret="+secret
	注意：需要放入缓存中，有效期2小时  7200S（多次获取会导致access_token失效）

2、根据access_token换去票据ticket
	get:https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+ accessToken +"&type=jsapi
	注意：需要放入缓存中，有效期2小时  7200S（多次获取会导致ticket失效）

3、生成签名signature
	生成随机字符串：noncestr=UUID.randomUUID().toString()；
	取当前时间戳：timestamp = String.valueOf(System.currentTimeMillis() / 1000)；
	解码前台传递的URL url = URLDecoder.decode(url)；
		注意：前台当前页面的url需要去掉#以后内容
	加密生成签名signature
	String str = "jsapi_ticket="+ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+URLDecoder.decode(urls);
	signature =Util.SHA1(str);

4、将随机字符串、当前时间戳、生成的签名signature、微信公众号的AppID返回给前台

5、前台需要调用config

实例：

//urls:微信当前页面的url（vue应去掉#之后的内容，不带参数）
public WxSignatureOutData getSignature(String urls) {
	WxSignatureOutData outData = new WxSignatureOutData();
	String accessToken = (String) redisUtil.get("access_token");
	if(Util.isEmpty(accessToken)) {
		getAccessToken();
	}
	String noncestr = UUID.randomUUID().toString();//随机字符串
    String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳
    String ticket = (String) redisUtil.get("ticket");
    if(Util.isEmpty(ticket)) {
    	String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+ accessToken +"&type=jsapi";//这个url链接和参数不能变
    	Json json = HttpClientUtil.doGet(url);
    	Map<String, Object> map = (Map<String, Object>) JSONObject.parse((String) json.getObj());
    	ticket = (String) map.get("ticket");
    	redisUtil.set("ticket", ticket,7000L);
    }
    String str = "jsapi_ticket="+ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+URLDecoder.decode(urls);
    //6、将字符串进行sha1加密
    String signature =Util.SHA1(str);
    outData.setAppid(wxAppID);
    outData.setNoncestr(noncestr);
    outData.setSignature(signature);
    outData.setTimestamp(timestamp);
    return outData;
}

需要返回给前台的参数

public Class WxSignatureOutData {
	private String timestamp;//时间戳
	
	private String noncestr;//随机字符串
	
	private String signature;//签名signature
	
	private String appid;//appid
	}

获取AccessToken

private void getAccessToken() {
       String accessToken = null;
   	String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+wxAppID+"&secret="+secret;
   	Json json = HttpClientUtil.doGet(url);
       Map<String, Object> map = (Map<String, Object>) JSONObject.parse((String) json.getObj());
       accessToken = (String) map.get("access_token");
       redisUtil.set("access_token", accessToken,7000L);
   }