谷歌登录

src/views/login/LoginPage.vue

@@ -32,7 +32,7 @@
             <img :src="google" class="google-icon" />
             Sign in with Google
           </div> -->
-          <GoogleLogin @googelLogin="handleGoogleLogin"></GoogleLogin>
+          <GoogleLogin @googelLogin="handleGoogleLogin" ref="googleLoginRef" @click="clickGooleLogin"></GoogleLogin>
           <div class="sign-up-button" @click="handleSignup">Don’t have an account? Sign Up</div>
         </div>
       </div>
@@ -128,7 +128,10 @@ const handleForgotPassword = () => {
   // 这里可以跳转到忘记密码页面
   router.push('/reset')
 }
-
+const googleLoginRef = ref(null)
+const clickGooleLogin = () => {
+  googleLoginRef.value?.login()
+}
 // 处理Google登录
 const handleGoogleLogin = async (credential: string) => {
   try {

src/views/login/components/GoogleLogin.vue

@@ -25,17 +25,31 @@ const emit = defineEmits<{
 }>()
 
 // 处理 Google 登录回调
-const handleCredentialResponse = async (response: { credential: string }) => {
+const handleCredentialResponse = async (response: { access_token: string }) => {
-  const code = response.credential
+  console.log('Google 登录响应:', response)
-  emit('googelLogin', code)
+	fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
-  window.isAddGmail = false
+		headers: {
+			'Authorization': `Bearer ${response.access_token}`
+		}
+	})
+	.then(response => response.json())
+	.then(userInfo => {
+		console.log('User info:', userInfo);
+	})
+	.catch(error => {
+		console.error('Error fetching user info:', error);
+	});
+//   const code = response.credential
+//   emit('googelLogin', code)
+//   window.isAddGmail = false
 }
 
 // 配置数据
 const data = reactive({
   // scriptSrc:'https://apis.google.com/js/platform.js',
   scriptSrc: 'https://accounts.google.com/gsi/client',
-  script: null
+  script: null,
+  tokenClient: null,
 })
 
 // 根据环境设置 Google Client ID
@@ -56,26 +70,41 @@ const createGmailLogin = async () => {
         script.src = data.scriptSrc
       })
     }
-    window.google.accounts.id.initialize({
+    // window.google.accounts.id.initialize({
-      // 主要就是填写client_id
+    //   // 主要就是填写client_id
-      client_id: GOOGLE_CLIENT_ID,
+    //   client_id: GOOGLE_CLIENT_ID,
-      auto_select: false,
+    //   auto_select: false,
+    //   callback: handleCredentialResponse,
+    //   // context:"signin",
+    //   ux_mode: 'popup',
+    //   itp_support: true
+    // })
+    // console.log('创建谷歌登录按钮:', document.querySelector('.Container #g_id_signin'))
+    // window.google.accounts.id.renderButton(document.querySelector('.Container #g_id_signin'), {
+    //   type: 'standard', //icon为只有一个icon
+    //   shape: 'circle',
+    //   theme: 'outline',
+    //   size: 'large',
+    //   logo_alignment: 'center'
+    // })
+
+	data.tokenClient = window.google.accounts.oauth2.initTokenClient({
+	  client_id: GOOGLE_CLIENT_ID,
+      scope: "https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email",
       callback: handleCredentialResponse,
-      // context:"signin",
+	})
-      ux_mode: 'popup',
-      itp_support: true
-    })
-    console.log('创建谷歌登录按钮:', document.querySelector('.Container #g_id_signin'))
-    window.google.accounts.id.renderButton(document.querySelector('.Container #g_id_signin'), {
-      type: 'standard', //icon为只有一个icon
-      shape: 'circle',
-      theme: 'outline',
-      size: 'large',
-      logo_alignment: 'center'
-    })
   }
 }
 
+const login = ()=>{
+  if(!data.tokenClient) {
+    console.warn('谷歌登录未初始化')
+    return
+  }
+  data.tokenClient.requestAccessToken()
+  return true;
+}
+
 onBeforeUnmount(() => {
   const existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
   if (existingScript) {
@@ -87,6 +116,10 @@ onBeforeUnmount(() => {
 onMounted(() => {
   createGmailLogin()
 })
+
+defineExpose({
+  login
+})
 </script>
 <style scoped lang="less">
 .Container {