✨ github oauth2 login / gitee oauth2 login

src/api/oauth/gitee.ts

@@ -0,0 +1,18 @@
+import {service} from "@/utils/alova/service.ts";
+
+/**
+ * 获取Gitee登录链接
+ */
+export const getGiteeUrl = () => {
+    return service.Get('/api/oauth/gitee/get_url',
+        {
+            meta: {
+                ignoreToken: true,
+            },
+            cacheFor: {
+                mode: "restore",
+                expire: 1000 * 60 * 60 * 24 * 30 // 30 days
+            }
+        }
+    );
+};

src/api/oauth/github.ts

@@ -0,0 +1,18 @@
+import {service} from "@/utils/alova/service.ts";
+
+/**
+ * Get Github OAuth URL
+ */
+export const getGithubUrl = () => {
+    return service.Get('/api/oauth/github/get_url',
+        {
+            meta: {
+                ignoreToken: true,
+            },
+            cacheFor: {
+                mode: "restore",
+                expire: 1000 * 60 * 60 * 24 * 30 // 30 days
+            }
+        }
+    );
+};

src/api/oauth/wechat.ts

@@ -48,15 +48,3 @@ export const closeWebsocket = (clientId: string) => {
         }
     );
 };
-export const sendSocketMessage = (clientId: string) => {
-    return service.Get('/api/ws/send',
-        {
-            params: {
-                client_id: clientId
-            },
-            meta: {
-                ignoreToken: true,
-            },
-        }
-    );
-};

src/locales/index.ts

@@ -1,4 +1,4 @@
-// index.ts
+// wechat.ts
 import {createI18n} from 'vue-i18n';
 import zh from './language/zh.ts';
 import en from './language/en.ts';

src/utils/websocket/websocket.ts

@@ -27,7 +27,7 @@ class WebSocketService {
         this.ws.addEventListener('close', this.handleClose);
         setInterval(() => {
             if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-                this.send('ping');
+                this.send("ping");
             }
         }, this.heartbeatIntervalMs);
     }

src/views/Login/LoginFooter.vue

@@ -6,19 +6,107 @@
           router.push('/qrlogin')
       }" class="login-form-bottom-button" :icon="h(QrcodeOutlined)">{{ t("login.qrLogin") }}
       </AButton>
-      <AButton class="login-form-bottom-button" :icon="h(QqOutlined)"></AButton>
+      <AButton @click="openGiteeUrl" class="login-form-bottom-button" :icon="h(QqOutlined)"></AButton>
-      <AButton class="login-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
+      <AButton @click="openGithubUrl" class="login-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
     </AFlex>
   </div>
 </template>
 <script setup lang="ts">
 import {GithubOutlined, QqOutlined, QrcodeOutlined} from "@ant-design/icons-vue";
 import {useI18n} from "vue-i18n";
-import {h} from "vue";
+import {h, onMounted, ref} from "vue";
 import {useRouter} from 'vue-router';
+import {getGithubUrl} from "@/api/oauth/github.ts";
+import {getGiteeUrl} from "@/api/oauth/gitee.ts";
+import useStore from "@/store";
+import {message} from "ant-design-vue";
 
 const router = useRouter();
 const {t} = useI18n();
+const githubRedirectUrl = ref<string>('');
+const giteeRedirectUrl = ref<string>('');
+
+/**
+ * Get the redirect url of Github OAuth
+ */
+async function getGithubRedirectUrl() {
+  const res: any = await getGithubUrl();
+  if (res.code === 0 && res.data) {
+    githubRedirectUrl.value = res.data;
+  }
+}
+
+/**
+ * Get the redirect url of Gitee OAuth
+ */
+async function getGiteeRedirectUrl() {
+  const res: any = await getGiteeUrl();
+  if (res.code === 0 && res.data) {
+    giteeRedirectUrl.value = res.data;
+  }
+}
+
+/**
+ * Open the Github OAuth page in a new window
+ */
+const openGithubUrl = () => {
+  const iWidth = 800;                         //弹出窗口的宽度;
+  const iHeight = 500;                        //弹出窗口的高度;
+  //window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
+  const iTop = (window.screen.height - 30 - iHeight) / 2;       //获得窗口的垂直位置;
+  const iLeft = (window.screen.width - 10 - iWidth) / 2;        //获得窗口的水平位置;
+  window.open(githubRedirectUrl.value, 'newwindow', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
+
+  const messageHandler = (e: any) => {
+    if (typeof e.data === 'string') {
+      const data: any = JSON.parse(e.data);
+      if (data.code === 0 && data.data) {
+        const user = useStore().user;
+        const {access_token, refresh_token, uid, expires_at} = data.data;
+        user.user.accessToken = access_token;
+        user.user.refreshToken = refresh_token;
+        user.user.uid = uid;
+        user.user.expiresAt = expires_at;
+        message.success(t('login.loginSuccess'));
+        window.removeEventListener("message", messageHandler);
+      }
+    }
+  };
+  window.addEventListener("message", messageHandler);
+};
+/**
+ * Open the Gitee OAuth page in a new window
+ */
+const openGiteeUrl = () => {
+  const iWidth = 800;                         //弹出窗口的宽度;
+  const iHeight = 500;                        //弹出窗口的高度;
+  //window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
+  const iTop = (window.screen.height - 30 - iHeight) / 2;       //获得窗口的垂直位置;
+  const iLeft = (window.screen.width - 10 - iWidth) / 2;        //获得窗口的水平位置;
+  window.open(giteeRedirectUrl.value, '_blank', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
+
+
+  const messageHandler = (e: any) => {
+    if (typeof e.data === 'string') {
+      const data: any = JSON.parse(e.data);
+      if (data.code === 0 && data.data) {
+        const user = useStore().user;
+        const {access_token, refresh_token, uid, expires_at} = data.data;
+        user.user.accessToken = access_token;
+        user.user.refreshToken = refresh_token;
+        user.user.uid = uid;
+        user.user.expiresAt = expires_at;
+        message.success(t('login.loginSuccess'));
+        window.removeEventListener("message", messageHandler);
+      }
+    }
+  };
+  window.addEventListener("message", messageHandler);
+};
+onMounted(() => {
+  getGithubRedirectUrl();
+  getGiteeRedirectUrl();
+});
 </script>
 <style src="./index.scss" scoped>
 

src/views/QRLogin/QRLogin.vue

@@ -19,7 +19,6 @@
               :error-level="'H'"
               :status="status"
               @refresh="() => {
-                getClientId();
                 getQrCode();
               }"
               :value=qrcode
@@ -45,7 +44,7 @@ import {useI18n} from "vue-i18n";
 import BoxDog from "@/components/BoxDog/BoxDog.vue";
 import QRLoginFooter from "@/views/QRLogin/QRLoginFooter.vue";
 import {useRouter} from 'vue-router';
-import {closeWebsocket, generateClientId, generateQrCode} from "@/api/oauth";
+import {closeWebsocket, generateClientId, generateQrCode} from "@/api/oauth/wechat.ts";
 import {onMounted, onUnmounted, ref} from "vue";
 import logo from "@/assets/svgs/logo-schisandra.svg";
 import useWebSocket from "@/utils/websocket/websocket.ts";
@@ -77,9 +76,10 @@ async function getClientId() {
  *  获取二维码
  */
 async function getQrCode() {
-  const clientId: any = localStorage.getItem('client_id');
+  const clientId: string | null = localStorage.getItem('client_id');
   if (!clientId) {
     status.value = 'expired';
+    await getClientId();
     return;
   }
   const res: any = await generateQrCode(clientId);
@@ -120,22 +120,21 @@ onMounted(async () => {
   // 注册消息接收处理函数
   on('message', (data: any) => {
     console.log(data);
-    if (data) {
+    if (data.code === 0 && data.data) {
       const user = useStore().user;
-      user.user.accessToken = data.access_token;
+      const {access_token, refresh_token, uid, expires_at} = data.data;
-      user.user.refreshToken = data.refresh_token;
+      user.user.accessToken = access_token;
-      user.user.uid = data.uid;
+      user.user.refreshToken = refresh_token;
-      user.user.expiresAt = data.expires_at;
+      user.user.uid = uid;
+      user.user.expiresAt = expires_at;
       status.value = 'scanned';
       message.success(t('login.loginSuccess'));
-    } else {
-      message.error(t('login.loginError'));
     }
   });
 });
 
 onUnmounted(async () => {
-  // await closeWebsocket(getLocalClientId());
+  await closeWebsocket(getLocalClientId());
   close(true);
 
 });

src/views/QRLogin/QRLoginFooter.vue

@@ -6,19 +6,108 @@
           router.push('/login')
       }" class="qrlogin-form-bottom-button" :icon="h(TabletOutlined)">{{ t("login.phoneLoginAndRegister") }}
       </AButton>
-      <AButton class="qrlogin-form-bottom-button" :icon="h(QqOutlined)"></AButton>
+      <AButton @click="openGiteeUrl" class="qrlogin-form-bottom-button" :icon="h(QqOutlined)"></AButton>
-      <AButton class="qrlogin-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
+      <AButton @click="openGithubUrl" class="qrlogin-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
     </AFlex>
   </div>
 </template>
 <script setup lang="ts">
 import {GithubOutlined, QqOutlined, TabletOutlined} from "@ant-design/icons-vue";
 import {useI18n} from "vue-i18n";
-import {h} from "vue";
+import {h, onMounted, ref} from "vue";
 import {useRouter} from 'vue-router';
+import {getGithubUrl} from "@/api/oauth/github.ts";
+import {getGiteeUrl} from "@/api/oauth/gitee.ts";
+import useStore from "@/store";
+import {message} from "ant-design-vue";
 
 const router = useRouter();
 const {t} = useI18n();
+
+const githubRedirectUrl = ref<string>('');
+const giteeRedirectUrl = ref<string>('');
+
+/**
+ * Get the redirect url of Github OAuth
+ */
+async function getGithubRedirectUrl() {
+  const res: any = await getGithubUrl();
+  if (res.code === 0 && res.data) {
+    githubRedirectUrl.value = res.data;
+  }
+}
+
+/**
+ * Get the redirect url of Gitee OAuth
+ */
+async function getGiteeRedirectUrl() {
+  const res: any = await getGiteeUrl();
+  if (res.code === 0 && res.data) {
+    giteeRedirectUrl.value = res.data;
+  }
+}
+
+/**
+ * Open the Github OAuth page in a new window
+ */
+const openGithubUrl = () => {
+  const iWidth = 800;                         //弹出窗口的宽度;
+  const iHeight = 500;                        //弹出窗口的高度;
+  //window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
+  const iTop = (window.screen.height - 30 - iHeight) / 2;       //获得窗口的垂直位置;
+  const iLeft = (window.screen.width - 10 - iWidth) / 2;        //获得窗口的水平位置;
+  window.open(githubRedirectUrl.value, 'newwindow', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
+
+  const messageHandler = (e: any) => {
+    if (typeof e.data === 'string') {
+      const data: any = JSON.parse(e.data);
+      if (data.code === 0 && data.data) {
+        const user = useStore().user;
+        const {access_token, refresh_token, uid, expires_at} = data.data;
+        user.user.accessToken = access_token;
+        user.user.refreshToken = refresh_token;
+        user.user.uid = uid;
+        user.user.expiresAt = expires_at;
+        message.success(t('login.loginSuccess'));
+        window.removeEventListener("message", messageHandler);
+      }
+    }
+  };
+  window.addEventListener("message", messageHandler);
+};
+/**
+ * Open the Gitee OAuth page in a new window
+ */
+const openGiteeUrl = () => {
+  const iWidth = 800;                         //弹出窗口的宽度;
+  const iHeight = 500;                        //弹出窗口的高度;
+  //window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
+  const iTop = (window.screen.height - 30 - iHeight) / 2;       //获得窗口的垂直位置;
+  const iLeft = (window.screen.width - 10 - iWidth) / 2;        //获得窗口的水平位置;
+  window.open(giteeRedirectUrl.value, '_blank', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no');
+
+
+  const messageHandler = (e: any) => {
+    if (typeof e.data === 'string') {
+      const data: any = JSON.parse(e.data);
+      if (data.code === 0 && data.data) {
+        const user = useStore().user;
+        const {access_token, refresh_token, uid, expires_at} = data.data;
+        user.user.accessToken = access_token;
+        user.user.refreshToken = refresh_token;
+        user.user.uid = uid;
+        user.user.expiresAt = expires_at;
+        message.success(t('login.loginSuccess'));
+        window.removeEventListener("message", messageHandler);
+      }
+    }
+  };
+  window.addEventListener("message", messageHandler);
+};
+onMounted(() => {
+  getGithubRedirectUrl();
+  getGiteeRedirectUrl();
+});
 </script>
 <style src="./index.scss" scoped>