若依整合第三方登录

0:以gitee为例,首先开通gitee第三方登录:(在设置里面的第三方应用里面新建)

在这里插入图片描述

在这里插入图片描述

0.1:后端引入JustAuth第三方登陆框架:

<dependency>
    <groupId>me.zhyd.oauth</groupId>
    <artifactId>JustAuth</artifactId>
    <version>1.15.9</version>
</dependency>
		

1:在登陆前端加上按钮并且填写登录逻辑


在这里插入图片描述

 giteeLogin() {
      PreLoginByGitee().then(res => {
        Cookies.set("user-uuid", res.uuid)
        window.location = res.authorizeUrl
      })
    },
  }
//第三方gitee登录

export function PreLoginByGitee() {
  return request({
    url: '/PreLoginByGitee',
    headers: {
      isToken: false
    },
    method: 'get',
  })
}

在这里插入图片描述

2:后端的PreLoginByGitee接口:任务就是生成url,跳到认证url上面

在这里插入图片描述

    @GetMapping("/PreLoginByGitee")
    public AjaxResult PreLoginByGitee() {
        AjaxResult ajax = AjaxResult.success();
        AuthRequest authRequest = new AuthGiteeRequest(AuthConfig.builder()
                .clientId("***********************************")
                .clientSecret("************************************")
                .redirectUri("http://localhost/callback")
                .build());
        String uuid = IdUtils.fastUUID();
        String authorizeUrl = authRequest.authorize(uuid);
        //存储
        ajax.put("authorizeUrl", authorizeUrl);
        ajax.put("uuid", uuid);
        return ajax;
    }

3:再跳到gitee认证地址后授权,成功则会跳到回调地址,失败则一直转圈圈:

回调地址:

在这里插入图片描述

loginByGitee组件:mounted钩子函数会在加载开始的时候:在这里面调用LoginByGitee方法:

<template>
  <div v-loading="loading" style="height: 100%;width: 100%;">
    正在加载中...
  </div>
</template>

<script>

import Cookies from "js-cookie";

export default {
  name: "loginByGitee",
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    this.loading = true;
    console.log("uuid", Cookies.get("user-uuid"))
    const formBody = {
      uuid: Cookies.get("user-uuid"),
      code: this.$route.query.code
    }
    this.$store.dispatch("LoginByGitee", formBody).then(() => {
      this.$router.push({path: this.redirect || "/"}).catch(() => {
      });
    }).catch(() => {
      this.loading = false;
    });
  }
}
</script>

<style scoped>

</style>

4:LoginByGitee方法:这方法里面会调用loginByGitee方法

在这里插入图片描述

    //根据gitee登录
    LoginByGitee({commit}, body) {
      return new Promise((resolve, reject) => {
        loginByGitee(body.code, body.uuid).then(res => {
          setToken(res.token)
          commit('SET_TOKEN', res.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

5:loginByGitee方法:该方法到后端找loginByGitee接口,并带上code和uuid

在这里插入图片描述

export function loginByGitee(code, uuid) {
  const data = {
    code,
    source: "Gitee",
    uuid
  }
  return request({
    url: '/loginByGitee',
    headers: {
      isToken: false
    },
    method: 'post',
    data: data
  })
}

6:后端接口接收–loginByGitee:然后进入service层的loginByOtherSource方法

在这里插入图片描述

    @Autowired
    private SysLoginService loginService;

    @PostMapping("/loginByGitee")
    public AjaxResult loginByGitee(@RequestBody LoginByOtherSourceBody loginByOtherSourceBody) {
        AjaxResult ajax = AjaxResult.success();
        String token = loginService
                .loginByOtherSource(loginByOtherSourceBody.getCode(), loginByOtherSourceBody.getSource(), loginByOtherSourceBody.getUuid());
        ajax.put(Constants.TOKEN, token);
        return ajax;
    }


}

7:后端loginByOtherSource方法:


   @Autowired
    private  SysPermissionService permissionService;

  public String loginByOtherSource(String code, String source, String uuid) {
        //先到数据库查询这个人曾经有没有登录过,没有就注册
        // 创建授权request
        AuthRequest authRequest = new AuthGiteeRequest(AuthConfig.builder()
                .clientId("***********************************")
                .clientSecret("**************************************************")
                .redirectUri("http://localhost/callback")
                .build());
        AuthResponse<AuthUser> login = authRequest.login(AuthCallback.builder().state(uuid).code(code).build());
        System.out.println(login);
        //先查询数据库有没有该用户
        AuthUser authUser = login.getData();
        SysUser sysUser = new SysUser();
        sysUser.setUserName(authUser.getUsername());
        sysUser.setSource(authUser.getSource());
        List<SysUser> sysUsers = userService.selectUserListNoDataScope(sysUser);
        if (sysUsers.size() > 1) {
            throw new ServiceException("第三方登录异常,账号重叠");
        } else if (sysUsers.size() == 0) {
            //相当于注册
            sysUser.setNickName(authUser.getNickname());
            sysUser.setAvatar(authUser.getAvatar());
            sysUser.setEmail(authUser.getEmail());
            sysUser.setRemark(authUser.getRemark());
            userService.registerUserAndGetUserId(sysUser);
            AsyncManager.me().execute(AsyncFactory.recordLogininfor(sysUser.getUserName(), Constants.REGISTER,
                    MessageUtils.message("user.register.success")));
        } else {
            sysUser = sysUsers.get(0);
        }
        AsyncManager.me().execute(AsyncFactory.recordLogininfor(sysUser.getUserName(), Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success")));
        //注册成功或者是已经存在的用户
        LoginUser loginUser =
                new LoginUser(sysUser.getUserId(), sysUser.getDeptId(), sysUser, permissionService.getMenuPermission(sysUser));
        recordLoginInfo(loginUser.getUserId());
        // 生成token
        return tokenService.createToken(loginUser);
    }

7.1:首先是 AuthResponse<AuthUser> login = authRequest.login(AuthCallback.builder().state(uuid).code(code).build());这里用拿到的uuid和code登录,成功就可以拿到gitee这个第三方应用的信息

7.2:get到第三方的各种数据来登录我们的系统,用用户名和source先查看这个第三方用户在不在我们的数据库中

  • 19
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

water-之

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值