✨ github oauth2 login / gitee oauth2 login

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 class="login-form-bottom-button" :icon="h(GithubOutlined)"></AButton>
+      <AButton @click="openGiteeUrl" class="login-form-bottom-button" :icon="h(QqOutlined)"></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>