【微信公众号网页项目】Vue Spring Boot，微信公众号网页项目，授权微信并获取用户个人信息

微信网页项目，授权微信并获取用户个人信息

准备工作

一、注册公众号

https://mp.weixin.qq.com/ 这里我们使用的个人用户，使用公众平台测试账号进行开发。（注：实际企业开发项目中，需要认证企业并使用实际公众号开发）

二、设置相关内容

1、进入公众平台测试账号页面，如图所示

在这里插入图片描述 2、牢记appID以及appsecret数据，是发起请求接口的重要参数

在这里插入图片描述 3、JS接口安全域名修改，这里是本地测试，所以直接填本地前端的地址，比如192.168.3.28:8080（查看本机ip地址：win+R 输入cmd 回车打开控制台窗口，输入ipconfig查看本机ip地址）

4、页面下拉查看网页授权获取用户基本信息，点击修改，本地测试的话，和上面JS接口安全域名填写一致就可以
在这里插入图片描述

开始开发

一、查看开发文档

确定基本步骤：

 - 引导用户进入授权页面同意授权，获取code
 - 通过code换取网页授权access_token（与基础支持中的access_token不同）
 - 如果需要，开发者可以刷新网页授权access_token，避免过期
 - 通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）

1、用户打开微信链接，微信客户端会自动跳转到回掉地址并且地址栏会携带code参数
2、开发者需要获取code并使用code请求接口，获取access_token信息，access_token参数尽量存在服务器中，该参数存在有效时长，超时需要重新授权
3、通过access_token获取用户基本信息

二、代码实现

1、后端
UserController.java


	private String appid = "*******************";
	private String secret = "*******************";

	@GetMapping("/get_access_token") //获取access_token
    public Map<String, Object> get_access_token(@RequestParam String code) throws IOException, SignatureException, NoSuchAlgorithmException, InvalidKeyException {
        Map<String, Object> map = new HashMap<>();

        HttpGet httpGet = new HttpGet("https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + appid + "&secret=" + secret + "&code=" + code + "&grant_type=authorization_code");

        httpGet.setHeader("Accept", "application/json;charset=utf-8");

        CloseableHttpClient httpClient = HttpClientBuilder.create().build();
        CloseableHttpResponse response = httpClient.execute(httpGet);
        // 获取响应状态码
        int statusCode = response.getStatusLine().getStatusCode();
        // 获取响应内容
        String responseBody = EntityUtils.toString(response.getEntity());
        
        // 关闭响应对象
        response.close();
        map.put("code", statusCode);
        map.put("response", new String(responseBody.getBytes(StandardCharsets.ISO_8859_1), StandardCharsets.UTF_8));

        return map;
    }

	@GetMapping("/get_user_info") //获取userinfo
    public Map<String, Object> get_user_info(@RequestParam String access_token,@RequestParam String openid) throws IOException, SignatureException, NoSuchAlgorithmException, InvalidKeyException {
        Map<String, Object> map = new HashMap<>();

        HttpGet httpGet = new HttpGet("https://api.weixin.qq.com/sns/userinfo?access_token=" + access_token + "&openid=" + oppenid + "&lang=zh_CN");

        httpGet.setHeader("Accept", "application/json;charset=utf-8");

        CloseableHttpClient httpClient = HttpClientBuilder.create().build();
        CloseableHttpResponse response = httpClient.execute(httpGet);
        // 获取响应状态码
        int statusCode = response.getStatusLine().getStatusCode();
        // 获取响应内容
        String responseBody = EntityUtils.toString(response.getEntity());
        // 关闭响应对象
        response.close();
        map.put("code", statusCode);
        map.put("response", new String(responseBody.getBytes(StandardCharsets.ISO_8859_1), StandardCharsets.UTF_8));
        return map;
    }

前端:
index.vue

...
import { get_access_token,get_user_info } from "@/api/http.js"

export default {
	mouted(){
		this.get_userinfo()
	},
	method:{
		async get_userinfo(){
			const code = this.$route.query.code
			await obj = get_access_token(code)
			const response = JSON.parse(obj.response)
			console.log(response) // 控制台查看数据
			await res = get_user_info(response.access_token,response.openid)
			console.log(JSON.parse(res.response)) // 控制台查看数据
		}
	}
}

http.js

//将拦截器整体导入
import request from "./Interceptor.js"; //导入已经写好的拦截器,拦截器代码可私聊我获取
// 封装所有的API接口

export function get_access_token(code) {
  return request({
    url: "/get_access_token",
    method: "get",
    params: {
      code: code
    }
  });
}

export function get_user_info(access_token,openid) {
  return request({
    url: "/get_user_info",
    method: "get",
    params: {
      access_token: access_token,
      openid:openid
    }
  });
}

三、测试结果

使用微信或者PC微信开发者工具打开网页：https://open.weixin.qq.com/connect/oauth2/authorize?appid=*********&redirect_uri=http://192.168.3.28:8080/demo&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
微信开发文档给出的测试图片

在这里插入图片描述

注意事项⚠️

1、网页链接格式：https://open.weixin.qq.com/connect/oauth2/authorize?appid=&redirect_uri=&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect，redirect_url必须和授权回调页面域名一致

2、该链接只能在微信客户端打开，PC端可以使用微信开发者工具调试

3、博主只实现了正向没有错误的授权方式，如果正式项目中，需要将access_token存入redis或者缓存中并判断过期时间，如果过期需使用refresh_token接口刷新；并且接口中会存在错误情况，微信开发文档中给出了相关错误码所对应的错误情况，请根据实际情况修改

4、本文章仅仅展示了微信开发以及初级后端开发的冰山一角，也请各位大佬提出宝贵意见