文章目录
- 前言
- 1、配置微信测试公众号
- 2、SpringBoot实现授权
- 3、前端部分
- 4、测试
- 总结
1、配置微信测试公众号
同样,这里拿微信官方提供的测试公众号进行测试
1、登录微信测试号:https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
2、配置网页访问域名(注意:这里配置的是网页访问的域名哦)
3、往下滑,找到网页账号,进行配置(注意:这里配置的是后端接口的域名)
注意:这里配置的两个域名必须是公网的域名,我这里用的是内网穿透技术,仿制了两个公网域名映射到我本地端口,有时间我会单独写一篇关于如何免费进行内网穿透的文章。
至此,配置完毕。
2、SpringBoot实现授权
提前说明:其实这里有两种方式,但其实本质是一样的,因为目的都说获取code值,无非是前端做多一点或者后端做多一点,都差不多,因为我相信看这篇文章的可能后端多一点,所以我就写后端获取code的方式啦,但另外一种前端获取code的方式我也会顺带说的,大家觉得那种好就用那种~
1、引入依赖
<dependencies>
<dependency>
<groupId>com.github.binarywang</groupId>
<artifactId>weixin-java-mp</artifactId>
<version>4.0.0</version>
</dependency>
<dependency>
<groupId>dom4j</groupId>
<artifactId>dom4j</artifactId>
<version>1.1</version>
</dependency>
</dependencies>
2、添加配置
#公众号id和秘钥
wechat.mpAppId: wx09f201013e81d8
wechat.mpAppSecret: 6c999765c151850d28055e8b6e2eda
# 授权回调获取用户信息接口地址
wechat.userInfoUrl: http://eric.vipgz1.91tunl.com/api/user/wechat/userInfo
3、添加工具类
@Component
public class ConstantPropertiesUtil implements InitializingBean {
@Value("${wechat.mpAppId}")
private String appid;
@Value("${wechat.mpAppSecret}")
private String appsecret;
public static String ACCESS_KEY_ID;
public static String ACCESS_KEY_SECRET;
@Override
public void afterPropertiesSet() throws Exception {
ACCESS_KEY_ID = appid;
ACCESS_KEY_SECRET = appsecret;
}
}
4、编写Controller
@Controller
@RequestMapping("/api/user/wechat")
public class WechatController {
@Autowired
private UserInfoService userInfoService;
@Autowired
private WxMpService wxMpService;
@Value("${wechat.userInfoUrl}")
private String userInfoUrl;
@GetMapping("/authorize")
public String authorize(@RequestParam("returnUrl") String returnUrl, HttpServletRequest request) {
String redirectURL = wxMpService.oauth2buildAuthorizationUrl(userInfoUrl,
WxConsts.OAUTH2_SCOPE_USER_INFO,
URLEncoder.encode(returnUrl.replace("guiguketan", "#")));
return "redirect:" + redirectURL;
}
@GetMapping("/userInfo")
public String userInfo(@RequestParam("code") String code,
@RequestParam("state") String returnUrl) throws Exception {
WxMpOAuth2AccessToken wxMpOAuth2AccessToken = this.wxMpService.oauth2getAccessToken(code);
String openId = wxMpOAuth2AccessToken.getOpenId();
WxMpUser wxMpUser = wxMpService.oauth2getUserInfo(wxMpOAuth2AccessToken, null);
//这里根据自己的业务来,我是获取到openId后判断该用户是否存在,如果不存在,那么将该用户新增到数据库中
UserInfo userInfo = userInfoService.getByOpenid(openId);
if(null == userInfo) {
userInfo = new UserInfo();
userInfo.setOpenId(openId);
userInfo.setUnionId(wxMpUser.getUnionId());
userInfo.setNickName(wxMpUser.getNickname());
userInfo.setAvatar(wxMpUser.getHeadImgUrl());
userInfo.setSex(wxMpUser.getSexId());
userInfo.setProvince(wxMpUser.getProvince());
userInfoService.save(userInfo);
}
//生成token
String token = JwtHelper.createToken(userInfo.getId(), userInfo.getNickName());
if(returnUrl.indexOf("?") == -1) {
//等于-1说明不存在
return "redirect:" + returnUrl + "?token=" + token;
} else {
return "redirect:" + returnUrl + "&token=" + token;
}
}
}
说明:其中用了JWT工具类,关于JWT其实也没啥说,简单来说就是将用户信息封装为一个字符串,称之为Token,并且由,公共部分、私有部分、签名部分组成,我们可以获取其中任何一部分,JWT最重要的作用就是对 token信息的防伪作用。
3、前端部分
前端部分是已进入页面,自动发送请求给后端,然后由后端给微信服务器发送获取Code的请求,也就是用户授权。
created() {
// 处理微信授权登录
this.wechatLogin();
},
methods: {
wechatLogin() {
// 处理微信授权登录
let token = this.getQueryString('token') || '';
if(token != '') {
window.localStorage.setItem('token', token);
}
// 所有页面都必须登录,两次调整登录,这里与接口返回208状态
token = window.localStorage.getItem('token') || '';
if (token == '') {
let url = window.location.href.replace('#', 'guiguketan')
window.location = 'http://eric.free.idcfengye.com/api/user/wechat/authorize?returnUrl=' + url
}
console.log('token2:'+window.localStorage.getItem('token'));
},
方式二:这个code也可以由前端来进行发送获取code,然后前端将这个code直接发送给后端。
4、测试
1、任意点击一个菜单
2、可以看到就弹出授权的窗口啦~
3、此时只要我们点击同意,那么会自动回调调用该接口,微信放会传递一个code和要跳转的路径给我们
到这里,那么微信授权就完毕了
总结
怎么样,是不是特别简单,简单来说流程就是:
- 用户进入页面,前端发送请求给后端,携带要跳转页面的参数
- 后端接受到请求后,给微信服务器发送用户授权的请求