Merge pull request #321 from nagisa77/codex/add-loginwithgooglewithpop-function

Add popup-based Google login option

frontend/src/utils/google.js

@@ -12,7 +12,23 @@ export async function googleGetIdToken() {
     window.google.accounts.id.initialize({
       client_id: GOOGLE_CLIENT_ID,
       callback: ({ credential }) => resolve(credential),
-      use_fedcm: true 
+      use_fedcm: true
+    })
+    window.google.accounts.id.prompt()
+  })
+}
+
+export async function googleGetIdTokenWithPop() {
+  return new Promise((resolve, reject) => {
+    if (!window.google || !GOOGLE_CLIENT_ID) {
+      toast.error('Google 登录不可用, 请检查网络设置与VPN')
+      reject()
+      return
+    }
+    window.google.accounts.id.initialize({
+      client_id: GOOGLE_CLIENT_ID,
+      callback: ({ credential }) => resolve(credential),
+      ux_mode: 'popup'
     })
     window.google.accounts.id.prompt()
   })
@@ -53,6 +69,15 @@ export async function googleSignIn(redirect_success, redirect_not_approved) {
   }
 }
 
+export async function googleSignInWithPop(redirect_success, redirect_not_approved) {
+  try {
+    const token = await googleGetIdTokenWithPop()
+    await googleAuthWithToken(token, redirect_success, redirect_not_approved)
+  } catch {
+    /* ignore */
+  }
+}
+
 import router from '../router'
 
 export function loginWithGoogle() {
@@ -64,4 +89,15 @@ export function loginWithGoogle() {
       router.push('/signup-reason?token=' + token)
     }
   )
+}
+
+export function loginWithGoogleWithPop() {
+  googleSignInWithPop(
+    () => {
+      router.push('/')
+    },
+    token => {
+      router.push('/signup-reason?token=' + token)
+    }
+  )
 }

frontend/src/views/LoginPageView.vue

@@ -31,7 +31,7 @@
     </div>
 
     <div class="other-login-page-content">
-      <div class="login-page-button" @click="loginWithGoogle">
+      <div class="login-page-button" @click="loginWithGoogleWithPop">
         <img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
         <div class="login-page-button-text">Google 登录</div>
       </div>
@@ -54,7 +54,7 @@
 <script>
 import { API_BASE_URL, toast } from '../main'
 import { setToken, loadCurrentUser } from '../utils/auth'
-import { loginWithGoogle } from '../utils/google'
+import { loginWithGoogleWithPop } from '../utils/google'
 import { githubAuthorize } from '../utils/github'
 import { discordAuthorize } from '../utils/discord'
 import { twitterAuthorize } from '../utils/twitter'
@@ -64,7 +64,7 @@ export default {
   name: 'LoginPageView',
   components: { BaseInput },
   setup() {
-    return { loginWithGoogle }
+    return { loginWithGoogleWithPop }
   }, 
   data() {
     return {

frontend/src/views/SignupPageView.vue

@@ -67,7 +67,7 @@
     </div>
 
     <div class="other-signup-page-content">
-      <div class="signup-page-button" @click="loginWithGoogle">
+      <div class="signup-page-button" @click="loginWithGoogleWithPop">
         <img class="signup-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
         <div class="signup-page-button-text">Google 注册</div>
       </div>
@@ -89,7 +89,7 @@
 
 <script>
 import { API_BASE_URL, toast } from '../main'
-import { loginWithGoogle } from '../utils/google'
+import { loginWithGoogleWithPop } from '../utils/google'
 import { githubAuthorize } from '../utils/github'
 import { discordAuthorize } from '../utils/discord'
 import { twitterAuthorize } from '../utils/twitter'
@@ -98,7 +98,7 @@ export default {
   name: 'SignupPageView',
   components: { BaseInput },
   setup() {
-    return { loginWithGoogle }
+    return { loginWithGoogleWithPop }
   },
   data() {
     return {