原生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();