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

fix

Browse Source
This commit is contained in:
X1627315083
2024-12-18 17:38:43 +08:00
parent a6ae63e7cd a65477353f
commit 4a65772ca9
90 changed files with 3220 additions and 865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,13 @@
<template>
<div class="Container">
<!-- 谷歌登录 -->
<div class="g_id_signin" id="g_id_signin"></div>
<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, nextTick, toRefs } from "vue";
import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, toRefs } from "vue";
export default defineComponent({
name: "login",
@@ -17,38 +19,49 @@
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
var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
if(!existingScript){
const script = document.createElement("script");
script.src = data.scriptSrc
script.onload=()=>{
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",
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 {
}
},
@@ -62,5 +75,22 @@
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>