中級 iFrame サポート JavaScript API

このリファレンス ページでは、中間 iframe をサポートする JavaScript API について説明します。この API を使用すると、後続の UX で中間 iframe を操作できます。

中間 iframe の使用方法については、iFrame を使用したワンタップの統合ガイドをご覧ください。

次の表に、使用可能なすべてのメソッドとその動作を示します。

Methods
verifyParentOrigin 親オリジンの検証を実行します。
notifyParentClose ワンタップ UX フローがスキップされたことを親フレームに通知
notifyParentDone ワンタップ UX フローが完了したことを親フレームに通知
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」

assuredCallback

このフィールドは、現在の親オリジンに中間 iframe の埋め込みが許可されている場合にトリガーされる JavaScript コールバック メソッドです。

VerificationFailedCallback

このフィールドは、現在の親オリジンで中間 iframe の埋め込みが許可されていない場合にトリガーされる JavaScript コールバック メソッドです。

メソッド: google.accounts.id.intermediate.notifyParentClose

google.accounts.id.intermediate.notifyParentClose メソッドは、ワンタップ UX フローがスキップされたときに中間 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 をキャンセルするかどうかを示します。