SpringBoot+Vue前后端分离⽹页授权解决⽅案
⼀、引⾔
全⽹最全的前后端分离⽹页授权解决⽅案。如果有更好的优化⽅案，欢迎多多交流，⽂末有作者联系⽅式，欢迎叨扰。
⼆、⽹页授权的步骤
1 第⼀步：⽤户同意授权，获取code
2 第⼆步：通过code换取⽹页授权access_token
3 第三步：刷新access_token（如果需要）
4 第四步：拉取⽤户信息(需scope为 snsapi_userinfo)
5 附：检验授权凭证（access_token）是否有效
详情参考
注意：这⾥的access_token属于⽹页授权access_token，⽽⾮普通授权的access_token，如下：
关于⽹页授权access_token和普通access_token的区别
1、⽹页授权是通过OAuth2.0机制实现的，在⽤户授权给后，可以获取到⼀个⽹页授权特有的接⼝调⽤凭证（⽹页
授权access_token），通过⽹页授权access_token可以进⾏授权后接⼝调⽤，如获取⽤户基本信息；
2、其他接⼝，需要通过基础⽀持中的“获取access_token”接⼝来获取到的普通access_token调⽤。
但是没有讲得很明⽩。其实两者的区别就是：
第⼀，⽹页授权access_token只要⽤户允许后就可以获取⽤户信息，可以不关注，⽽普通access_token没有关注，获取⽤户信息为空；
第⼆，两者的每⽇限制调⽤凭次不同，普通access_token每⽇2000次，获取⽹页授权access_token不限次数，获取⽤户信息每⽇5万次。
三、后端接⼊
后端采⽤开源⼯具
3.l引⼊jar包
<dependency>
<groupId>com.github.binarywang</groupId>
<artifactId>weixin-java-mp</artifactId>
<version>3.8.0</version>网
</dependency>
3.l添加配置
这⾥换成⾃⼰的appid和appsecret，可以申请#
wechat:
mpAppId: appid
mpAppSecret: appsecret
3.3 新建读取配置⽂件WechatMpProperties.java package com.hsc.power.fig;
import lombok.Data;
import org.t.properties.ConfigurationProperties; import org.springframework.stereotype.Component;
/**
* 配置⽂件
*
* @author liupan
* @date 2020-05-26
*/
@Data
@Component
@ConfigurationProperties(prefix ="wechat")
public class WechatMpProperties {
private String mpAppId;
private String mpAppSecret;
}
3.4 新建⾃定义配置WechatMpConfig.java
import me.chanjar.weixin.mp.api.WxMpService;
import me.chanjar.weixin.mp.api.impl.WxMpServiceImpl;
import me.chanjar.fig.WxMpConfigStorage;
import me.chanjar.fig.impl.WxMpDefaultConfigImpl;
import org.springframework.beans.factory.annotation.Autowired;
import t.annotation.Bean;
import org.springframework.stereotype.Component;
/**
* 配置
*
* @author liupan
* @date 2020-05-26
*/
@Component
public class WechatMpConfig {
@Autowired
private WechatMpProperties wechatMpProperties;
/**
* 配置WxMpService所需信息
*
* @return
*/
@Bean// 此注解指定在Spring容器启动时，就执⾏该⽅法并将该⽅法返回的对象交由Spring容器管理public WxMpService wxMpService(){
WxMpService wxMpService =new WxMpServiceImpl();
// 设置配置信息的存储位置
wxMpService.setWxMpConfigStorage(wxMpConfigStorage());
return wxMpService;
}
/**
* 配置appID和appsecret
*
* @return
*/
@Bean
public WxMpConfigStorage wxMpConfigStorage(){
// 使⽤这个实现类则表⽰将配置信息存储在内存中
WxMpDefaultConfigImpl wxMpDefaultConfig =new WxMpDefaultConfigImpl();
wxMpDefaultConfig.MpAppId());
wxMpDefaultConfig.MpAppSecret());
return wxMpDefaultConfig;
}
}
3.5 新建⽤户Bean
import lombok.Data;
import me.chanjar.weixin.sult.WxMpUser;
@Data
public class WechatUser {
public WechatUser(WxMpUser wxMpUser, String accessToken){ this.setAccessToken(accessToken);
this.OpenId());
this.UnionId());
this.Nickname());
this.Language());
this.Country());
this.City());
this.City());
this.Sex());
this.SexDesc());
this.HeadImgUrl());
}
private String openid;
private String accessToken;
private String unionId;
private String nickname;
private String language;
private String country;
private String province;
private String city;
private Integer sex;
private String sexDesc;
private String headImgUrl;
}
3.6 授权接⼝WechatController.java
1. /auth：获取授权跳转地址
2. /auth/user/info：初次授权获取⽤户信息
3. /token/user/info：静默授权获取⽤户信息
package com.hsc.power.dm.wechat.web;
import lkit.ExceptionUtils; import com.Rb;
import com.hsc.power.dm.wechat.vo.WechatUser;
slf4j.Slf4j;
import me.chanjar.weixinmon.api.WxConsts;
import me.WxErrorException;
import me.chanjar.weixin.mp.api.WxMpService;
import me.chanjar.weixin.sult.WxMpOAuth2AccessToken; import me.chanjar.weixin.sult.WxMpUser;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController;