このリファレンス ページでは、後続の UX で中間 iframe を操作するために One Tap で使用される Intermediate iframe Support 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.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 をキャンセルするかどうかを示します。