打开谷歌登录

src/component/Account/frontPage/bindPage.vue

@@ -27,10 +27,10 @@
 						<div v-show="!userDetail.accountExtendList?.Google" id="g_id_bind"></div>
 						<div v-if="userDetail.accountExtendList?.Google" class="gallery_btn" @click="ungroupGoogleModel">{{ $t('frontPage.Unbind') }}</div>
 					</div> -->
-					<div class="gmail_btn" @click="toGmailLogin">
+					<div class="gmail_btn">
-						<div v-if="!userDetail.accountExtendList?.Google" class="gallery_btn forbidden">{{ $t('frontPage.BindNow') }}</div>
+						<div v-if="!userDetail.accountExtendList?.Google" class="gallery_btn">{{ $t('frontPage.BindNow') }}</div>
-						<!-- <div v-show="!userDetail.accountExtendList?.Google" id="g_id_bind"></div> -->
+						<div v-show="!userDetail.accountExtendList?.Google" id="g_id_bind"></div>
-						<div v-if="userDetail.accountExtendList?.Google" class="gallery_btn forbidden" @click="ungroupGoogleModel">{{ $t('frontPage.Unbind') }}</div>
+						<div v-if="userDetail.accountExtendList?.Google" class="gallery_btn" @click="ungroupGoogleModel">{{ $t('frontPage.Unbind') }}</div>
 						<!-- <div v-if="userDetail.accountExtendList?.Google" class="gallery_btn" @click="ungroupGoogleModel">{{ $t('frontPage.Unbind') }}</div> -->
 					</div>
 				</div>
@@ -138,12 +138,13 @@ export default defineComponent({
 			bindPageDom.bindEmail.init('Modify')
 
 		}
-		const toGmailLogin = ()=>{
-			message.info(t('account.canNotUtilize'))
-		}
 		onMounted(async ()=>{
-			return
+			let  GOOGLE_CLIENT_ID
-			let  GOOGLE_CLIENT_ID = '29310152396-nnsd3h533fld665oguu8ovrt1nukmt46.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'
+			}
 			var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
 			if(!window.isAddGmail){
 				if(!existingScript){
@@ -206,7 +207,6 @@ export default defineComponent({
 		   ungroupGoogleModel,
 		   ungroupWeiXinModel,
 		   modifyEmail,
-		   toGmailLogin,
         }
     },
     data(){
@@ -271,14 +271,21 @@ export default defineComponent({
 				}
 				>.gmail_btn{
 					position: relative;
+					border-radius: 4rem;
+					overflow: hidden;
+					> .gallery_btn{
+						position: relative;
+						z-index: 2;
+						pointer-events: none;
+					}
 					#g_id_bind{
 						position: absolute;
 						left: 0;
 						top: 0;
 						width: 100%;
 						height: 100%;
-						opacity: 0;
+						// opacity: 0;
-						z-index: 2;
+						z-index: 1;
 						:deep(.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe){
 							width: 100%;
 						}

src/component/LoginPage/googleLogin.vue

@@ -1,9 +1,10 @@
 <template>
     <div class="Container">
         <!-- 谷歌登录 -->
-        <!-- <div class="g_id_signin" id="g_id_signin">
+        <div class="g_id_signin" id="g_id_signin">
-		</div> -->
+		</div>
-		<div class="icon" @click="toGmailLogin" style="opacity: .7;">
+		<!-- <div class="icon" @click="toGmailLogin"> -->
+		<div class="icon">
 			<img src="@/assets/images/loginPage/gmailIcon.svg" alt="">
 			<span>{{ $props.text }}</span>
 		 </div>
@@ -25,8 +26,33 @@
 		},
 		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
@@ -36,10 +62,10 @@
 				scriptSrc:'https://accounts.google.com/gsi/client',
 				script:null
 			})
-			console.log()
+			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 = '29310152396-c44dcsoksjirhn7vbo29p8u8n0sg4qps.apps.googleusercontent.com'
+				GOOGLE_CLIENT_ID = '157095842121-kdd1fdf8m8nudvj9sprstb2k2prnf9e4.apps.googleusercontent.com'
 			}else{
 				GOOGLE_CLIENT_ID = '29310152396-nnsd3h533fld665oguu8ovrt1nukmt46.apps.googleusercontent.com'
 			}
@@ -51,11 +77,11 @@
 						window.isAddGmail = true
 						await new Promise((resolve, reject) => {
 							const script = document.createElement("script");
-							script.src = data.scriptSrc
 							script.onload=()=>{
 								resolve()
 							}
 							document.body.appendChild(script);
+							script.src = data.scriptSrc
 						})
 					}
 					window.google.accounts.id.initialize({
@@ -67,19 +93,19 @@
 						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'),
+					document.querySelector('.Container #g_id_signin'),
-						{
+					{
-							type:"standard",//icon为只有一个icon
+						type:"standard",//icon为只有一个icon
-							shape:"circle",
+						shape:"circle",
-							theme:"outline",
+						theme:"outline",
-							size:"large",
+						size:"large",
-							logo_alignment:"center",
+						logo_alignment:"center",
-						});
+					});
 				}
 			}
 			const toGmailLogin = ()=>{
-				console.log(12312)
 				message.info(t('account.canNotUtilize'))
 			}
 			onBeforeUnmount(()=>{
@@ -90,7 +116,7 @@
 				}
 			})
 			onMounted(()=>{
-				// createGmailLogin()
+				createGmailLogin()
 			})
 			return {
 				toGmailLogin,
@@ -121,7 +147,6 @@
 	// 		width: 100%;
 	// 		height: 100%;
 	// 	}
-		
 	// }
 	.icon{
 		// width: 40px;
@@ -135,7 +160,7 @@
 		box-sizing: border-box;
 		position: relative;
 		background: transparent;
-		// pointer-events: none;
+		pointer-events: none;
 		background-color: #f5f5f5;
 		@media (max-width: 768px) {
 			border-radius: 2.5rem;
@@ -165,15 +190,20 @@
 		position: absolute;
 		width: 100%;
 		height: 100%;
-		overflow: hidden;
+		// overflow: hidden;
 		top: 0;
 		left: 0;
-		opacity: 0;
+		// opacity: 0;
 		.S9gUrf-YoZ4jf{
+			
+			
 		}
 		:deep(.S9gUrf-YoZ4jf){
 			width: 100%;
 			height: 100%;
+			iframe{
+				zoom: 3;
+			}
 		}
 	}
 	&:hover{