aida_front/src/component/LoginPage/googleLogin.vue

<template>
    <div class="Container">
        <!-- 谷歌登录 -->
        <div class="g_id_signin" id="g_id_signin">
		</div>
		<!-- <div class="icon" @click="toGmailLogin"> -->
		<div class="icon">
			<img src="@/assets/images/loginPage/gmailIcon.svg" alt="">
			<span>{{ displayText }}</span>
		 </div>
    </div>
</template>
<script>
	import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, toRefs } from "vue";
	import { Modal,message } from 'ant-design-vue';
	import { useI18n } from 'vue-i18n'

    export default defineComponent({
        name: "login",
		emits: ['googelLogin'],
		props: {
			text: {
				type: String,
				default: ''
			}
		},
		setup(props, { emit }) {
			const {t} = useI18n()
			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);
			}
			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
			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",
					});
				}
			}
			const toGmailLogin = ()=>{
				message.info(t('account.canNotUtilize'))
			}
			const displayText = computed(() => {
				return props.text || t('Login.LoginWithGoogle')
			})
			onBeforeUnmount(()=>{
				var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
				if(existingScript){
					existingScript.remove()
					window.isAddGmail = false
				}
			})
			onMounted(()=>{
				createGmailLogin()
			})
			return {
				toGmailLogin,
				displayText,
            }
		},
    })
</script>
<style scoped lang="less">
.Container{
	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{
			padding: 0;
		}
	}
	:deep(.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK){
		width: 100%;
	}
	// :deep(.S9gUrf-YoZ4jf){
	// 	*{
	// 		width: 100%;
	// 		height: 100%;
	// 	}
	// }
	.icon{
		// width: 40px;
		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;
		background-color: #F9FAFA;
		@media (max-width: 768px) {
			border-radius: 2.5rem;
			padding: .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){
			width: 100%;
			height: 100%;
			iframe{
				zoom: 3;
			}
		}
	}
	&:hover{
		.icon{
			background: #f8faff;
		}
	}
}
</style>