62 lines
1.7 KiB
Vue
62 lines
1.7 KiB
Vue
|
<template>
|
|||
|
|
<div class="Container">
|
|||
|
|
<!-- 谷歌登录 -->
|
|||
|
|
<div class="g_id_signin" id="g_id_signin"></div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
name: "login",
|
|||
|
|
setup() {
|
|||
|
|
const handleCredentialResponse = async (response) => {
|
|||
|
|
// 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
|
|||
|
|
console.log(response);
|
|||
|
|
let code = response.credential
|
|||
|
|
console.log(code);
|
|||
|
|
// await api.googleLogin(code);
|
|||
|
|
}
|
|||
|
|
onMounted(()=>{
|
|||
|
|
let GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
|
|||
|
|
// let GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
|
|||
|
|
|
|||
|
|
// 使用谷歌登录的api
|
|||
|
|
const script = document.createElement("script");
|
|||
|
|
script.src = "https://accounts.google.com/gsi/client"
|
|||
|
|
document.body.appendChild(script);
|
|||
|
|
|
|||
|
|
window.addEventListener('load', () => {
|
|||
|
|
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:"standard",
|
|||
|
|
shape:"pill",
|
|||
|
|
theme:"outline",
|
|||
|
|
text:"signin_with",
|
|||
|
|
size:"medium",
|
|||
|
|
logo_alignment:"left",
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
return {
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
<style scoped>
|
|||
|
|
.Container{
|
|||
|
|
width: 45%;
|
|||
|
|
}
|
|||
|
|
</style>
|