Vue实现Google登录
Vue实现谷歌登录
·
Vue实现Google登录,并自动渲染Google按钮
我使用的使用JavaScript方式,哪里需要登录按钮写哪里
Index.vue文件如下
<template>
<div class="Container">
<!-- 谷歌登录 -->
<div class="g_id_signin" id="g_id_signin"></div>
</div>
</template>
<script>
import { GOOGLE_CLIENT_ID } from '@/util/ConstantData'
import * as api from '@/api/login'
export default {
name: "login",
data() {
return {
// 这个是Gooogle客户端的cilent_Id:*****.com
GOOGLE_CLIENT_ID: GOOGLE_CLIENT_ID
}
},
created() {
// 使用谷歌登录的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: this.handleCredentialResponse,
});
// 设置按钮的样式等
window.google.accounts.id.renderButton(
document.getElementById("g_id_signin"),
{
theme: "filled_blue",
size: 'large',
// width:'320',
type: 'standard',
text: 'signin_with'
}
);
})
},
methods: {
async handleCredentialResponse(response) {
// 获取回调响应的凭证数据 然后拿这个凭证给后台,后台jwt进行解析获取登录信息
let code = response.credential
await api.googleLogin(code);
},
}
}
</script>
<style scoped>
</style>
效果如下
这个是api文档
https://developers.google.cn/identity/gsi/web/reference/js-reference?hl=en
更多推荐
已为社区贡献3条内容
所有评论(0)