WxJava+Vue3 实现微信网页授权登录功能

WxJava+SpringBoot 实现公众号网页授权真的超级简单，后端就两个接口搞定。

获取到用户信息后需要进行注册的参数只有三个，分别是：唯一标识、用户名称、用户头像，其他没了。

maven 坐标：

		<!--微信公众号开发-->
        <dependency>
            <groupId>com.github.binarywang</groupId>
            <artifactId>weixin-java-mp</artifactId>
            <version>4.5.0</version>
        </dependency>

代码两个接口，一个是获取链接：getCode，返回的链接是给用户点击使用的，用户点击该链接后，回调到第二个接口：getOpenId，在这个接口里面就能够获取到用户信息了，然后进行注册，带着 token 重定向到前端页面完成登录

	@Autowired
	private WxMpService wxMpService;

	/**
	 * 微信客户端授权（请求这个接口，用户点击返回的链接就会请求到 getOpenId，在 getOpenId 中就可以获取到用户的信息并注册返回 token）
	 */
	@GetMapping("/getCode")
	public String getCode(){
		try {
			//微信获取到code回调地址
			String redirectUrl =  "https://下面接口的地址/wx/getOpenId";
			WxOAuth2Service oAuth2Service = wxMpService.getOAuth2Service();
			String authorizationUrl = oAuth2Service.buildAuthorizationUrl(redirectUrl, WxConsts.OAuth2Scope.SNSAPI_USERINFO, null);
			//网页授权
			log.debug("重定向url：>> " + authorizationUrl);
			return authorizationUrl;
		} catch (Exception e) {
			log.error("response重定向失败：>>" + e.getMessage());
			e.printStackTrace();
		}
		return "";
	}

	@RequestMapping(value="/getOpenId")
	public void getOpenId(String code, String state, HttpServletResponse response){
		// 重定向回前端页面
		String ACS_ADS_ME = "https://你的前端页面/aigc";
		try {
			WxOAuth2Service oAuth2Service = wxMpService.getOAuth2Service();
			WxOAuth2AccessToken accessToken = oAuth2Service.getAccessToken(code);
			System.out.println("accessToken = " + accessToken);
			String openId = accessToken.getOpenId();
			WxOAuth2UserInfo userInfo oAuth2Service.getUserInfo(accessToken, "zh_CN");
			log.info("用户信息：{}",oAuth2Service.getUserInfo(accessToken, "zh_CN"));
			// 这里可以直接写用户注册逻辑
			String token = userService.register(userInfo);
			// 将 token 拼接在前端页面，让前端页面识别到 token 后放入请求头使用
			response.sendRedirect(ACS_ADS_ME+"?token="+token);
		} catch (WxErrorException e) {
			e.printStackTrace();
			throw new RuntimeException("获取openId失败！");
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

前端的逻辑就是识别链接上的 token，判断链接是否带着 token，如果带着 token 就拿来使用即可

如果你使用 vue 可以通过：route.query.token 来获取到拼接在链接上的 token 值

将 token 放入请求头，然后直接刷新页面，重新加载用户信息，完事。

有啥子问题欢迎在评论区留言

有人问这个 ui 是怎么出现的？当用户在微信里点开第一个接口返回的链接就会出现这个，我刚开始也摸不着头脑不知道这玩意怎么出现的