中介 iframe 支援 JavaScript API 參考資料

本參考頁面說明中繼 iframe 支援 JavaScript API，One Tap 會使用這個 API 在後續 UX 中操控中繼 iframe。

請參閱「使用 Iframe 整合 One Tap」指南，瞭解如何使用中介 iframe。

下表列出所有可用方法及其行為。

方法
verifyParentOrigin 執行父項來源驗證
notifyParentClose 通知上層頁框已略過 One Tap 使用者體驗流程
notifyParentDone 通知上層頁框「一鍵登入」使用者體驗流程已完成
notifyParentResize 通知父項頁框調整中介 iframe 的大小
notifyParentTapOutsideMode 在使用者點選中繼 iframe 外部時，通知上層影格是否要取消中繼 iframe

載入中繼 iframe 支援 JavaScript 程式庫

將下列程式碼片段放置在要載入中繼 iframe 的任何 HTML 頁面中：

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

方法：google.accounts.id.intermediate.verifyParentOrigin

google.accounts.id.intermediate.verifyParentOrigin 方法會執行父項來源驗證。請參閱下列方法程式碼範例：

google.accounts.id.intermediate.verifyParentOrigin(
    origins, verifiedCallback, verificationFailedCallback)

以下程式碼範例說明如何只在驗證父項來源後顯示 UI：

<script>
  window.onload = () => {
    google.accounts.id.intermediate.verifyParentOrigin(
        "https://example.com", showUI, showError);
  };
</script>

下表列出相關參數：

參數
origins 允許嵌入中繼 iframe 的來源。
verifiedCallback 當目前父項來源可嵌入中繼 iframe 時，觸發的 JavaScript 回呼方法。
verificationFailedCallback 當目前的父項來源無法嵌入中繼 iframe 時，系統會觸發這個 JavaScript 回呼方法。

來源

允許嵌入中繼 iframe 的來源。詳情請參閱下表：

類型 必填 範例
字串、字串陣列或函式 選用 allowed_parent_origin: "https://example.com"

下表列出支援的值類型及其說明。

值類型
string 單一網域 URI。 「https://example.com」
string array 網域 URI 陣列。 "https://news.example.com,https://local.example.com"

verifiedCallback

這個欄位是 JavaScript 回呼方法，當目前的父項來源允許嵌入中繼 iframe 時，系統會觸發這個方法。

verificationFailedCallback

如果目前的父項來源無法嵌入中繼 iframe，系統就會觸發這個 JavaScript 回呼方法。

方法：google.accounts.id.intermediate.notifyParentClose

如果略過「一鍵登入」使用者體驗流程，google.accounts.id.intermediate.notifyParentClose 方法會通知父框架關閉中繼 iframe。請參閱下列方法程式碼範例：

google.accounts.id.intermediate.notifyParentClose()

方法：google.accounts.id.intermediate.notifyParentDone

google.accounts.id.intermediate.notifyParentClose 方法會通知父影格關閉中繼 iframe，並重新整理登入狀態。請參閱下列方法程式碼範例：

google.accounts.id.intermediate.notifyParentDone()

方法：google.accounts.id.intermediate.notifyParentResize

google.accounts.id.intermediate.notifyParentResize 方法會通知父框架調整中繼 iframe 的大小。請參閱下列方法程式碼範例：

google.accounts.id.intermediate.notifyParentResize(height)

高度

新的高度 (以像素為單位)。這是必填欄位。這個值必須是非負數。

如果高度參數大於 0，中繼 iframe 會設為新的高度。如果高度參數為 0，中繼 iframe 就會隱藏。隱藏式 iframe 未關閉。之後可以透過其他大小調整方法呼叫來顯示。

方法：google.accounts.id.intermediate.notifyParentTapOutsideMode

當使用者點選中繼 iframe 以外的區域時，google.accounts.id.intermediate.notifyParentTapOutsideMode 方法會通知上層影格是否要取消中繼 iframe。請參閱下列方法程式碼範例：

google.accounts.id.intermediate.notifyParentTapOutsideMode(cancel)

取消

這個必要布林值表示使用者點選中繼 iframe 外部時，是否要取消中繼 iframe。