原生html

在head中新增

1
<script src="https://accounts.google.com/gsi/client" async></script>

在body中新增 [回调uri的方式推荐] 详细介绍:https://developers.google.cn/identity/gsi/web/reference/html-reference?hl=zh-cn
快捷登录模式

1
2
3
4
5
6
7
<div id="g_id_onload"
data-client_id="客户端id"
data-context="signup"
data-login_uri="回调uri"
data-cancel_on_tap_outside="false"
data-itp_support="true">
</div>

另一种方式,弹窗方式:
详细介绍:https://developers.google.cn/identity/gsi/web/reference/js-reference?hl=zh-cn

1
2
3
4
5
6
7
8
9
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
google.accounts.id.prompt();
};
</script>

vue等框架使用,这里举例vue (谷歌推荐的是授权代码模型:https://developers.google.cn/identity/oauth2/web/guides/use-code-model?hl=zh-cn#popup-mode)

在public目录下的index.html文件的head中新增

1
<script src="https://accounts.google.com/gsi/client" async></script>

对应的地方如需要自定义按钮,通过按钮点击事件触发

1
2
3
4
5
6
7
8
9
window.google.accounts.oauth2.initCodeClient({
client_id: that.google_auth.clientId,
scope: 'openid profile email',
include_granted_scopes: false,
ux_mode: 'popup',// 弹窗模式
callback: (response) => {
console.log(response)
},
}).requestCode();