中繼 iframe API 參考資料

本參考頁面說明中介 iframe API，用於使用 iframe 將「一鍵登入」提示嵌入網頁。

如要進一步瞭解如何使用中繼 iframe，請參閱使用 iframe 整合「一鍵登入」。

載入中繼 iframe JavaScript 程式庫

將下列程式碼片段插入要顯示「輕觸即可顯示 Google One」的任何 HTML 頁面：

<script src="https://accounts.google.com/gsi/intermediate"></script>

HTML API

如要載入中繼 iframe，請加入 ID 屬性設為 g_id_intermediate_iframe 的 HTML 元素。請參閱下列程式碼片段範例：

<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
     data-src="https://example.com/onetap_iframe.html">
</div>

ID 為「g_id_intermediate_iframe」的元素

您可以將中繼 iframe 資料屬性放在任何可見或不可見的元素中，例如 <div> 和 <span>。唯一的要求是將元素 ID 設為 g_id_intermediate_iframe。請勿將這個 ID 放在多個元素上。

下表列出資料屬性及其說明：

data-src

這項屬性是 One Tap 中間 iframe 的 URI。詳情請參閱下表：

data-done

這個屬性是 JavaScript 回呼方法，會在 One Tap 使用者體驗完成時觸發。

根據預設，單一登入使用者體驗完成後，內容頁面會重新載入。您可以提供自己的完成回呼，覆寫預設行為。詳情請參閱下表：

JavaScript API

您可以呼叫 JavaScript 方法，載入中繼 iframe。

方法：google.accounts.id.initializeIntermediate

google.accounts.id.initializeIntermediate 方法會根據設定物件載入中繼 iframe。請參閱下列方法程式碼範例：

google.accounts.id.initializeIntermediate(IntermediateConfig)

下列程式碼範例會使用 onload 函式實作 google.accounts.id.initializeIntermediate 方法：

<script>
  window.onload = function () {
    google.accounts.id.initializeIntermediate({
      src: 'https://example.com/intermediate'
    });
  };
</script>

資料類型：IntermediateConfig

下表列出各個欄位及其說明：

src

這個欄位是 One Tap 中間 iframe 的 URI。詳情請參閱下表：

完成

這個欄位是 JavaScript 回呼方法，會在「一鍵登入」使用者體驗完成時觸發。

根據預設，單一登入使用者體驗完成後，內容頁面會重新載入。您可以提供自己的完成回呼，覆寫預設行為。詳情請參閱下表：