接入第三方登录--前端页面兼容多个第三方登录

weir
1 parent 133cb49c
Showing 4 changed files with 52 additions and 22 deletions
yudao-admin-ui/src/api/login.js
yudao-admin-ui/src/views/login.vue
yudao-admin-ui/src/views/oauthLogin.vue
yudao-framework/yudao-spring-boot-starter-security/src/main/java/cn/iocoder/yudao/framework/security/core/LoginUser.java
@@ -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'
   })
 }
@@ -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>
 <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>
@@ -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