From 384b4a5cf13e4de3f7f8655b2ae54e0f11085e54 Mon Sep 17 00:00:00 2001
From: weir <1261174789@qq.com>
Date: Sat, 14 Aug 2021 21:16:20 +0800
Subject: [PATCH] 接入第三方登录--前端页面兼容多个第三方登录

---
 yudao-admin-ui/src/api/login.js                                                                                          |  6 +++---
 yudao-admin-ui/src/views/login.vue                                                                                       | 52 +++++++++++++++++++++++++++++++++++++++++++++-------
 yudao-admin-ui/src/views/oauthLogin.vue                                                                                  | 13 ++-----------
 yudao-framework/yudao-spring-boot-starter-security/src/main/java/cn/iocoder/yudao/framework/security/core/LoginUser.java |  3 ++-
 4 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/yudao-admin-ui/src/api/login.js b/yudao-admin-ui/src/api/login.js
index 4ccf1be..8ddb6d6 100644
--- a/yudao-admin-ui/src/api/login.js
+++ b/yudao-admin-ui/src/api/login.js
@@ -40,9 +40,9 @@ export function getCodeImg() {
 }
 
 // 接入第三方登录
-export function giteeLogin() {
+export function oAuthLogin(provider) {
   return request({
-    url: '/auth2/authorization/gitee',
+    url: '/auth2/authorization/' + provider,
     method: 'get'
   })
 }
@@ -50,7 +50,7 @@ export function giteeLogin() {
 export function getToken(path) {
   console.log({path});
   return request({
-    url: '/auth2/login/gitee' +  path,
+    url: '/auth2/login/github' +  path,
     method: 'get'
   })
 }
diff --git a/yudao-admin-ui/src/views/login.vue b/yudao-admin-ui/src/views/login.vue
index 685eed9..738dae0 100644
--- a/yudao-admin-ui/src/views/login.vue
+++ b/yudao-admin-ui/src/views/login.vue
@@ -45,10 +45,14 @@
           <span v-else>登 录 中...</span>
         </el-button>
       </el-form-item>
+      
       <el-form-item style="width:100%;">
-        <el-button @click="doAuth2Login" title="使用 Gitee 帐号登录">
-          <span class="gitee-login-title">使用 Gitee 帐号登录</span>
-        </el-button>
+          <div class="oauth-login" style="display:flex">
+            <div class="oauth-login-item" v-for="item in oauthProviders" :key="item.code" @click="doAuth2Login(item)">
+              <img :src=item.img height="25px" width="25px" alt="登录" >
+              <span>{{item.title}}</span>
+            </div>
+        </div>
       </el-form-item>
     </el-form>
     <!--  底部  -->
@@ -59,7 +63,7 @@
 </template>
 
 <script>
-import { getCodeImg,giteeLogin } from "@/api/login";
+import { getCodeImg,oAuthLogin } from "@/api/login";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from '@/utils/jsencrypt'
 
@@ -76,6 +80,23 @@ export default {
         code: "",
         uuid: ""
       },
+      oauthProviders: [
+        {
+          img: "https://cdn.jsdelivr.net/gh/justauth/justauth-oauth-logo@1.2/gitee.png",
+          title: "码云",
+          code: "gitee"
+        },
+        {
+          img: "https://cdn.jsdelivr.net/gh/justauth/justauth-oauth-logo@1.2/wechat.png",
+          title: "微信",
+          code: "weixin"
+        },
+        {
+          img: "https://cdn.jsdelivr.net/gh/justauth/justauth-oauth-logo@1.2/qq.png",
+          title: "QQ",
+          code: "qq"
+        }
+      ],
       loginRules: {
         username: [
           { required: true, trigger: "blur", message: "用户名不能为空" }
@@ -141,10 +162,10 @@ export default {
         }
       });
     },
-    doAuth2Login() {
-      console.log("开始Oauth登录...");
+    doAuth2Login(provider) {
+      console.log("开始Oauth登录...%o", provider.code);
       this.loading = true;
-      giteeLogin().then((res) => {
+      oAuthLogin(provider.code).then((res) => {
         console.log(res.url);
         window.location.href = res.url;
       });
@@ -214,4 +235,21 @@ export default {
 .login-code-img {
   height: 38px;
 }
+.oauth-login {
+  display: flex;
+  cursor:pointer;
+}
+.oauth-login-item {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+.oauth-login-item img {
+  height: 25px;
+  width: 25px;
+}
+.oauth-login-item span:hover {
+  text-decoration: underline red;
+  color: red;
+}
 </style>
diff --git a/yudao-admin-ui/src/views/oauthLogin.vue b/yudao-admin-ui/src/views/oauthLogin.vue
index 19e28d0..fbfd252 100644
--- a/yudao-admin-ui/src/views/oauthLogin.vue
+++ b/yudao-admin-ui/src/views/oauthLogin.vue
@@ -1,24 +1,15 @@
 <template>
-  <div>登录成功！</div>
 </template>
 
 <script>
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { setToken } from '@/utils/auth'
 
 export default {
   created() {
-    var token = this.getOauthToken();
+    const {token} = this.$route.query;
     setToken(token);
     this.$router.push({ path: this.redirect || "/" }).catch(() => {});
   },
-  methods: {
-    getOauthToken() {
-      console.log(this);
-      var h = window.location.href;
-      var token = "token=";
-      return h.substring(h.indexOf(token)+token.length);
-    }
-  },
 }
 </script>
 
diff --git a/yudao-framework/yudao-spring-boot-starter-security/src/main/java/cn/iocoder/yudao/framework/security/core/LoginUser.java b/yudao-framework/yudao-spring-boot-starter-security/src/main/java/cn/iocoder/yudao/framework/security/core/LoginUser.java
index 2c2ff89..c5c4a98 100644
--- a/yudao-framework/yudao-spring-boot-starter-security/src/main/java/cn/iocoder/yudao/framework/security/core/LoginUser.java
+++ b/yudao-framework/yudao-spring-boot-starter-security/src/main/java/cn/iocoder/yudao/framework/security/core/LoginUser.java
@@ -8,6 +8,7 @@ import org.springframework.security.core.userdetails.UserDetails;
 
 import java.util.Collection;
 import java.util.Date;
+import java.util.HashSet;
 import java.util.Set;
 
 /**
@@ -69,7 +70,7 @@ public class LoginUser implements UserDetails {
     @Override
     @JsonIgnore// 避免序列化
     public Collection<? extends GrantedAuthority> getAuthorities() {
-        return null;
+        return new HashSet<>();
     }
 
     @Override
--
libgit2 0.21.4