feat: 谷歌登录注册

2025-11-04 16:47:17 +08:00
parent 3a0c7eb832
commit b9c2130ccb
6 changed files with 255 additions and 61 deletions
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,4 @@
 # VITE_APP_URL = http://192.168.31.82:8771
 # VITE_APP_URL = http://18.167.251.121:10095
-VITE_APP_URL = https://www.lc-api.aida.com.hk
+VITE_APP_URL = https://www.lc-api.aida.com.hk
+VITE_GOOGLE_CLIENT_ID = 216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com
--- a/.env.production
+++ b/.env.production
@@ -1 +1,3 @@
-VITE_APP_URL = https://www.lc-api.aida.com.hk
+VITE_APP_URL = https://www.lc-api.aida.com.hk
+# VITE_APP_URL = http://18.167.251.121:10095
+VITE_GOOGLE_CLIENT_ID = 29310152396-nnsd3h533fld665oguu8ovrt1nukmt46.apps.googleusercontent.com
--- a/src/api/login.ts
+++ b/src/api/login.ts
@@ -47,3 +47,15 @@ export const LogOut = (): Promise<ApiResponse> => {
    method: 'get'
  })
 }
+
+// Google登录/注册参数类型
+interface GoogleAuthParamsType {
+  credential?: string // Google ID Token (用于One Tap登录)
+}
+export const googleAuth = (data: GoogleAuthParamsType): Promise<LoginResponse> => {
+  return request({
+    url: '/api/auth/parseGoogleCredential',
+    method: 'get',
+    params: data
+  })
+}
--- a/src/views/login/LoginPage.vue
+++ b/src/views/login/LoginPage.vue
@@ -28,10 +28,11 @@
          <div class="login-button" @click="handleLogin">Log in</div>
          <div class="forgot-password" @click="handleForgotPassword">Forgot password?</div>

-          <div type="button" class="google-button" @click="handleGoogleLogin">
+          <!-- <div type="button" class="google-button" @click="handleGoogleLogin">
            <img :src="google" class="google-icon" />
            Sign in with Google
-          </div>
+          </div> -->
+          <GoogleLogin @googelLogin="handleGoogleLogin"></GoogleLogin>
          <div class="sign-up-button" @click="handleSignup">Don’t have an account? Sign Up</div>
        </div>
      </div>
@@ -48,9 +49,9 @@ import { ref, reactive, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserInfoStore } from '@/stores'
 import { showToast } from 'vant'
-import { google } from '@/assets/base64'
-import { fetchRegisterOrLogin } from '@/api/login'
+import { fetchRegisterOrLogin, googleAuth } from '@/api/login'
 import { encryptPassword } from '@/utils/tools'
+import GoogleLogin from './components/GoogleLogin.vue'

 const router = useRouter()
 const userInfoStore = useUserInfoStore()
@@ -111,13 +112,15 @@ const handleLogin = async () => {
  isLoading.value = true

  const encryptedPassword = encryptPassword(formData.password)
-  fetchRegisterOrLogin({ ...formData, password: encryptedPassword, operationType: 'LOGIN' }).then((response) => {
-    console.log('登录成功', response)
-    userInfoStore.setToken(response.token)
-    userInfoStore.setUserInfo(response.user)
-    showToast('login success')
-    router.replace('/stylist/customer')
-  })
+  fetchRegisterOrLogin({ ...formData, password: encryptedPassword, operationType: 'LOGIN' }).then(
+    (response) => {
+      console.log('登录成功', response)
+      userInfoStore.setToken(response.token)
+      userInfoStore.setUserInfo(response.user)
+      showToast('login success')
+      router.replace('/stylist/customer')
+    }
+  )
 }

 // 处理忘记密码
@@ -127,13 +130,15 @@ const handleForgotPassword = () => {
 }

 // 处理Google登录
-const handleGoogleLogin = async () => {
+const handleGoogleLogin = async (credential: string) => {
  try {
    isLoading.value = true
-    showToast('Google login is not available yet')
-
-    // 这里添加Google OAuth登录逻辑
-    // const response = await googleLoginAPI()
+    const result = await googleAuth({ credential })
+    // console.log('result', result)
+    userInfoStore.setToken(result.token)
+    userInfoStore.setUserInfo(result.user)
+    showToast('Google login successful')
+    router.replace('/stylist/customer')
  } catch (error) {
    console.error('Google登录失败:', error)
    showToast('Google login failed, please try again')
@@ -234,12 +239,12 @@ const handleSignup = () => {
    -moz-backdrop-filter: blur(35px);
    -ms-backdrop-filter: blur(35px);
    -o-backdrop-filter: blur(35px);
-    border: .2rem solid rgba(255, 255, 255, 0.15);
+    border: 0.2rem solid rgba(255, 255, 255, 0.15);
    border-radius: 4.79rem;
    padding: 11.2rem 8.62rem 14.28rem 7.18rem;
    box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
-    border: .2rem solid #fff;
+    border: 0.2rem solid #fff;
    font-size: 3.83rem;
  }

@@ -247,7 +252,7 @@ const handleSignup = () => {
    width: 100%;
    height: 10rem;
    padding: 1.6rem 2rem;
-    border: .2rem solid #fff;
+    border: 0.2rem solid #fff;
    background: transparent;
    border-radius: 7.1rem;
    color: white;
@@ -293,7 +298,7 @@ const handleSignup = () => {
 .google-button {
  width: 100%;
  padding: 1.6rem;
-  border: .2rem solid #fff;
+  border: 0.2rem solid #fff;
  border-radius: 7rem;
  font-size: 3.83rem;
  cursor: pointer;
@@ -303,6 +308,12 @@ const handleSignup = () => {
  column-gap: 3.1rem;
  margin-bottom: 1.67rem;
 }
+
+.google-icon {
+  width: 4.8rem;
+  height: 4.8rem;
+}
+
 .sign-up-button {
  font-family: 'satoshiRegular';
  font-size: 2.39rem;
@@ -310,11 +321,6 @@ const handleSignup = () => {
  text-align: center;
 }

-.google-icon {
-  width: 4.8rem;
-  height: 4.8rem;
-}
-
 .footer {
  position: relative;
  text-align: center;
--- a/src/views/login/SignupPage.vue
+++ b/src/views/login/SignupPage.vue
@@ -30,10 +30,7 @@

          <button type="button" class="login-button" @click="handleConfirm">Sign Up</button>

-          <div type="button" class="google-button" @click="handleSignupByGoogle">
-            <img :src="google" class="google-icon" />
-            Sign up with Google
-          </div>
+          <GoogleLogin text="Sign up with Google" @googelLogin="handleGoogleSignup" />
        </div>
      </div>
    </div>
@@ -48,11 +45,13 @@
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast } from 'vant'
-import { google } from '@/assets/base64'
-import { fetchRegisterOrLogin } from '@/api/login'
+import { fetchRegisterOrLogin, googleAuth } from '@/api/login'
 import { encryptPassword } from '@/utils/tools'
+import { useUserInfoStore } from '@/stores'
+import GoogleLogin from './components/GoogleLogin.vue'

 const router = useRouter()
+const userInfoStore = useUserInfoStore()

 // 表单数据
 const formData = reactive({
@@ -120,10 +119,11 @@ const handleConfirm = async () => {
  fetchRegisterOrLogin({ ...formData, password: encryptedPassword, operationType: 'REGISTER' })
    .then((res) => {
      console.log('res', res)
-      showToast('register success')
+      showToast('Register successful')
      router.push('/login')
    })
    .catch((err) => {
+      console.log('err', err)
      showToast(err.message)
    })
    .finally(() => {
@@ -131,16 +131,17 @@ const handleConfirm = async () => {
    })
 }

-// 处理Google登录
-const handleSignupByGoogle = async () => {
+// 处理Google注册
+const handleGoogleSignup = async (credential: string) => {
  try {
    isLoading.value = true
-    showToast('Google sign up is not available yet')
-
-    // 这里添加Google OAuth登录逻辑
-    // const response = await googleLoginAPI()
+    const result = await googleAuth({ credential })
+    userInfoStore.setToken(result.token)
+    userInfoStore.setUserInfo(result.user)
+    showToast('Google sign up successful')
+    router.replace('/stylist/customer')
  } catch (error) {
-    console.error('Google登录失败:', error)
+    console.error('Google注册失败:', error)
    showToast(error?.message || 'Google sign up failed, please try again')
  } finally {
    isLoading.value = false
@@ -232,12 +233,12 @@ const handleSignupByGoogle = async () => {
    -moz-backdrop-filter: blur(35px);
    -ms-backdrop-filter: blur(35px);
    -o-backdrop-filter: blur(35px);
-    border: .2rem solid rgba(255, 255, 255, 0.15);
+    border: 0.2rem solid rgba(255, 255, 255, 0.15);
    border-radius: 4.79rem;
    padding: 11.2rem 8.62rem 14.28rem 7.18rem;
    box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
-    border: .2rem solid #fff;
+    border: 0.2rem solid #fff;
    font-size: 3.83rem;
  }

@@ -245,7 +246,7 @@ const handleSignupByGoogle = async () => {
    width: 100%;
    height: 10rem;
    padding: 1.6rem 2rem;
-    border: .2rem solid #fff;
+    border: 0.2rem solid #fff;
    background: transparent;
    border-radius: 7.1rem;
    color: white;
@@ -277,23 +278,6 @@ const handleSignupByGoogle = async () => {
  }
 }

-.google-button {
-  width: 100%;
-  padding: 1.6rem;
-  border: .2rem solid #fff;
-  border-radius: 7rem;
-  font-size: 3.83rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  column-gap: 3.1rem;
-}
-
-.google-icon {
-  width: 4.8rem;
-  height: 4.8rem;
-}

 .footer {
  position: relative;
--- a/src/views/login/components/GoogleLogin.vue
+++ b/src/views/login/components/GoogleLogin.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="Container">
+    <div class="g_id_signin" id="g_id_signin"></div>
+    <div class="icon">
+      <img :src="google" class="google-icon" />
+      <span>{{ text }}</span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, onMounted, onBeforeUnmount } from 'vue'
+import { showToast } from 'vant'
+import { google } from '@/assets/base64'
+
+// 定义 props
+defineProps({
+  text: {
+    type: String,
+    default: 'Sign in with Google'
+  }
+})
+
+// 定义 emits
+const emit = defineEmits<{
+  (e: 'googelLogin', code: string): void
+}>()
+
+// JWT 解码函数
+function decodeJWT(token: string) {
+  const base64Url = token.split('.')[1]
+  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
+  const jsonPayload = decodeURIComponent(
+    atob(base64)
+      .split('')
+      .map(function (c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+      })
+      .join('')
+  )
+  return JSON.parse(jsonPayload)
+}
+
+// 处理 Google 登录回调
+const handleCredentialResponse = async (response: { credential: string }) => {
+  // 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
+  console.log('Encoded JWT ID token: ' + response.credential)
+  const responsePayload = decodeJWT(response.credential)
+  console.log('Decoded JWT ID token fields:')
+  console.log('  Full Name: ' + responsePayload.name)
+  console.log('  Given Name: ' + responsePayload.given_name)
+  console.log('  Family Name: ' + responsePayload.family_name)
+  console.log('  Unique ID: ' + responsePayload.sub)
+  console.log('  Profile image URL: ' + responsePayload.picture)
+  console.log('  Email: ' + responsePayload.email)
+
+  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
+})
+
+console.log(import.meta.env.VITE_USER_NODE_ENV)
+
+// 根据环境设置 Google Client ID
+const GOOGLE_CLIENT_ID = '216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com'
+
+// 创建 Gmail 登录
+const createGmailLogin = async () => {
+  const existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
+  if (!window.isAddGmail) {
+    if (!existingScript) {
+      window.isAddGmail = true
+      await new Promise<void>((resolve) => {
+        const script = document.createElement('script')
+        script.onload = () => {
+          resolve()
+        }
+        document.body.appendChild(script)
+        script.src = data.scriptSrc
+      })
+    }
+    window.google.accounts.id.initialize({
+      // 主要就是填写client_id
+      client_id: GOOGLE_CLIENT_ID,
+      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'
+    })
+  }
+}
+
+const toGmailLogin = () => {
+  showToast('Google login is not available yet')
+}
+
+onBeforeUnmount(() => {
+  const existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
+  if (existingScript) {
+    existingScript.remove()
+    window.isAddGmail = false
+  }
+})
+
+onMounted(() => {
+  createGmailLogin()
+})
+</script>
+<style scoped lang="less">
+.Container {
+  width: 100%;
+  height: 10.6rem;
+  padding: 1.6rem;
+  border: 0.2rem solid #fff;
+  border-radius: 7rem;
+  font-size: 3.83rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 3.1rem;
+  margin-bottom: 1.67rem;
+
+  :deep(.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb) {
+    justify-content: center;
+    .nsm7Bb-HzV7m-LgbsSe-Bz112c {
+      padding: 0;
+    }
+  }
+  :deep(.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK) {
+    width: 100%;
+    height: 10.6rem;
+  }
+
+  .icon {
+    width: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4rem;
+    padding: 1.3rem 4.6rem;
+    cursor: pointer;
+    box-sizing: border-box;
+    position: relative;
+    background: transparent;
+    pointer-events: none;
+    column-gap: 3.1rem;
+  }
+
+  .g_id_signin {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    :deep(.S9gUrf-YoZ4jf) {
+      &,
+      & > div {
+        width: 100%;
+        height: 100%;
+      }
+      iframe {
+        zoom: 3;
+      }
+    }
+  }
+}
+
+.google-icon {
+  width: 4.8rem;
+  height: 4.8rem;
+}
+</style>