aida_front/src/component/LoginPage/googleLogin.vue

<template>
    <div class="Container">
        <!-- 谷歌登录 -->
        <div class="g_id_signin" id="g_id_signin">
			<img src="@/assets/images/loginPage/gmailIcon.svg" alt="">
		</div>
    </div>
</template>
<script>
	import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, toRefs } from "vue";

    export default defineComponent({
        name: "login",
		emits: ['googelLogin'],
		setup(props, { emit }) {
			const  handleCredentialResponse = async (response) => {
                // 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
                let code = response.credential
				emit('googelLogin',code)
            }
			let data = reactive({
				// scriptSrc:'https://apis.google.com/js/platform.js',
				scriptSrc:'https://accounts.google.com/gsi/client',
				script:null
			})
			let  GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
			// let  GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
			// 使用谷歌登录的api
			const createGmailLogin = async ()=>{
				var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
				if(!existingScript){
					await new Promise((resolve, reject) => {
						const script = document.createElement("script");
						script.src = data.scriptSrc
						script.onload=()=>{
							resolve()
						}
						document.body.appendChild(script);
					})
				}
				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,
				});
				window.google.accounts.id.renderButton(
					document.getElementById("g_id_signin"),
					{
						type:"icon",//icon为只有一个icon
						shape:"circle",
						theme:"outline",
						size:"large",
						logo_alignment:"center",
					});
			}
			onBeforeUnmount(()=>{
				var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
				if(existingScript)existingScript.remove()
			})
			createGmailLogin()
			return {
            }
		},
    })
</script>
<style scoped lang="less">
.Container{
	:deep(.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb ){
		justify-content: center;
		.nsm7Bb-HzV7m-LgbsSe-Bz112c{
			padding: 0;
		}
	}
	.g_id_signin{
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #dadce0;
		border-radius: 50%;
		cursor: pointer;
		&:hover{
			background: #f8faff;
		}
		img{
			width: 18px;
			height: 18px;
		}
	}
}
</style>