fashion-ssr-vue3/components/common/googleLogin/index.vue

<script setup>
const emit = defineEmits(['success', 'error'])
const loading = ref(false)
const clientID = '482169597782-nic3d8bo67o0gmq93cmgao7050ets16n.apps.googleusercontent.com'
onMounted(() => {
  const script = document.createElement('script')
  script.src = 'https://accounts.google.com/gsi/client'
  script.async = true
  script.defer = true
  document.head.appendChild(script)
})

/**
 * 初始化 Google Auth
 */
function initializeGoogleAuth(resolve, reject) {
  return window.google.accounts.oauth2.initTokenClient({
    client_id: clientID,
    scope: 'email profile',
    callback: async (response) => {
      try {
        // 获取用户基本信息
        const userInfo = await fetchUserInfo(response.access_token)
        const res = {
          token: response.access_token,
          userInfo,
        }
        resolve(res)
      }
      catch (error) {
        reject(error)
      }
    },
    error_callback: (error) => {
      reject(error)
    },
  })
}

/**
 * 获取用户详细信息
 */
async function fetchUserInfo(accessToken) {
  const res = await fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  })
  if (!res.ok)
    throw new Error('获取用户信息失败')
  return await res.json()
}

// 触发登录
function handleGoogleLogin() {
  return new Promise((resolve, reject) => {
    if (!window.google) {
      const t = setTimeout(() => {
        clearTimeout(t)
        ElMessage.error('当前环境不支持 Google 登录，请使用其他方式登录')
        reject(new Error('Google SDK not loaded'))
      }, 1000)
      return
    }
    const client = initializeGoogleAuth(resolve, reject)
    client.requestAccessToken()
  })
}

async function onGoogleLogin() {
  try {
    loading.value = true
    const result = await handleGoogleLogin()
    loading.value = false
    console.log('result------登陆成功', result)
    emit('success', result)
  }
  catch (error) {
    loading.value = false
    emit('error', error)
  }
}
</script>

<template>
  <button id="google-login-button" class="b-rd-200px w-100% bg-#fff text-#333 b-1px b-solid b-#D8D8D8 h-48px lh-48px hover:b-#9B6CFF disabled:hover:b-#D8D8D8 cursor-pointer mb-24px text-14px fw-500" :disabled="loading" @click="onGoogleLogin">
    <span v-if="loading">登录中...</span>
    <div v-else class="flex justify-center items-center">
      <img src="@/assets/images/google_logo.png" alt="" class="w-24px h-24px mr-10px">
      Continue with Google
    </div>
  </button>
</template>

<style scoped>
</style>