feat: add GitHub OAuth login

open-isle-cli/src/views/GithubCallbackPageView.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="loading">GitHub 登录中...</div>
+</template>
+
+<script>
+import { githubExchange } from '../utils/github'
+
+export default {
+  name: 'GithubCallbackPageView',
+  async mounted() {
+    const url = new URL(window.location.href)
+    const code = url.searchParams.get('code')
+    const state = url.searchParams.get('state')
+    const result = await githubExchange(code, state, '')
+    if (result === 'NEED_REASON') {
+      this.$router.push('/signup-reason?github=1')
+    } else {
+      this.$router.push('/')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.loading {
+  height: calc(100vh - var(--header-height));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+}
+</style>

open-isle-cli/src/views/LoginPageView.vue

@@ -34,6 +34,10 @@
         <img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
         <div class="login-page-button-text">Google 登录</div>
       </div>
+      <div class="login-page-button" @click="loginWithGithub">
+        <img class="login-page-button-icon" src="../assets/icons/github.svg" alt="GitHub Logo" />
+        <div class="login-page-button-text">GitHub 登录</div>
+      </div>
     </div>
   </div>
 </template>
@@ -42,6 +46,7 @@
 import { API_BASE_URL, toast } from '../main'
 import { setToken, loadCurrentUser } from '../utils/auth'
 import { googleSignIn } from '../utils/google'
+import { githubAuthorize } from '../utils/github'
 import BaseInput from '../components/BaseInput.vue'
 export default {
   name: 'LoginPageView',
@@ -89,6 +94,9 @@ export default {
       }, () => {
         this.$router.push('/signup-reason?google=1')
       })
+    },
+    loginWithGithub() {
+      githubAuthorize()
     }
   }
 }

open-isle-cli/src/views/SignupPageView.vue

@@ -76,6 +76,10 @@
         <img class="signup-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
         <div class="signup-page-button-text">Google 注册</div>
       </div>
+      <div class="signup-page-button" @click="signupWithGithub">
+        <img class="signup-page-button-icon" src="../assets/icons/github.svg" alt="GitHub Logo" />
+        <div class="signup-page-button-text">GitHub 注册</div>
+      </div>
     </div>
   </div>
 </template>
@@ -83,6 +87,7 @@
 <script>
 import { API_BASE_URL, toast } from '../main'
 import { googleSignIn, googleGetIdToken } from '../utils/google'
+import { githubAuthorize } from '../utils/github'
 import BaseInput from '../components/BaseInput.vue'
 export default {
   name: 'SignupPageView',
@@ -211,6 +216,9 @@ export default {
           this.$router.push('/signup-reason?google=1')
         })
       }
+    },
+    signupWithGithub() {
+      githubAuthorize()
     }
   }
 }

open-isle-cli/src/views/SignupReasonPageView.vue

@@ -20,6 +20,7 @@
 import BaseInput from '../components/BaseInput.vue'
 import { API_BASE_URL, toast } from '../main'
 import { googleAuthWithToken } from '../utils/google'
+import { githubExchange } from '../utils/github'
 
 export default {
   name: 'SignupReasonPageView',
@@ -29,17 +30,25 @@ export default {
       reason: '',
       error: '',
       isGoogle: false,
+      isGithub: false,
       isWaitingForRegister: false,
-      googleToken: ''
+      googleToken: '',
+      githubCode: ''
     }
   },
   mounted() {
     this.isGoogle = this.$route.query.google === '1'
+    this.isGithub = this.$route.query.github === '1'
     if (this.isGoogle) {
       this.googleToken = sessionStorage.getItem('google_id_token') || ''
       if (!this.googleToken) {
         this.$router.push('/signup')
       }
+    } else if (this.isGithub) {
+      this.githubCode = sessionStorage.getItem('github_code') || ''
+      if (!this.githubCode) {
+        this.$router.push('/signup')
+      }
     } else if (!sessionStorage.getItem('signup_username')) {
       this.$router.push('/signup')
     }
@@ -65,6 +74,23 @@ export default {
         sessionStorage.removeItem('google_id_token')
         return
       }
+      if (this.isGithub) {
+        this.isWaitingForRegister = true
+        const code = this.githubCode || sessionStorage.getItem('github_code')
+        if (!code) {
+          toast.error('GitHub 登录失败')
+          return
+        }
+        const result = await githubExchange(code, '', this.reason)
+        this.isWaitingForRegister = false
+        sessionStorage.removeItem('github_code')
+        if (result) {
+          this.$router.push('/')
+        } else {
+          this.error = 'GitHub 登录失败'
+        }
+        return
+      }
       try {
         this.isWaitingForRegister = true
         const res = await fetch(`${API_BASE_URL}/api/auth/register`, {