173 lines
3.9 KiB
Vue
173 lines
3.9 KiB
Vue
<template>
|
||
<div class="Container">
|
||
<!-- 谷歌登录 -->
|
||
<div class="g_id_signin" id="g_id_signin">
|
||
</div>
|
||
<div class="icon">
|
||
<img src="@/assets/images/loginPage/gmailIcon.svg" alt="">
|
||
<span>{{ $props.text }}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, toRefs } from "vue";
|
||
|
||
export default defineComponent({
|
||
name: "login",
|
||
emits: ['googelLogin'],
|
||
props: {
|
||
text: {
|
||
type: String,
|
||
default: 'Sign in with Google'
|
||
}
|
||
},
|
||
setup(props, { emit }) {
|
||
const handleCredentialResponse = async (response) => {
|
||
// 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
|
||
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
|
||
})
|
||
let GOOGLE_CLIENT_ID = '29310152396-nnsd3h533fld665oguu8ovrt1nukmt46.apps.googleusercontent.com'
|
||
// let GOOGLE_CLIENT_ID = '29310152396-c44dcsoksjirhn7vbo29p8u8n0sg4qps.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.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.querySelector('.Container #g_id_signin'),
|
||
{
|
||
type:"standard",//icon为只有一个icon
|
||
shape:"circle",
|
||
theme:"outline",
|
||
size:"large",
|
||
logo_alignment:"center",
|
||
});
|
||
}
|
||
}
|
||
onBeforeUnmount(()=>{
|
||
var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
|
||
if(existingScript){
|
||
existingScript.remove()
|
||
window.isAddGmail = false
|
||
}
|
||
})
|
||
onMounted(()=>{
|
||
createGmailLogin()
|
||
})
|
||
return {
|
||
}
|
||
},
|
||
})
|
||
</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: #f5f5f5;
|
||
@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%;
|
||
}
|
||
}
|
||
&:hover{
|
||
.icon{
|
||
background: #f8faff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|