前言
JustAuth，如你所见，它仅仅是一个第三方授权登录的工具类库，它可以让我们脱离繁琐的第三方登录 SDK，让登录变得So easy!
官网文档:官网地址
博主在学习时参考的文章,也分享给大家:
一杯茶的时间，上手第三方登录类库 JustAuth
SpringBoot+Vue如何集成第三方登录登录JustAuth
快速开始
前期准备
登录码云gitee,在设置中配置第三方应用获取密钥
注意回调地址的填写,必须对应咱们springboot项目中url路径
导入依赖
<!--JustAuth-->
<dependency>
<groupId>me.zhyd.oauth</groupId>
<artifactId>JustAuth</artifactId>
<version>1.15.1</version>
</dependency>
<!-- hutool工具类-->
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.3.3</version>
</dependency>
SpringBoot
废话不多说,直接上代码
/**
* 第三方登录
* @author Tu_Yooo
* @Date 2021/6/27 19:00
*/
@RestController
@RequestMapping("/oauth")
public class JustAuthController {
@Autowired
private JwtUtils jwtUtils;
/**
* 获取授权链接并跳转到第三方授权页面
*
* @param response response
* @throws IOException response可能存在的异常
*/
@RequestMapping("/render/{source}")
public Result renderAuth(HttpServletResponse response) throws IOException {
AuthRequest authRequest = getAuthRequest();
String token = AuthStateUtils.createState();
//生成gitee的授权url
String authorizeUrl = authRequest.authorize(token);
//将这个url返回给前端Vue
//由Vue去执行 授权页
Map<String, String> map = new HashMap<>();
map.put("url", authorizeUrl);
System.out.println(authorizeUrl);
return Result.success(map);
}
/**
* 用户在确认第三方平台授权（登录）后， 第三方平台会重定向到该地址，并携带code、state等参数
* @param callback 第三方回调时的入参
* @return 第三方平台的用户信息
*/
@RequestMapping("/callback/{source}")
public void login(@PathVariable("source") String source, AuthCallback callback, HttpServletResponse response) throws IOException {
AuthRequest authRequest = getAuthRequest();
AuthResponse login = authRequest.login(callback);
//此处可以获取到gitee给我传输过来的用户信息 可以打印看一下,可以根据自己系统的业务逻辑进行相应处理
//由于我的是demo 所以不进行处理
System.out.println(login);
//前后端分离 都是通过jwt token来判断当前用户是否有权限访问
//我这里生成的一个假的jwt 实际业务中 怎么生成jwt 你们自己定 我这里直接返回了
//生成JWT
String jwt = jwtUtils.generateToken("admin");
System.out.println(jwt);
//设置当请求头中
response.setHeader(jwtUtils.getHeader(),jwt);
//跳转到中转页面
//这里的地址对应 vue项目中的 中转页面
//vue的中转页面 会将token从url中取出 记录到本地
response.sendRedirect("http://localhost:8080/test?token="+jwt);
}
/**
* 获取授权Request
*
* @return AuthRequest
*/
private AuthRequest getAuthRequest() {
return new AuthGiteeRequest(AuthConfig.builder()
//gitee中的id
.clientId("XXXXXXXXXXXXXXXXXXXXXXXXXXXx")
//gitee中的密钥
.clientSecret("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX")
//在gitee中申请的回调地址
.redirectUri("http://localhost:8081/oauth/callback/gitee")
.build());
}
}
代码逻辑:
1.Vue项目中发起请求,请求后端SpringBoot生成一个gitee的授权页,并返回给Vue
2.Vue调用gitee的授权页,当用户点击确定时,调用SpringBoot中的回调地址
3.回调地址中可以根据自己项目逻辑取出用户信息,最后基于url返回认证token信息(咱们这里让它调用Vue中的中转页,以便于我们在中转页中取出token)
4.Vue跳转到中转页,我们取出token信息,基于VueX 封装到本地,然后跳转首页
5…此刻也就完成了第三方登录
Vue
Login登录页
登录页中准备一个点击事件
<el-button @click="giteelogin">gitee登录</el-button>
点击事件触发的方法
//请求后端SpringBoot授权页方法
giteelogin(){
this.$axios.get('/oauth/render/gitee').then(res => {
//获取到后端传递过来的授权路径
console.log('>>>>')
console.log(res.data.data.url)
//跳转到gitee授权页
window.location.href= res.data.data.url;
})
}
中转页
中转页是用户同意授权以后 通过回调地址访问到了后端代码
后端会在最后的时候将认证信息通过url返回到中转页
<template>
<div><h1>登录中</h1></div>
</template>
<script>
export default {
name: "test",
methods: {
//解析url中的token参数
getToken(){
var url = window.document.location.href.toString();//获得当前url地址并转换成字符串
console.log(url)
var u = url.split("?");//以？来分割字符串，将？前后的值存到一个数组中
if(typeof(u[1]) == "string"){
//获得？后面具体的请求参数值
u = u[1].split("&");
var get = {
};
for(var i in u){
var j = u[i].split("=");
get[j[0]] = j[1];
}
return get;
}
}
},
created() {
//获取到token 并封装到store中用于全程携带
let token11=this.getToken();
console.log(token11.token)
let token = token11.token
if (token != undefined && token != {
}){
//vuex
this.$store.commit('SET_TOKEN',token)
//this.localStorage.setItem('token',token)
// var aaa = localStorage.getItem('token');
//跳转到首页
this.$router.push('/index')
}
}
}
</script>
<style scoped>
</style>