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

Add popup-based Google login option

frontend/src/utils/google.js

@@ -18,6 +18,22 @@ export async function googleGetIdToken() {
   })
 }
 
+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()
+  })
+}
+
 export async function googleAuthWithToken(idToken, redirect_success, redirect_not_approved) {
   try {
     const res = await fetch(`${API_BASE_URL}/api/auth/google`, {
@@ -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() {
@@ -65,3 +90,14 @@ export function loginWithGoogle() {
     }
   )
 }
+
+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 {