使用 JavaScript API

目標： 如果預設登入流程不符合您的需求，您可以透過多種方式自訂。請參閱下列資訊，瞭解可用的自訂選項。

如有需要，您可以只使用 JavaScript 程式碼觸發 One Tap 提示，或顯示「使用 Google 帳戶登入」按鈕。

如要在 JavaScript 中設定 One Tap 提示，您必須先呼叫 initialize() 方法。接著，呼叫 prompt() 方法來顯示提示 UI。請參閱下列程式碼片段：

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  }
</script>

如要接收提示 UI 狀態通知，請為 prompt() 方法提供回呼函式。請參閱下列程式碼片段：

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt((notification) => {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
            // try next provider if OneTap is not displayed or skipped
        }
    });
  }
</script>

以下程式碼範例說明如何在 JavaScript 中算繪 One Tap 和「使用 Google 帳戶登入」按鈕。

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    const parent = document.getElementById('google_btn');
    google.accounts.id.renderButton(parent, {theme: "filled_blue"});
    google.accounts.id.prompt();
  }
</script>