From ed12fb0fc9a53faa44f69e803f87014f98112cf6 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Sat, 5 Jul 2025 14:51:29 +0800
Subject: [PATCH] feat: add google auth integration

---
 README.md                                  |  1 +
 open-isle-cli/public/index.html            |  1 +
 open-isle-cli/src/main.js                  |  1 +
 open-isle-cli/src/utils/google.js          | 32 ++++++++++++++++++++++
 open-isle-cli/src/views/LoginPageView.vue  |  8 +++++-
 open-isle-cli/src/views/SignupPageView.vue |  8 +++++-
 6 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 open-isle-cli/src/utils/google.js
diff --git a/README.md b/README.md
index 8d6bdecdd..a393e1a4c 100644
--- a/README.md
+++ b/README.md
@@ -45,6 +45,7 @@ OpenIsle 基于 Spring Boot 构建，提供社区后台常见的注册、登录
    - `RESEND_API_KEY`：Resend 邮件服务 API Key
    - `COS_BASE_URL`：腾讯云 COS 访问域名
    - `GOOGLE_CLIENT_ID`：Google OAuth 客户端 ID
+   - `VUE_APP_GOOGLE_CLIENT_ID`：前端 Google OAuth 客户端 ID
    - `JWT_SECRET`：JWT 签名密钥
    - `JWT_EXPIRATION`：JWT 过期时间（毫秒）
    - `PASSWORD_STRENGTH`：密码强度（LOW、MEDIUM、HIGH）
diff --git a/open-isle-cli/public/index.html b/open-isle-cli/public/index.html
index ed3c2de70..0b96aea5b 100644
--- a/open-isle-cli/public/index.html
+++ b/open-isle-cli/public/index.html
@@ -9,6 +9,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
   </head>
   <body>
     <noscript>
diff --git a/open-isle-cli/src/main.js b/open-isle-cli/src/main.js
index 0817f5a49..25c1997a5 100644
--- a/open-isle-cli/src/main.js
+++ b/open-isle-cli/src/main.js
@@ -11,6 +11,7 @@ import { checkToken, clearToken } from './utils/auth'
 export const API_DOMAIN = 'http://127.0.0.1'
 export const API_PORT = 8081
 export const API_BASE_URL = API_PORT ? `${API_DOMAIN}:${API_PORT}` : API_DOMAIN
+export const GOOGLE_CLIENT_ID = process.env.VUE_APP_GOOGLE_CLIENT_ID || ''
 export const toast = useToast()
 
 const app = createApp(App)
diff --git a/open-isle-cli/src/utils/google.js b/open-isle-cli/src/utils/google.js
new file mode 100644
index 000000000..d586da47c
--- /dev/null
+++ b/open-isle-cli/src/utils/google.js
@@ -0,0 +1,32 @@
+import { API_BASE_URL, GOOGLE_CLIENT_ID, toast } from '../main'
+import { setToken } from './auth'
+
+export function googleSignIn(redirect) {
+  if (!window.google || !GOOGLE_CLIENT_ID) {
+    toast.error('Google 登录不可用')
+    return
+  }
+  window.google.accounts.id.initialize({
+    client_id: GOOGLE_CLIENT_ID,
+    callback: async ({ credential }) => {
+      try {
+        const res = await fetch(`${API_BASE_URL}/api/auth/google`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ idToken: credential })
+        })
+        const data = await res.json()
+        if (res.ok && data.token) {
+          setToken(data.token)
+          toast.success('登录成功')
+          if (redirect) redirect()
+        } else {
+          toast.error(data.error || '登录失败')
+        }
+      } catch (e) {
+        toast.error('登录失败')
+      }
+    }
+  })
+  window.google.accounts.id.prompt()
+}
diff --git a/open-isle-cli/src/views/LoginPageView.vue b/open-isle-cli/src/views/LoginPageView.vue
index 2054144c5..568649def 100644
--- a/open-isle-cli/src/views/LoginPageView.vue
+++ b/open-isle-cli/src/views/LoginPageView.vue
@@ -46,7 +46,7 @@
     </div>
 
     <div class="other-login-page-content">
-      <div class="login-page-button">
+      <div class="login-page-button" @click="loginWithGoogle">
         <img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
         <div class="login-page-button-text">Google 登录</div>
       </div>
@@ -57,6 +57,7 @@
 <script>
 import { API_BASE_URL, toast } from '../main'
 import { setToken } from '../utils/auth'
+import { googleSignIn } from '../utils/google'
 export default {
   name: 'LoginPageView',
   data() {
@@ -87,6 +88,11 @@ export default {
       } catch (e) {
         toast.error('登录失败')
       }
+    },
+    loginWithGoogle() {
+      googleSignIn(() => {
+        this.$router.push('/')
+      })
     }
   }
 }
diff --git a/open-isle-cli/src/views/SignupPageView.vue b/open-isle-cli/src/views/SignupPageView.vue
index 9bbabc4d6..b3fb24b4f 100644
--- a/open-isle-cli/src/views/SignupPageView.vue
+++ b/open-isle-cli/src/views/SignupPageView.vue
@@ -91,7 +91,7 @@
     </div>
 
     <div class="other-signup-page-content">
-      <div class="signup-page-button">
+      <div class="signup-page-button" @click="signupWithGoogle">
         <img class="signup-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
         <div class="signup-page-button-text">Google 注册</div>
       </div>
@@ -101,6 +101,7 @@
 
 <script>
 import { API_BASE_URL, toast } from '../main'
+import { googleSignIn } from '../utils/google'
 export default {
   name: 'SignupPageView',
 
@@ -187,6 +188,11 @@ export default {
       } catch (e) {
         toast.error('注册失败')
       }
+    },
+    signupWithGoogle() {
+      googleSignIn(() => {
+        this.$router.push('/')
+      })
     }
   }
 }
