中間 iframe サポート JavaScript API リファレンス

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

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

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

メソッド
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 コールバック メソッド。

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 メソッドは、ワンタップ UX フローがスキップされたときに、中間 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)

height

新しい高さ（ピクセル単位）。これは必須項目です。値は 0 または正の数値にしてください。

height パラメータが 0 より大きい場合、中間 iframe は新しい高さに設定されます。height パラメータが 0 の場合、中間 iframe は非表示になります。非表示の iframe が閉じられていません。後で別のサイズ変更メソッド呼び出しによって表示できます。

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

google.accounts.id.intermediate.notifyParentTapOutsideMode メソッドは、ユーザーが中間 iframe の外側をクリックしたときに中間 iframe をキャンセルするかどうかを親フレームに通知します。このメソッドの次のコード例をご覧ください。

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

キャンセル

この必須のブール値は、ユーザーが中間 iframe の外側をクリックしたときに中間 iframe をキャンセルするかどうかを示します。