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

打开谷歌登录

Browse Source
This commit is contained in:
X1627315083
2025-09-23 16:20:21 +08:00
parent b8e406cea4
commit d61bb741d0
2 changed files with 69 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/component/Account/frontPage/bindPage.vue
View File

@@ -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 v-if="!userDetail.accountExtendList?.Google" class="gallery_btn forbidden">{{ $t('frontPage.BindNow') }}</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 class="gmail_btn">
<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-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 = '29310152396-nnsd3h533fld665oguu8ovrt1nukmt46.apps.googleusercontent.com'
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'
}
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;
z-index: 2;
// opacity: 0;
z-index: 1;
:deep(.nsm7Bb-HzV7m-LgbsSe.Bz112c-LgbsSe){
width: 100%;
}

70
src/component/LoginPage/googleLogin.vue
View File

@@ -1,9 +1,10 @@
<template>
<div class="Container">
<!-- 谷歌登录 -->
<!-- <div class="g_id_signin" id="g_id_signin">
</div> -->
<div class="icon" @click="toGmailLogin" style="opacity: .7;">
<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>{{ $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'),
{
type:"standard",//icon为只有一个icon
shape:"circle",
theme:"outline",
size:"large",
logo_alignment:"center",
});
document.querySelector('.Container #g_id_signin'),
{
type:"standard",//icon为只有一个icon
shape:"circle",
theme:"outline",
size:"large",
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{