开发喵星球

一、前端部分

1、在login.vue添加登录按钮

<el-button @click="mayun()">码云登陆</el-button>

mayun() {
  loginMayun().then(res => {
    Cookies.set("user-uuid", res.uuid)
    console.log(res)
    location.href = res.authorize
  })
},

2、创建 callback.vue

<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
    }
    // debugger
    this.store.dispatch("LoginByGitee", formBody).then(() => {
      this.$router.push({path: this.redirect || "/"}).catch(() => {
      });
    }).catch(() => {
      this.loading = false;
    });
  }
}
</script>

<style scoped>

</style>

注意放行路径—- /callback,在permission.js

const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/callback']

3、添加路由

{
    path: '/callback',
    component: (resolve) => require(['@/views/callback'], resolve),
    hidden: true
},

4、在user.js加入代码

    // 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)
          location.href="/login"
        })
      })
    },

5、在login.js加入

//码云登陆
export function loginMayun() {
  return request({
    url: '/mayunLogin',
    method: 'get',
    headers: {
      isToken: false
    }
  })
}
export function loginByGitee(code, uuid) {
  const data = {
    code,
    source: "Gitee",
    uuid
  }
  return request({
    url: '/loginByGitee',
    headers: {
      isToken: false
    },
    method: 'post',
    data: data
  })
}

前端整合完成。

二、后端实现

1、添加登录接口

/**
 * 码云登录
 *
 *
 * @return {@code AjaxResult}
 * @throws Exception 
 */
@GetMapping("/mayunLogin")
public AjaxResult mayunLogin() throws Exception {
    AjaxResult result = new AjaxResult();
    AuthRequest authRequest = getAuthRequest();
    String uuid = IdUtils.fastUUID();
    String authorize = authRequest.authorize(uuid);
    result.put("uuid", uuid);
    result.put("authorize", authorize);
    System.out.println("authorize = " + authorize);
    System.out.println("uuid = " + uuid);
    return result;
}

private AuthRequest getAuthRequest() {
    return new AuthGiteeRequest(AuthConfig.builder()
            .clientId("")
            .clientSecret("")
            .redirectUri("http://localhost:80/callback")
            .build());
}

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

2、添加业务层SysLoginService.java

public String loginByOtherSource(String code, String source, String uuid) {
    AuthRequest authRequest = new AuthGiteeRequest(AuthConfig.builder()
            .clientId("")
            .clientSecret("")
            .redirectUri("http://localhost:80/callback")
            .build());
    AuthResponse<AuthUser> login = authRequest.login(AuthCallback.builder().state(uuid).code(code).build());
    if (login.getCode() != 2000) {
        throw new CustomException("登录失败");
    }
    String nickname = login.getData().getNickname();
    String username = login.getData().getUsername();
    String avatar = login.getData().getAvatar();
    String email = login.getData().getEmail();
    String type = login.getData().getSource();
    SysUser sysUser = sysUserMapper.checkUserIsExist(username, nickname, type);
    Authentication authentication = null;
    LoginUser loginUser = null;
    if (sysUser != null) {
        AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success")));
    } else {
        sysUser = new SysUser();
        sysUser.setUserId(null);
        sysUser.setDeptId(103L);
        sysUser.setNickName(nickname);
        sysUser.setUserName(username);
        sysUser.setEmail(email);
        sysUser.setPhonenumber(null);
        sysUser.setSex("1");
        sysUser.setAvatar(avatar);
        sysUser.setSource(source);
        sysUserMapper.insertUser(sysUser);
        AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success")));
    }
    // 生成token
    LoginUser user = new LoginUser();
    user.setPermissions(new HashSet<String>());
    user.setUser(sysUser);
    return tokenService.createToken(user);
}

注意ps: 在sysuser表加一个字段source，区分第三用户

3、在SysUserMapper.xml中添加

<result property="source" column="source"/>
   <select id="checkUserIsExist" resultType="com.ruoyi.common.core.domain.entity.SysUser">
        select *
        from sys_user
        where user_name = #{userName}
        and nick_name = #{nickName}
        and source = #{source}
    </select>

到这里，若依整合第三方登录完成✅，然后重启项目进行登录。

请注意，本文提及的代码示例仅供参考，实际实现方式可能会因 若依 项目版本不同而略有差异。