谷歌登录

env.d.ts

@@ -19,6 +19,13 @@ interface GoogleAccounts {
         logo_alignment?: 'left' | 'center'
       }) => void
     }
+	oauth2: {
+      initTokenClient: (config: {
+        client_id: string
+        callback: (response: { access_token: string }) => void
+	    scope?: string
+      }) => void
+	}
   }
 }
 

src/views/login/SignupPage.vue

@@ -30,7 +30,7 @@
 
           <button type="button" class="login-button" @click="handleConfirm">Sign Up</button>
 
-          <GoogleLogin text="Sign up with Google" @googelLogin="handleGoogleSignup" />
+          <GoogleLogin text="Sign up with Google" @googelLogin="handleGoogleSignup" ref="googleSignupRef" @click="clickGooleLogin" />
         </div>
       </div>
     </div>
@@ -130,7 +130,10 @@ const handleConfirm = async () => {
       isLoading.value = false
     })
 }
-
+const googleSignupRef = ref(null)
+const clickGooleLogin = () => {
+  googleSignupRef.value?.login()
+}
 // 处理Google注册
 const handleGoogleSignup = async (credential: string) => {
   try {

src/views/login/components/GoogleLogin.vue

@@ -25,23 +25,23 @@ const emit = defineEmits<{
 }>()
 
 // 处理 Google 登录回调
-const handleCredentialResponse = async (response: { access_token: string }) => {
+const handleCredentialResponse = async (response: { access_token: string, credential: string }) => {
   console.log('Google 登录响应:', response)
-	fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
+//   fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
-		headers: {
+//     headers: {
-			'Authorization': `Bearer ${response.access_token}`
+//       'Authorization': `Bearer ${response.access_token}`
-		}
+//     }
-	})
+//   })
-	.then(response => response.json())
+//   .then(response => response.json())
-	.then(userInfo => {
+//   .then(userInfo => {
-		console.log('User info:', userInfo);
+//     console.log('User info:', userInfo);
-	})
+//   })
-	.catch(error => {
+//   .catch(error => {
-		console.error('Error fetching user info:', error);
+//     console.error('Error fetching user info:', error);
-	});
+//   });
-//   const code = response.credential
+  const code = response.access_token
-//   emit('googelLogin', code)
+  emit('googelLogin', code)
-//   window.isAddGmail = false
+  window.isAddGmail = false
 }
 
 // 配置数据