中繼 iframe 支援 JavaScript API

這個參考頁面說明瞭中繼 iframe 支援 JavaScript API，可讓您在後續使用者體驗中處理中繼 iframe。

請參閱使用 iframe 整合 One Tap 指南，瞭解如何使用中繼 iframe。

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

方法
verifyParentOrigin 執行父項來源驗證
notifyParentClose 通知上層框，系統略過 One Tap 使用者體驗流程
notifyParentDone 通知上層框， One Tap 使用者體驗流程已完成
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」

已驗證回呼

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

validationFailedCallback

這個欄位是在目前的父項來源無法嵌入中繼 iframe 時觸發的 JavaScript 回呼方法。

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

在 One Tap 使用者體驗流程略過時，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)

height

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

如果高度參數大於 0，中繼 iframe 會設為新的高度。如果高度參數為 0，中繼 iframe 會顯示為隱藏狀態。系統未關閉隱藏的 iframe。稍後可透過其他調整大小方法呼叫顯示。

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

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

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

取消

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