Open Google auth in new window

frontend/src/main.js

@@ -8,9 +8,8 @@ import './assets/toast.css'
 // Use Sugar theme from vue-toast-notification for better toast styling.
 // If you prefer Bootstrap style, replace with theme-bootstrap.css instead.
 import { useToast } from 'vue-toastification'
-import { checkToken, clearToken, isLogin } from './utils/auth'
+import { checkToken, clearToken } from './utils/auth'
 import { initTheme } from './utils/theme'
-import { loginWithGoogle } from './utils/google'
 import { clearVditorStorage } from './utils/clearVditorStorage'
 
 // Configurable API domain and port
@@ -50,10 +49,4 @@ checkToken().then(valid => {
   if (!valid) {
     clearToken()
   }
-
-  if (!isLogin()) {
-    setTimeout(() => {
-      loginWithGoogle()
-    }, 3000)
-  }
 })

frontend/src/router/index.js

@@ -16,6 +16,7 @@ import NotFoundPageView from '../views/NotFoundPageView.vue'
 import GithubCallbackPageView from '../views/GithubCallbackPageView.vue'
 import DiscordCallbackPageView from '../views/DiscordCallbackPageView.vue'
 import TwitterCallbackPageView from '../views/TwitterCallbackPageView.vue'
+import GoogleCallbackPageView from '../views/GoogleCallbackPageView.vue'
 import ForgotPasswordPageView from '../views/ForgotPasswordPageView.vue'
 
 const routes = [
@@ -104,6 +105,11 @@ const routes = [
     name: 'twitter-callback',
     component: TwitterCallbackPageView
   },
+  {
+    path: '/google-callback',
+    name: 'google-callback',
+    component: GoogleCallbackPageView
+  },
   {
     path: '/404',
     name: 'not-found',

frontend/src/utils/google.js

@@ -1,21 +1,17 @@
 import { API_BASE_URL, GOOGLE_CLIENT_ID, toast } from '../main'
 import { setToken, loadCurrentUser } from './auth'
 import { registerPush } from './push'
+import { WEBSITE_BASE_URL } from '../constants'
 
-export async function googleGetIdToken() {
-  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),
-      use_fedcm: true 
-    })
-    window.google.accounts.id.prompt()
-  })
+export function googleAuthorize() {
+  if (!GOOGLE_CLIENT_ID) {
+    toast.error('Google 登录不可用, 请检查网络设置与VPN')
+    return
+  }
+  const redirectUri = `${WEBSITE_BASE_URL}/google-callback`
+  const nonce = Math.random().toString(36).substring(2)
+  const url = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${GOOGLE_CLIENT_ID}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=id_token&scope=openid%20email%20profile&nonce=${nonce}`
+  window.open(url, '_blank', 'width=500,height=600')
 }
 
 export async function googleAuthWithToken(idToken, redirect_success, redirect_not_approved) {
@@ -36,32 +32,10 @@ export async function googleAuthWithToken(idToken, redirect_success, redirect_no
       toast.info('当前为注册审核模式，请填写注册理由')
       if (redirect_not_approved) redirect_not_approved(data.token)
     } else if (data.reason_code === 'IS_APPROVING') {
-      toast.info('您的注册理由正在审批中')      
+      toast.info('您的注册理由正在审批中')
       if (redirect_success) redirect_success()
     }
   } catch (e) {
     toast.error('登录失败')
   }
-}
-
-export async function googleSignIn(redirect_success, redirect_not_approved) {
-  try {
-    const token = await googleGetIdToken()
-    await googleAuthWithToken(token, redirect_success, redirect_not_approved)
-  } catch {
-    /* ignore */
-  }
-}
-
-import router from '../router'
-
-export function loginWithGoogle() {
-  googleSignIn(
-    () => {
-      router.push('/')
-    },
-    token => {
-      router.push('/signup-reason?token=' + token)
-    }
-  )
 }

frontend/src/views/GoogleCallbackPageView.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="google-callback-page">
+    <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
+    <div class="google-callback-page-text">Magic is happening...</div>
+  </div>
+</template>
+
+<script>
+import { googleAuthWithToken } from '../utils/google'
+import { hatch } from 'ldrs'
+hatch.register()
+
+export default {
+  name: 'GoogleCallbackPageView',
+  async mounted() {
+    const hash = new URLSearchParams(window.location.hash.substring(1))
+    const idToken = hash.get('id_token')
+    if (idToken) {
+      await googleAuthWithToken(idToken, () => {
+        this.$router.push('/')
+      }, token => {
+        this.$router.push('/signup-reason?token=' + token)
+      })
+    } else {
+      this.$router.push('/login')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.google-callback-page {
+  background-color: var(--background-color);
+  height: calc(100vh - var(--header-height));
+  padding-top: var(--header-height);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.google-callback-page-text {
+  margin-top: 25px;
+  font-size: 16px;
+  color: var(--primary-color);
+  font-weight: bold;
+}
+</style>

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="googleAuthorize">
         <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 { googleAuthorize } from '../utils/google'
 import { githubAuthorize } from '../utils/github'
 import { discordAuthorize } from '../utils/discord'
 import { twitterAuthorize } from '../utils/twitter'
@@ -64,8 +64,8 @@ export default {
   name: 'LoginPageView',
   components: { BaseInput },
   setup() {
-    return { loginWithGoogle }
-  }, 
+    return { googleAuthorize }
+  },
   data() {
     return {
       username: '',

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="googleAuthorize">
         <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 { googleAuthorize } 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 { googleAuthorize }
   },
   data() {
     return {