中介 iframe 支援 JavaScript API 參考資料

本參考頁面說明中繼 iframe 支援 JavaScript API，一鍵登入功能會使用這個 API，在後續使用者體驗中操控中繼 iframe。

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

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

方法
verifyParentOrigin 執行父項來源驗證
notifyParentClose 通知上層頁框略過一鍵登入使用者體驗流程
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 回呼方法。

origins

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

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

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

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

verifiedCallback

如果目前的上層來源可以嵌入中繼 iframe，就會觸發這個欄位中的 JavaScript 回呼方法。

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.notifyParentDone 方法會通知父項框架關閉中繼 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。