aidlab/lanecarford_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
zhangyahui
2025-11-05 11:59:34 +08:00
parent 618e82bc95
commit cdc5e5406b
1 changed files with 150 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
src/views/login/components/GoogleLogin.vue
View File

@@ -1,110 +1,126 @@
<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 class="icon" @click="toGmailLogin"> -->
<div class="icon">
<img src="@/assets/images/loginPage/gmailIcon.svg" alt="" />
<span>{{ $props.text }}</span>
</div>
</div>
</template>
<script setup lang="ts">
import { reactive, onMounted, onBeforeUnmount } from 'vue'
import { google } from '@/assets/base64'
<script>
import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, toRefs } from 'vue'
// 定义 props
defineProps({
text: {
type: String,
default: 'Sign in with Google'
}
})
// 定义 emits
const emit = defineEmits<{
(e: 'googelLogin', code: string): void
}>()
// 处理 Google 登录回调
const handleCredentialResponse = async (response: { credential: string }) => {
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
})
// 根据环境设置 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
})
export default defineComponent({
name: 'login',
emits: ['googelLogin'],
props: {
text: {
type: String,
default: 'Sign in with Google'
}
// 初始化Google登录，禁用One Tap自动提示
const initConfig: Parameters<typeof window.google.accounts.id.initialize>[0] = {
client_id: GOOGLE_CLIENT_ID,
auto_select: false, // 禁用自动选择，避免显示One Tap提示
callback: handleCredentialResponse,
context: 'signin', // 设置为signin模式，避免显示个性化One Tap提示
ux_mode: 'popup',
itp_support: true,
cancel_on_tap_outside: true // 点击外部时取消One Tap提示
},
setup(props, { emit }) {
function decodeJWT(token) {
let base64Url = token.split('.')[1]
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
let jsonPayload = decodeURIComponent(
atob(base64)
.split('')
.map(function (c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
})
.join('')
)
return JSON.parse(jsonPayload)
}
window.google.accounts.id.initialize(initConfig as any)
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 handleCredentialResponse = async (response) => {
// 获取回调响应的凭证数据 然后拿这个凭证给后台，后台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)
let code = response.credential
emit('googelLogin', code)
window.isAddGmail = false
}
let 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)
let GOOGLE_CLIENT_ID =
'216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com'
// if(import.meta.env.VITE_USER_NODE_ENV == 'development'){
// GOOGLE_CLIENT_ID = '157095842121-kdd1fdf8m8nudvj9sprstb2k2prnf9e4.apps.googleusercontent.com'
// }else{
// GOOGLE_CLIENT_ID = '29310152396-nnsd3h533fld665oguu8ovrt1nukmt46.apps.googleusercontent.com'
// }
// 使用谷歌登录的api
const createGmailLogin = async () => {
var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
if (!window.isAddGmail) {
if (!existingScript) {
window.isAddGmail = true
await new Promise((resolve, reject) => {
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'
})
}
}
onBeforeUnmount(() => {
var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
if (existingScript) {
existingScript.remove()
window.isAddGmail = false
}
})
onMounted(() => {
createGmailLogin()
})
return {}
}
}
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;
position: relative;
border-radius: 4rem;
overflow: hidden;
background: transparent;
@media (max-width: 768px) {
border-radius: 2.5rem;
}
:deep(.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb) {
justify-content: center;
.nsm7Bb-HzV7m-LgbsSe-Bz112c {
@@ -113,10 +129,15 @@ onMounted(() => {
}
:deep(.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK) {
width: 100%;
height: 10.6rem;
}
// :deep(.S9gUrf-YoZ4jf){
// *{
// width: 100%;
// height: 100%;
// }
// }
.icon {
// width: 40px;
width: auto;
display: flex;
align-items: center;
@@ -128,31 +149,53 @@ onMounted(() => {
position: relative;
background: transparent;
pointer-events: none;
column-gap: 3.1rem;
background-color: #f9fafa;
@media (max-width: 768px) {
border-radius: 2.5rem;
padding: 0.32rem 1.7rem;
}
&:hover {
background: #f8faff;
}
img {
width: 3.8rem;
height: 3.8rem;
@media (max-width: 768px) {
width: 2.7rem;
height: 2.7rem;
}
}
span {
font-size: 1.4rem;
margin-left: 1.4rem;
@media (max-width: 768px) {
font-size: 1.2rem;
margin-left: 1rem;
}
}
}
.g_id_signin {
position: absolute;
width: 100%;
height: 100%;
// overflow: hidden;
top: 0;
left: 0;
// opacity: 0;
.S9gUrf-YoZ4jf {
}
:deep(.S9gUrf-YoZ4jf) {
&,
& > div {
width: 100%;
height: 100%;
}
width: 100%;
height: 100%;
iframe {
zoom: 3;
}
}
}
}
.google-icon {
width: 4.8rem;
height: 4.8rem;
&:hover {
.icon {
background: #f8faff;
}
}
}
</style>