feat: add GitHub OAuth login

open-isle-cli/src/main.js

@@ -18,6 +18,7 @@ export const API_PORT = 8081
 // export const API_BASE_URL = API_PORT ? `${API_DOMAIN}:${API_PORT}` : API_DOMAIN
 export const API_BASE_URL = "";
 export const GOOGLE_CLIENT_ID = '777830451304-nt8afkkap18gui4f9entcha99unal744.apps.googleusercontent.com'
+export const GITHUB_CLIENT_ID = ''
 export const toast = useToast()
 
 initTheme()

open-isle-cli/src/router/index.js

@@ -11,6 +11,7 @@ import NewPostPageView from '../views/NewPostPageView.vue'
 import SettingsPageView from '../views/SettingsPageView.vue'
 import ProfileView from '../views/ProfileView.vue'
 import NotFoundPageView from '../views/NotFoundPageView.vue'
+import GithubCallbackPageView from '../views/GithubCallbackPageView.vue'
 
 const routes = [
   {
@@ -68,6 +69,11 @@ const routes = [
     name: 'users',
     component: ProfileView
   },
+  {
+    path: '/github-callback',
+    name: 'github-callback',
+    component: GithubCallbackPageView
+  },
   {
     path: '/404',
     name: 'not-found',

open-isle-cli/src/utils/github.js

@@ -0,0 +1,41 @@
+import { API_BASE_URL, GITHUB_CLIENT_ID, toast } from '../main'
+import { setToken, loadCurrentUser } from './auth'
+
+export function githubAuthorize(state = '') {
+  if (!GITHUB_CLIENT_ID) {
+    toast.error('GitHub 登录不可用')
+    return
+  }
+  const redirectUri = `${window.location.origin}/github-callback`
+  const url = `https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&redirect_uri=${encodeURIComponent(redirectUri)}&scope=user:email&state=${state}`
+  window.location.href = url
+}
+
+export async function githubExchange(code, state, reason) {
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/auth/github`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ code, redirectUri: `${window.location.origin}/github-callback`, reason, state })
+    })
+    const data = await res.json()
+    if (res.ok && data.token) {
+      setToken(data.token)
+      await loadCurrentUser()
+      toast.success('登录成功')
+      return true
+    } else if (data.reason_code === 'NOT_APPROVED') {
+      toast.info('当前为注册审核模式，请填写注册理由')
+      sessionStorage.setItem('github_code', code)
+      return 'NEED_REASON'
+    } else if (data.reason_code === 'IS_APPROVING') {
+      toast.info('您的注册理由正在审批中')
+      return true
+    } else {
+      toast.error(data.error || '登录失败')
+    }
+  } catch (e) {
+    toast.error('登录失败')
+  }
+  return false
+}

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`, {