springboot+vue整合JustAuth实现第三方登录

最新推荐文章于 2023-11-16 08:51:56 发布

water-之

最新推荐文章于 2023-11-16 08:51:56 发布

阅读量1.7k

点赞数 13

分类专栏： blog 文章标签： spring boot vue.js java

本文链接：https://blog.csdn.net/justleavel/article/details/128747560

版权

blog 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

前后端分离版实现第三方登录：GITEE为例

1：首先maven安装依赖：

            <!-- oauth工具类 -->
            <dependency>
                <groupId>com.xkcoding.justauth</groupId>
                <artifactId>justauth-spring-boot-starter</artifactId>
                <version>${justauth-spring-boot.version}</version>
            </dependency>

2:在application.yml中配置：

在这里插入图片描述

3：前端点击图标：

在这里插入图片描述

  giteeLogin() {
         this.axios.get("/api/oauth/login/GITEE").then( ({ data }) => {
             window.location = data.data;
         })
        }

4：这里的`/api/oauth/login/GITEE`接口作用就是给前端返回一个完整的字符串，两部分组成：授权界面+回调地址：

    /**
     * 返回给前端回调地址
     *
     * @param response  response
     * @throws IOException
     */

    @GetMapping("/login/{type}")
    public R login(@PathVariable String type, HttpServletResponse response) throws IOException {
        AuthRequest authRequest = factory.get(type);
        String authorizeUrl = authRequest.authorize(AuthStateUtils.createState());
        return R.ok("请求成功",authorizeUrl);
    }

5：在第四步前端 `window.location = data.data;`这个方法会使得界面跳转到授权页面，然后我们点击确认授权的一瞬间会来到后端的回调方法：

在这里插入图片描述

6：后端的回调方法：

在这里插入图片描述

 /**
     * 登录成功后的回调
     *
     * @return 登录成功后的信息
     */
    @SaIgnore
    @RequestMapping("/{type}/callback")
    public void login(@PathVariable String type, AuthCallback callback , HttpServletRequest request, HttpServletResponse httpServletResponse) throws IOException {
        AuthRequest authRequest = factory.get(type);
        AuthResponse authResponse = authRequest.login(callback);
        String s = JSONUtil.toJsonStr(authResponse.getData());
        SysUser sysUser = JSON.parseObject(s,SysUser.class);
        BlogLoginUser blogLoginUser = registerService.OauthRegister(sysUser);
        httpServletResponse.sendRedirect("http://localhost:8081/oauth/login/gitee?userid="+blogLoginUser.getId());

    }

7：然后我们注意到最后是`httpServletResponse.sendRedirect`，这里的作用就是，前端首先是需要一个中转界面，也就是这里后端重定向的界面，我们的逻辑就是，后端回调方法会将这个gitee的用户信息拿到，然后走我们自己业务的方法，比如新用户就注册，不是新用户就直接查询出来，这里根据自己的实际情况给前端传值，一般是传token,我这里是传了用户id：

在这里插入图片描述

8：中转界面：使用`this.$route.query.userid;`接收到后端重定向传来的id，（也可以是token，逻辑一样），然后在用一个axios请求根据id查询用户然后直接跳转到对应的成功界面，并且将数据存储到全局变量`$store`，

<template>
    <div v-loading="loading" style="height: 100%;width: 100%;">
    </div>
</template>
<script>
export default {
    name: "loginByGitee",
    data() {
        return {
            loading: true,
        }
    },
    mounted() {
        //获取用户id
        this.userid = this.$route.query.userid;
        let param = new URLSearchParams();
        param.append("userid",  this.userid);
        this.axios.post("/api/oauth/login/",param).then(({data}) =>{
            if (data.code == 200) {
                this.username = "";
                this.password = "";
                this.$store.commit("login", data.data);
                this.$store.commit("closeModel");
                this.$router.push("/")
                this.$toast({ type: "success", message: "登录成功" });
            } else {
                this.$toast({ type: "error", message: data.msg });
            }
        })
    }
}
</script>

<style scoped>

</style>