Java SpringBoot + Vue + Uniapp 集成JustAuth 最快实现多端三方登录！（QQ ...

注：本文基于 若依 集成just-auth实现第三方授权登录 修改美满，全部步调仅代表本人如下环境亲测可用，其他环境需自辩或联系查看缘故原由！
  体系环境

   运行体系：Windows10专业版、Linux Centos7.6
Java 版本：1.8.0_371
node 版本：14.21.3
Mysql版本：5.5.39、5.7.44
  一、后台设置

1、添加依赖

1. <!-- JustAuth第三方授权登录 -->
2. <dependency>
3.         <groupId>me.zhyd.oauth</groupId>
4.         <artifactId>JustAuth</artifactId>
5.         <version>1.15.6</version>
6. </dependency>
7. <!-- HttpClient -->
8. <dependency>
9.         <groupId>org.apache.httpcomponents</groupId>
10.         <artifactId>httpclient</artifactId>
11. </dependency>

复制代码

2、添加认证授权工具类

1. package top.chengrongyu.common.utils;
3. import me.zhyd.oauth.cache.AuthStateCache;
4. import me.zhyd.oauth.config.AuthConfig;
5. import me.zhyd.oauth.exception.AuthException;
6. import me.zhyd.oauth.request.*;
7. /**
8. * 认证授权工具类
9. *
10. * @author ruoyi
11. */
12. public class AuthUtils
13. {
14.     @SuppressWarnings("deprecation")
15.     public static AuthRequest getAuthRequest(String source, String clientId, String clientSecret, String redirectUri,
16.             AuthStateCache authStateCache)
17.     {
18.         AuthRequest authRequest = null;
19.         switch (source.toLowerCase())
20.         {
21.             case "dingtalk":
22.                 authRequest = new AuthDingTalkRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
23.                         .redirectUri(redirectUri).build(), authStateCache);
24.                 break;
25.             case "baidu":
26.                 authRequest = new AuthBaiduRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
27.                         .redirectUri(redirectUri).build(), authStateCache);
28.                 break;
29.             case "github":
30.                 authRequest = new AuthGithubRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
31.                         .redirectUri(redirectUri).build(), authStateCache);
32.                 break;
33.             case "gitee":
34.                 authRequest = new AuthGiteeRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
35.                         .redirectUri(redirectUri).build(), authStateCache);
36.                 break;
37.             case "weibo":
38.                 authRequest = new AuthWeiboRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
39.                         .redirectUri(redirectUri).build(), authStateCache);
40.                 break;
41.             case "coding":
42.                 authRequest = new AuthCodingRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
43.                         .redirectUri(redirectUri).codingGroupName("").build(), authStateCache);
44.                 break;
45.             case "oschina":
46.                 authRequest = new AuthOschinaRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
47.                         .redirectUri(redirectUri).build(), authStateCache);
48.                 break;
49.             case "alipay":
50.                 // 支付宝在创建回调地址时，不允许使用localhost或者127.0.0.1，所以这儿的回调地址使用的局域网内的ip
51.                 authRequest = new AuthAlipayRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
52.                         .alipayPublicKey("").redirectUri(redirectUri).build(), authStateCache);
53.                 break;
54.             case "qq":
55.                 authRequest = new AuthQqRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
56.                         .redirectUri(redirectUri).build(), authStateCache);
57.                 break;
58.             case "wechat_open":
59.                 authRequest = new AuthWeChatOpenRequest(AuthConfig.builder().clientId(clientId)
60.                         .clientSecret(clientSecret).redirectUri(redirectUri).build(), authStateCache);
61.                 break;
62.             case "csdn":
63.                 authRequest = new AuthCsdnRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
64.                         .redirectUri(redirectUri).build(), authStateCache);
65.                 break;
66.             case "taobao":
67.                 authRequest = new AuthTaobaoRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
68.                         .redirectUri(redirectUri).build(), authStateCache);
69.                 break;
70.             case "douyin":
71.                 authRequest = new AuthDouyinRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
72.                         .redirectUri(redirectUri).build(), authStateCache);
73.                 break;
74.             case "linkedin":
75.                 authRequest = new AuthLinkedinRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
76.                         .redirectUri(redirectUri).build(), authStateCache);
77.                 break;
78.             case "microsoft":
79.                 authRequest = new AuthMicrosoftRequest(AuthConfig.builder().clientId(clientId)
80.                         .clientSecret(clientSecret).redirectUri(redirectUri).build(), authStateCache);
81.                 break;
82.             case "mi":
83.                 authRequest = new AuthMiRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
84.                         .redirectUri(redirectUri).build(), authStateCache);
85.                 break;
86.             case "toutiao":
87.                 authRequest = new AuthToutiaoRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
88.                         .redirectUri(redirectUri).build(), authStateCache);
89.                 break;
90.             case "teambition":
91.                 authRequest = new AuthTeambitionRequest(AuthConfig.builder().clientId(clientId)
92.                         .clientSecret(clientSecret).redirectUri(redirectUri).build(), authStateCache);
93.                 break;
94.             case "pinterest":
95.                 authRequest = new AuthPinterestRequest(AuthConfig.builder().clientId(clientId)
96.                         .clientSecret(clientSecret).redirectUri(redirectUri).build(), authStateCache);
97.                 break;
98.             case "renren":
99.                 authRequest = new AuthRenrenRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
100.                         .redirectUri(redirectUri).build(), authStateCache);
101.                 break;
102.             case "stack_overflow":
103.                 authRequest = new AuthStackOverflowRequest(AuthConfig.builder().clientId(clientId)
104.                         .clientSecret(clientSecret).redirectUri(redirectUri).stackOverflowKey("").build(),
105.                         authStateCache);
106.                 break;
107.             case "huawei":
108.                 authRequest = new AuthHuaweiRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
109.                         .redirectUri(redirectUri).build(), authStateCache);
110.                 break;
111.             case "wechat_enterprise":
112.                 authRequest = new AuthWeChatEnterpriseRequest(AuthConfig.builder().clientId(clientId)
113.                         .clientSecret(clientSecret).redirectUri(redirectUri).agentId("").build(), authStateCache);
114.                 break;
115.             case "kujiale":
116.                 authRequest = new AuthKujialeRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
117.                         .redirectUri(redirectUri).build(), authStateCache);
118.                 break;
119.             case "gitlab":
120.                 authRequest = new AuthGitlabRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
121.                         .redirectUri(redirectUri).build(), authStateCache);
122.                 break;
123.             case "meituan":
124.                 authRequest = new AuthMeituanRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
125.                         .redirectUri(redirectUri).build(), authStateCache);
126.                 break;
127.             case "eleme":
128.                 authRequest = new AuthElemeRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
129.                         .redirectUri(redirectUri).build());
130.                 break;
131.             case "wechat_mp":
132.                 authRequest = new AuthWeChatMpRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
133.                         .redirectUri(redirectUri).build(), authStateCache);
134.                 break;
135.             case "aliyun":
136.                 authRequest = new AuthAliyunRequest(AuthConfig.builder().clientId(clientId).clientSecret(clientSecret)
137.                         .redirectUri(redirectUri).build(), authStateCache);
138.                 break;
139.             default:
140.                 break;
141.         }
142.         if (null == authRequest)
143.         {
144.             throw new AuthException("未获取到有效的Auth配置");
145.         }
146.         return authRequest;
147.     }
148. }

复制代码

3、新建第三方登录授权表

1. -- ----------------------------
2. -- 第三方授权表
3. -- ----------------------------
4. create table sys_auth_user (
5.   auth_id           bigint(20)      not null auto_increment    comment '授权ID',
6.   uuid              varchar(500)    not null                   comment '第三方平台用户唯一ID',
7.   user_id           bigint(20)      not null                   comment '系统用户ID',
8.   login_name        varchar(30)     not null                   comment '登录账号',
9.   user_name         varchar(30)     default ''                 comment '用户昵称',
10.   avatar            varchar(500)    default ''                 comment '头像地址',
11.   email             varchar(255)    default ''                 comment '用户邮箱',
12.   source            varchar(255)    default ''                 comment '用户来源',
13.   create_time       datetime                                   comment '创建时间',
14.   primary key (auth_id)
15. ) engine=innodb auto_increment=100 comment = '第三方授权表';

复制代码

4、添加实体表、Mapper、Service接口类

（1）实体

1. package top.chengrongyu.system.domain;
3. import lombok.Data;
4. import top.chengrongyu.common.core.domain.BaseEntity;
6. /**
7. * 第三方授权表 sys_auth_user
8. *
9. * @author ruoyi
10. */
11. @Data
12. public class SysAuthUser extends BaseEntity
13. {
14.     private static final long serialVersionUID = 1L;
16.     /** 授权ID */
17.     private Long authId;
19.     /** 第三方平台用户唯一ID */
20.     private String uuid;
22.     /** 系统用户ID */
23.     private Long userId;
25.     /** 登录账号 */
26.     private String userName;
28.     /** 用户昵称 */
29.     private String nickName;
31.     /** 头像地址 */
32.     private String avatar;
34.     /** 用户邮箱 */
35.     private String email;
37.     /** 用户来源 */
38.     private String source;
39. }

复制代码

（2）在原user的Mapper下添加如下接口

1.     /**
2.      * 根据用户编号查询授权列表
3.      *
4.      * @param userId 用户编号
5.      * @return 授权列表
6.      */
7.     public List<SysAuthUser> selectAuthUserListByUserId(Long userId);
8.    
9.     /**
10.      * 根据uuid查询用户信息
11.      *
12.      * @param uuid 唯一信息
13.      * @return 结果
14.      */
15.     public SysUser selectAuthUserByUuid(String uuid);
16.    
17.     /**
18.      * 校验source平台是否绑定
19.      *
20.      * @param userId 用户编号
21.      * @param source 绑定平台
22.      * @return 结果
23.      */
24.     public int checkAuthUser(@Param("userId") Long userId, @Param("source") String source);
26.     /**
27.      * 新增第三方授权信息
28.      *
29.      * @param authUser 用户信息
30.      * @return 结果
31.      */
32.     public int insertAuthUser(SysAuthUser authUser);
34.     /**
35.      * 根据编号删除第三方授权信息
36.      *
37.      * @param authId 授权编号
38.      * @return 结果
39.      */
40.     public int deleteAuthUser(Long authId);

复制代码

（3）在原user的Service下添加如下接口

1.     /**
2.      * 根据用户编号查询授权列表
3.      *
4.      * @param userId 用户编号
5.      * @return 授权列表
6.      */
7.     public List<SysAuthUser> selectAuthUserListByUserId(Long userId);

复制代码

（4）在原user的ServiceImpl下添加如下接口

1.      /**
2.      * 根据用户编号查询授权列表
3.      *
4.      * @param userId 用户编号
5.      * @return 授权列表
6.      */
7.     public List<SysAuthUser> selectAuthUserListByUserId(Long userId)
8.     {
9.         return userMapper.selectAuthUserListByUserId(userId);
10.     }

复制代码

（5）在原user的Mapper.xml下添加如下sql

1.         <resultMap id="SysAuthUserResult" type="SysAuthUser">
2.                 <id     property="authId"       column="auth_id"        />
3.                 <result property="uuid"         column="uuid"           />
4.                 <result property="userId"       column="user_id"        />
5.                 <result property="userName"     column="user_name"      />
6.                 <result property="nickName"     column="nick_name"      />
7.                 <result property="avatar"       column="avatar"         />
8.                 <result property="email"        column="email"          />
9.                 <result property="source"       column="source"         />
10.                 <result property="createTime"   column="create_time"    />
11.         </resultMap>
14.         <select id="selectAuthUserByUuid" parameterType="String" resultMap="SysUserResult">
15.             select b.user_id as user_id, b.user_name as user_name, b.password as password
16.             from sys_auth_user a left join sys_user b on a.user_id = b.user_id
17.                 where a.uuid = #{uuid} and b.del_flag = '0'
18.         </select>
19.        
20.         <select id="selectAuthUserListByUserId" parameterType="Long" resultMap="SysAuthUserResult">
21.             select auth_id, uuid, user_id, user_name, nick_name, avatar, email, source, create_time
22.             from sys_auth_user where user_id = #{userId}
23.         </select>
24.        
25.         <select id="checkAuthUser" parameterType="SysAuthUser" resultType="int">
26.                 select count(1) from sys_auth_user where user_id=#{userId} and source=#{source} limit 1
27.         </select>
28.        
29.         <insert id="insertAuthUser" parameterType="SysAuthUser">
30.                 insert into sys_auth_user(
31.                     <if test="uuid != null and uuid != ''">uuid,</if>
32.                         <if test="userId != null and userId != 0">user_id,</if>
33.                         <if test="userName != null and userName != ''">user_name,</if>
34.                         <if test="nickName != null and nickName != ''">nick_name,</if>
35.                         <if test="avatar != null and avatar != ''">avatar,</if>
36.                         <if test="email != null and email != ''">email,</if>
37.                         <if test="source != null and source != ''">source,</if>
38.                         create_time
39.                 )values(
40.                     <if test="uuid != null and uuid != ''">#{uuid},</if>
41.                         <if test="userId != null and userId != 0">#{userId},</if>
42.                         <if test="userName != null and userName != ''">#{userName},</if>
43.                         <if test="nickName != null and nickName != ''">#{nickName},</if>
44.                         <if test="avatar != null and avatar != ''">#{avatar},</if>
45.                         <if test="email != null and email != ''">#{email},</if>
46.                         <if test="source != null and source != ''">#{source},</if>
47.                         sysdate()
48.                 )
49.         </insert>
50.        
51.         <delete id="deleteAuthUser" parameterType="Long">
52.                 delete from sys_auth_user where auth_id = #{authId}
53.         </delete>

复制代码

5、添加SysAuthController

   注意：
①这里的auths下的clientId需要自己获取正式的个人网站客户端id、密钥、回调 等信息；
②回调地址需要写成前端页面的地址，不是后端的；
③此处更改了三方登录的方式，新增了无绑定账户自动创建账户并登录的代码逻辑，并修复了一些绑定三方账户的bug；
  参考JustAuth官网集成第三方步调

1. package top.chengrongyu.web.controller.system;
3. import java.io.IOException;
4. import java.util.HashMap;
5. import java.util.Map;
6. import javax.servlet.http.HttpServletRequest;
7. import org.springframework.beans.factory.annotation.Autowired;
8. import org.springframework.web.bind.annotation.DeleteMapping;
9. import org.springframework.web.bind.annotation.GetMapping;
10. import org.springframework.web.bind.annotation.PathVariable;
11. import org.springframework.web.bind.annotation.RequestMapping;
12. import org.springframework.web.bind.annotation.ResponseBody;
13. import org.springframework.web.bind.annotation.RestController;
14. import com.alibaba.fastjson2.JSONObject;
15. import me.zhyd.oauth.cache.AuthDefaultStateCache;
16. import me.zhyd.oauth.cache.AuthStateCache;
17. import me.zhyd.oauth.model.AuthCallback;
18. import me.zhyd.oauth.model.AuthResponse;
19. import me.zhyd.oauth.model.AuthUser;
20. import me.zhyd.oauth.request.AuthRequest;
21. import me.zhyd.oauth.utils.AuthStateUtils;
22. import org.springframework.web.multipart.MultipartFile;
23. import top.chengrongyu.common.constant.Constants;
24. import top.chengrongyu.common.core.controller.BaseController;
25. import top.chengrongyu.common.core.domain.AjaxResult;
26. import top.chengrongyu.common.core.domain.entity.SysUser;
27. import top.chengrongyu.common.core.domain.model.LoginUser;
28. import top.chengrongyu.common.enums.UserStatus;
29. import top.chengrongyu.common.exception.ServiceException;
30. import top.chengrongyu.common.utils.AuthUtils;
31. import top.chengrongyu.common.utils.SecurityUtils;
32. import top.chengrongyu.common.utils.StringUtils;
33. import top.chengrongyu.framework.web.service.SysLoginService;
34. import top.chengrongyu.framework.web.service.SysPermissionService;
35. import top.chengrongyu.framework.web.service.TokenService;
36. import top.chengrongyu.system.domain.SysAuthUser;
37. import top.chengrongyu.system.mapper.SysUserMapper;
38. import top.chengrongyu.system.service.ISysUserService;
40. import static top.chengrongyu.common.utils.file.FileUploadUtils.fileUrlConvertToMultipartImage;
41. import static top.chengrongyu.common.utils.file.FileUploadUtils.upload;
43. /**
44. * 第三方认证授权处理
45. *
46. * @author cry
47. */
48. @RestController
49. @RequestMapping("/system/auth")
50. public class SysAuthController extends BaseController {
51.     private AuthStateCache authStateCache;
53.     @Autowired
54.     private ISysUserService userService;
56.     @Autowired
57.     private SysPermissionService permissionService;
59.     @Autowired
60.     private TokenService tokenService;
62.     @Autowired
63.     private SysUserMapper userMapper;
65.     @Autowired
66.     private SysLoginService loginService;
68.     /**
69.      * 三方应用登录回调地址
70.      */
71.     String redirectUri = "http://127.0.0.1:81/social-login?source=";// PC
72.     String redirectUriMobile = "http://127.0.0.1:9090/pages/socialLogin?source=";// Mobile  注意：/# 哈希值不能携带！URL中的哈希值（#）部分可能不会被服务器处理
74.     /**
75.      * gitee 客户端ID
76.      */
77.     String giteeClientId = "xxxx";
78.     /**
79.      * gitee 客户端密钥
80.      */
81.     String giteeClientSecret = "xxxx";
83.     private final static Map<String, String> auths = new HashMap<String, String>();
85.     {
86.         auths.put("gitee", "{"clientId":"" + giteeClientId + "","clientSecret":"" + giteeClientSecret + "","redirectUri":"" + redirectUri + "gitee"+"","redirectUriMobile":"" + redirectUriMobile + "gitee"}");
87.         authStateCache = AuthDefaultStateCache.INSTANCE;
88.     }
90.     /**
91.      * 认证授权
92.      *
93.      * @param source 三方平台
94.      * @param type 请求端类型 PC、Mobile
95.      * @throws IOException
96.      */
97.     @GetMapping("/binding/{source}/{type}")
98.     @ResponseBody
99.     public AjaxResult authBinding(@PathVariable("source") String source,@PathVariable("type")String type, HttpServletRequest request) throws IOException {
100.         LoginUser tokenUser = tokenService.getLoginUser(request);
101.         if (StringUtils.isNotNull(tokenUser) && userMapper.checkAuthUser(tokenUser.getUserId(), source) > 0) {
102.             return error(source + "平台账号已经绑定");
103.         }
105.         String obj = auths.get(source);
106.         if (StringUtils.isEmpty(obj)) {
107.             return error(source + "平台账号暂不支持");
108.         }
109.         JSONObject json = JSONObject.parseObject(obj);
110.         /**
111.          * 校验是PC端还是Mobile端
112.          */
113.         String url = "PC".equals(type) ? json.getString("redirectUri") : json.getString("redirectUriMobile");
114.         AuthRequest authRequest = AuthUtils.getAuthRequest(source, json.getString("clientId"), json.getString("clientSecret"), url, authStateCache);
115.         String authorizeUrl = authRequest.authorize(AuthStateUtils.createState());
116.         System.out.println(authorizeUrl);
117.         return success(authorizeUrl);
118.     }
120.     @SuppressWarnings("unchecked")
121.     @GetMapping("/social-login/{source}/{type}")
122.     public AjaxResult socialLogin(@PathVariable("source") String source,@PathVariable("type") String type, AuthCallback callback, HttpServletRequest request) throws IOException {
123.         String obj = auths.get(source);
124.         if (StringUtils.isEmpty(obj)) {
125.             return AjaxResult.error(10002, "第三方平台系统不支持或未提供来源");
126.         }
127.         JSONObject json = JSONObject.parseObject(obj);
128.         /**
129.          * 校验是PC端还是Mobile端
130.          */
131.         String url = "PC".equals(type) ? json.getString("redirectUri") : json.getString("redirectUriMobile");
132.         AuthRequest authRequest = AuthUtils.getAuthRequest(source, json.getString("clientId"), json.getString("clientSecret"), url, authStateCache);
133.         AuthResponse<AuthUser> response = authRequest.login(callback);
134.         if (response.ok()) {
135.             /**
136.              * 获取当前请求下登录用户缓存信息
137.              */
138.             LoginUser tokenUser = null;
139.             try {
140.                 tokenUser = tokenService.getLoginUser(request);
141.             } catch (ServiceException e) {
142.                 /**
143.                  * 提示获取用户信息异常时，抛出异常 不做处理
144.                  */
145.                 throw e;
146.             }finally {
147.                 /**
148.                  * 根据三方登录平台的uuid查询用户三方绑定信息
149.                  */
150.                 SysUser authUserByUuid = userMapper.selectAuthUserByUuid(source + response.getData().getUuid());
151.                 /**
152.                  * 验证当前用户是否已经登录  并且验证当前登录的和绑定的是否是一个账户
153.                  */
154.                 if (StringUtils.isNotNull(tokenUser)) {
155.                     if (StringUtils.isNotNull(authUserByUuid) && tokenUser.getUserId() == authUserByUuid.getUserId()) {
156.                         String token = tokenService.createToken(SecurityUtils.getLoginUser());
157.                         return success().put(Constants.TOKEN, token);
158.                     }
159.                     /**
160.                      * 判断 当前登录的和绑定的不是一个账户时
161.                      */
162.                     if (authUserByUuid != null && authUserByUuid.getUserId() != null) {
163.                         return AjaxResult.error(10002, "对不起，来自" + source + "的账户已有绑定账户，如有需要，请登录原账户解绑后重新绑定！");
164.                     }else{
165.                         /**
166.                          * 若已经登录，但未绑定该三方授权信息
167.                          * 则直接绑定当前登录的系统账号
168.                          */
169.                         SysAuthUser authUser = new SysAuthUser();
170.                         authUser.setAvatar(response.getData().getAvatar());
171.                         authUser.setUuid(source + response.getData().getUuid());
172.                         authUser.setUserId(SecurityUtils.getUserId());
173.                         authUser.setUserName(response.getData().getUsername());
174.                         authUser.setNickName(response.getData().getNickname());
175.                         authUser.setEmail(response.getData().getEmail());
176.                         authUser.setSource(source);
177.                         userMapper.insertAuthUser(authUser);
178.                         String token = tokenService.createToken(SecurityUtils.getLoginUser());
179.                         return success().put(Constants.TOKEN, token);
180.                     }
181.                 }
182.                 /**
183.                  * 当用户未登录
184.                  * 判断 根据三方登录平台的uuid查询用户三方绑定信息 不为空时
185.                  */
186.                 if (StringUtils.isNotNull(authUserByUuid)) {
187.                     SysUser user = userService.selectUserByUserName(authUserByUuid.getUserName());
188.                     if (StringUtils.isNull(user)) {
189.                         throw new ServiceException("登录用户：" + user.getUserName() + " 不存在");
190.                     } else if (UserStatus.DELETED.getCode().equals(user.getDelFlag())) {
191.                         throw new ServiceException("对不起，您的账号：" + user.getUserName() + " 已被删除");
192.                     } else if (UserStatus.DISABLE.getCode().equals(user.getStatus())) {
193.                         throw new ServiceException("对不起，您的账号：" + user.getUserName() + " 已停用");
194.                     }
195.                     LoginUser loginUser = new LoginUser(user.getUserId(), user.getDeptId(), user, permissionService.getMenuPermission(user));
196.                     String token = tokenService.createToken(loginUser);
197.                     return success().put(Constants.TOKEN, token);
198.                 } else {
199.                     /**
200.                      * 当用户未登录 且
201.                      * 该三方登录信息也未绑定用户时
202.                      * 创建一个新用户进行绑定
203.                      */
204.                     SysUser user = new SysUser();
205.                     /**
206.                      * 默认用户名为 uuid + _三方平台名称
207.                      */
208.                     user.setUserName(response.getData().getUuid()+"_"+source);
209.                     /**
210.                      * 默认密码为 123456
211.                      */
212.                     user.setPassword(SecurityUtils.encryptPassword("123456"));
213.                     user.setNickName(response.getData().getNickname());
214.                     /**
215.                      * 由于存储文件路径以用户为单位
216.                      * 所以需要登录后跟俊网络地址修改用户头像
217.                      */
218.                     MultipartFile multipartFile = fileUrlConvertToMultipartImage(response.getData().getAvatar(),user.getUserName()+"_avatar.png");
219.                     String avatarUrl = upload(multipartFile);
220.                     user.setAvatar(avatarUrl);
221.                     user.setEmail(response.getData().getEmail());
222.                     user.setRemark(response.getData().getRemark());
223.                     /**
224.                      * 新增用户信息
225.                      */
226.                     int rows = userService.insertUser(user);
227.                     if(rows>0){
228.                         /**
229.                          * 用户添加成功后 绑定该三方授权信息
230.                          */
231.                         SysAuthUser authUser = new SysAuthUser();
232.                         authUser.setUuid(source + response.getData().getUuid());
233.                         authUser.setUserId(user.getUserId());
234.                         authUser.setAvatar(response.getData().getAvatar());
235.                         authUser.setUserName(response.getData().getUsername());
236.                         authUser.setNickName(response.getData().getNickname());
237.                         authUser.setEmail(response.getData().getEmail());
238.                         authUser.setSource(source);
239.                         userMapper.insertAuthUser(authUser);
240.                         // 登录并生成令牌
241.                         String token = loginService.login(user.getUserName(), "123456", "","");
242.                         return success().put(Constants.TOKEN, token);
243.                     }
244.                 }
245.             }
246.         }
247.         return AjaxResult.error(10002, "对不起，授权信息验证不通过，请联系管理员");
248.     }
250.     /**
251.      * 取消授权
252.      */
253.     @DeleteMapping(value = "/unlock/{authId}")
254.     public AjaxResult unlockAuth(@PathVariable Long authId) {
255.         return toAjax(userMapper.deleteAuthUser(authId));
256.     }
257. }

复制代码

6、在SysProfileController获取用户个人信息的profile方法中添加如下行

使在查询的同时携带用户的三方登录授权信息

1. ajax.put("auths", userService.selectAuthUserListByUserId(user.getUserId()));

复制代码

二、前台设置（Vue、Uniapp 设置方法一致）

1、在校验文件permission.js中添加白名单

1. '/social-login',

复制代码

2、在/api/system 中添加授权绑定、解除账号接口文件auth.js

auth.js

1. import request from '@/utils/request'
3. // 绑定账号
4. export function authBinding(source) {
5.   return request({
6.     url: '/system/auth/binding/' + source + '/PC', //PC、Mobile 写死即可
7.     method: 'get'
8.   })
9. }
11. // 解绑账号
12. export function authUnlock(authId) {
13.   return request({
14.     url: '/system/auth/unlock/' + authId,
15.     method: 'delete'
16.   })
17. }

复制代码

3、在login.js中添加三方登录接口

1. // 第三方平台登录
2. export function socialLogin(source, code, state) {
3.   const data = {
4.     code,
5.     state
6.   }
7.   return request({
8.     url: '/system/auth/social-login/' + source + '/PC', //PC、Mobile 写死即可
9.     method: 'get',
10.     params: data
11.   })
12. }

复制代码

4、设置route文件夹下的index.js路由信息（Uniapp无该步调）

在公共路由 constantRoutes 中添加三方登录的页面路径，使其在未登录时可以正常跳转页面

1.   {    path: '/social-login',
2.     component: () => import('@/views/socialLogin'),    hidden: true  },

复制代码

5、设置store/modules文件夹下的user.js用户存储信息

添加action下的函数

1.     // 第三方平台登录
2.     SocialLogin({ commit }, userInfo) {
3.       const code = userInfo.code
4.       const state = userInfo.state
5.       const source = userInfo.source
6.       return new Promise((resolve, reject) => {
7.         socialLogin(source, code, state).then(res => {
8.           setToken(res.token)
9.           commit('SET_TOKEN', res.token)
10.           resolve()
11.         }).catch(error => {
12.           reject(error)
13.         })
14.       })
15.     },

复制代码

6、设置utils文件夹下的request.js请求文件处理信息

添加第三方登录失败时的报错信息处理，夹在401和500之间即可

1. else if (code === 10002) {
2.     // 第三方登录错误提示
3.     MessageBox.confirm(msg, '系统提示', {
4.       confirmButtonText: '重新登录',
5.       cancelButtonText: '取消',
6.       type: 'warning'
7.     }
8.     ).then(() => {
9.       store.dispatch('LogOut').then(() => {
10.         location.href = '/index';// Uniapp 写 '/pages/login'
11.       })
12.     }).catch(() => { });
13.     return Promise.reject(new Error(msg))
14.   }

复制代码

7、添加三方登录页面socialLogin.vue

socialLogin.vue

1. <template>
2.   <div></div>
3. </template>
5. <script>
6. import { Loading } from 'element-ui'
8. let loadingInstance;
9. export default {
10.   data() {
11.     return {
12.       redirect: undefined,
13.     };
14.   },
15.   created() {
16.     loadingInstance = Loading.service({
17.       lock: true,
18.       text: "正在验证第三方应用账户数据，请稍候",
19.       spinner: "el-icon-loading",
20.       background: "rgba(0, 0, 0, 0.7)",
21.     })
22.      // 第三方登录回调参数
23.     this.source = this.$route.query.source;
24.     this.code = this.$route.query.code;
25.     this.state = this.$route.query.state;
26.     this.$store.dispatch("SocialLogin", {
27.       code: this.code,
28.       state: this.state,
29.       source: this.source
30.     }).then(() => {
31.       loadingInstance.close();
32.       this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
33.     }).catch(() => {
34.       loadingInstance.close();
35.     });
36.   },
37.   methods: {
38.   },
39. };
40. </script>
42. <style rel="stylesheet/scss" lang="scss">
43. </style>

复制代码

8、登录页面添加三方登录跳转信息链接

vue

1.       <!--  第三方应用登录 -->
2.       <el-form-item style="width:100%;">
3.         <div class="oauth-login" style="display:flex">
4.           <div class="oauth-login-item" @click="doSocialLogin('gitee')">
5.             <svg-icon icon-class="gitee" style="height:1.2em" />
6.             <span>Gitee</span>
7.           </div>
8.           <div class="oauth-login-item" @click="doSocialLogin('github')">
9.             <svg-icon icon-class="github" style="height:1.2em" />
10.             <span>Github</span>
11.           </div>
12.           <div class="oauth-login-item">
13.             <svg-icon icon-class="weixin" style="height:1.2em" />
14.             <span>Weixin</span>
15.           </div>
16.           <div class="oauth-login-item">
17.             <svg-icon icon-class="qq" style="height:1.2em" />
18.             <span>QQ</span>
19.           </div>
20.         </div>
21.       </el-form-item>

复制代码

js函数

1.         import { authBinding } from "@/api/system/auth";
2.        
3.         ……
4.        
5.     // 三方登录
6.     doSocialLogin(source) {
7.       authBinding(source).then(res => {
8.         top.location.href = res.msg;
9.       });
10.     }
11.         ……

复制代码

css

1. .oauth-login {
2.   display: flex;
3.   align-items: cen;
4.   cursor:pointer;
5. }
6. .oauth-login-item {
7.   display: flex;
8.   align-items: center;
9.   margin-right: 10px;
10. }
11. .oauth-login-item img {
12.   height: 25px;
13.   width: 25px;
14. }
15. .oauth-login-item span:hover {
16.   text-decoration: underline red;
17.   color: red;
18. }

复制代码

9、添加个人中心三方登录信息展示（Uniapp需根据需要自界说）

views\system\user\profile\index.vue添加如下
vue

1.             <el-tab-pane label="第三方应用" name="thirdParty">
2.               <thirdParty :auths="auths" />
3.             </el-tab-pane>

复制代码

js

1. import thirdParty from "./thirdParty";
2. export default {
3.   name: "Profile",
4.   components: { userAvatar, userInfo, resetPwd, thirdParty },
5.   ……
7.   auths: {},
8.   ……
9.   /**
10.    * 赋值 用户授权三方登录信息 用于回显socialLogin页面
11.    */
12.    this.auths = response.auths;

复制代码

添加thirdParty.vue页面

1. <template>
2.   <div>
3.     <el-table :data="auths" style="width: 100%; height: 100%; font-size: 10px">
4.       <el-table-column label="序号" width="50" type="index"></el-table-column>
5.       <el-table-column
6.         label="绑定账号平台"
7.         width="140"
8.         align="center"
9.         prop="source"
10.         :show-overflow-tooltip="true"
11.       />
12.       <el-table-column label="头像" width="120" align="center" prop="avatar">
13.         <template slot-scope="scope">
14.           <image-preview :src="scope.row.avatar" style="width: 45px; height: 45px" />
15.         </template>
16.       </el-table-column>
17.       <el-table-column
18.         label="系统账号"
19.         width="180"
20.         align="center"
21.         prop="userName"
22.         :show-overflow-tooltip="true"
23.       />
24.       <el-table-column
25.         label="绑定时间"
26.         width="180"
27.         align="center"
28.         prop="createTime"
29.       />
30.       <el-table-column
31.         label="操作"
32.         width="80"
33.         align="center"
34.         class-name="small-padding fixed-width"
35.       >
36.         <template slot-scope="scope">
37.           <el-button
38.             size="mini"
39.             type="text"
40.             icon="el-icon-delete"
41.             @click="unlockAuth(scope.$index, scope.row)"
42.           >解绑</el-button>
43.         </template>
44.       </el-table-column>
45.     </el-table>
47.     <div id="git-user-binding">
48.       <h4 class="provider-desc">你可以绑定以下第三方帐号用于CyberSpace系统</h4>
49.       <div id="authlist" class="user-bind">
50.         <a
51.           class="third-app"
52.           href="#"
53.           @click="authUrl('gitee');"
54.           title="使用 Gitee 账号授权登录"
55.         >
56.           <div class="git-other-login-icon">
57.             <svg-icon icon-class="gitee" />
58.           </div>
59.           <span class="app-name">Gitee</span></a
60.         >
62.         <a
63.           class="third-app"
64.           href="#"
65.           @click="authUrl('github');"
66.           title="使用 GitHub 账号授权登录"
67.         >
68.           <div class="git-other-login-icon">
69.             <svg-icon icon-class="github" />
70.           </div>
71.           <span class="app-name">Github</span></a
72.         >
74.         <a class="third-app" href="#" title="功能开发中...">
75.           <div class="git-other-login-icon">
76.             <svg-icon icon-class="weixin" />
77.           </div>
78.           <span class="app-name">WeiXin</span></a
79.         >
81.         <a class="third-app" href="#" title="功能开发中...">
82.           <div class="git-other-login-icon">
83.             <svg-icon icon-class="qq" />
84.           </div>
85.           <span class="app-name">QQ</span></a
86.         >
87.       </div>
88.     </div>
89.   </div>
90. </template>
92. <script>
93. import { authUnlock, authBinding } from "@/api/system/auth";
95. export default {
96.   props: {
97.     auths: {
98.       type: Array,
99.     },
100.   },
101.   data() {
102.     return {};
103.   },
104.   methods: {
105.     unlockAuth(index, row) {
106.       var _this = this;
107.       this.$modal
108.         .confirm('您确定要解除"' + row.source + '"的账号绑定吗？')
109.         .then(function () {
110.           return authUnlock(row.authId);
111.         })
112.         .then(() => {
113.           _this.auths.splice(index, 1);
114.           this.$modal.msgSuccess("解绑成功");
115.         })
116.         .catch(() => {});
117.     },
118.     authUrl(source) {
119.        authBinding(source).then(res => {
120.                       top.location.href = res.msg;
121.         });
122.     }
123.   },
124. };
125. </script>
127. <style type="text/css">
128. .user-bind .third-app {
129.   display: -webkit-box;
130.   display: -ms-flexbox;
131.   display: flex;
132.   -webkit-box-orient: vertical;
133.   -webkit-box-direction: normal;
134.   -ms-flex-direction: column;
135.   flex-direction: column;
136.   -webkit-box-align: center;
137.   -ms-flex-align: center;
138.   align-items: center;
139.   min-width: 80px;
140.   float: left;
141. }
142. .user-bind {
143.   font-size: 1rem;
144.   text-align: start;
145.   height: 50px;
146.   margin-top: 10px;
147. }
148. .git-other-login-icon > img {
149.   height: 32px;
150. }
151. a {
152.   text-decoration: none;
153.   cursor: pointer;
154.   color: #005980;
155. }
156. .provider-desc {
157.   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
158.     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans",
159.     "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei",
160.     "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp",
161.     sans-serif;
162.   font-size: 1.071rem;
163. }
164. td > img {
165.   height: 20px;
166.   width: 20px;
167.   display: inline-block;
168.   border-radius: 50%;
169.   margin-right: 5px;
170. }
171. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。