diff --git a/src/views/login/LoginPage.vue b/src/views/login/LoginPage.vue
index c7c9060..18afae5 100644
--- a/src/views/login/LoginPage.vue
+++ b/src/views/login/LoginPage.vue
@@ -32,7 +32,7 @@
Sign in with Google
-->
-
+
Don’t have an account? Sign Up
@@ -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 {
diff --git a/src/views/login/components/GoogleLogin.vue b/src/views/login/components/GoogleLogin.vue
index 957e21d..01fc123 100644
--- a/src/views/login/components/GoogleLogin.vue
+++ b/src/views/login/components/GoogleLogin.vue
@@ -25,17 +25,31 @@ const emit = defineEmits<{
}>()
// 处理 Google 登录回调
-const handleCredentialResponse = async (response: { credential: string }) => {
- const code = response.credential
- emit('googelLogin', code)
- window.isAddGmail = false
+const handleCredentialResponse = async (response: { access_token: string }) => {
+ console.log('Google 登录响应:', response)
+ fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
+ 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({
- // 主要就是填写client_id
- client_id: GOOGLE_CLIENT_ID,
- auto_select: false,
+ // 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'
+ // })
+
+ 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
+})