iframe を使用してワンタップを統合する

Google One タップは、独自のウェブサイトでホストされている iframe（以下、中間 iframe と呼びます）内にレンダリングできます。中間の iframe を使用しても、ワンタップ UX に目に見える変化はありません。

中間の iframe ベースの統合には、次のような柔軟性とリスクがあります。

  • ワンタップとそれに続く UX フローの埋め込み UX。

    ワンタップ UX が完了したら、後続の UX フローを中間 iframe 内に表示できます。したがって、ワンタップとそれに続く UX の両方を現在のコンテンツ ページに埋め込むことができます。次の例をご覧ください。

    中間 iframe を備えた埋め込み UX の例。

    中間の iframe がない場合、通常は後続の UX フローを表示するためにページ全体のナビゲーションが必要になり、場合によっては煩わしい場合があります。

  • 1 回の統合で、すべての場所に表示します。

    すべての One Tap 統合コード（One Tap API の呼び出しと後続の UX 処理）は中間 iframe にカプセル化されます。ワンタップが表示されるコンテンツ ページでは、中間 iframe を埋め込むだけで済みます。

    このアーキテクチャでは問題を分離できるため、統合とメンテナンスの費用を削減できます。

  • ID トークンの公開スコープを制限する。

    ID トークンは中間 iframe で直接使用されます。コンテンツ ページには公開されません。このアーキテクチャでは、ID トークンの公開範囲が大幅に縮小する可能性があります。

    中間の iframe を使用する方法は、ログイン関連の専用のサブドメイン（例: login.example.com）と複数のコンテンツ関連のサブドメイン（例:sports.example.com と game.example.com）がすでにあるウェブサイトでも適切に機能します。

  • ワンタップでドメインを表示。

    Google の OAuth ポリシーに従って、OAuth レスポンスを受信するすべてのドメインを Google Cloud コンソールで事前登録する必要があります。通常のワンタップ統合では、デベロッパーはワンタップで表示する可能性のあるすべてのドメインを事前登録する必要があります。これは、ID トークンがこれらのドメインに返されるためです。一部のウェブサイトでは、ユーザーが事前登録できないサブドメインを動的に作成できます。そのため、動的に作成されたこれらのサブドメインではワンタップを表示できません。

    この問題は、中間 iframe を利用することで解決できます。この場合、中間 iframe のドメインのみを事前登録する必要があります。ID トークンはコンテンツ ページに公開されないため、コンテンツ ページのドメインを登録する必要はありません。

  • AMP サポート。

    デフォルトでは、Google One Tap は以下の理由により AMP ページに表示できません。

    1. カスタム JS ライブラリまたはコードは使用できません。

    2. AMP キャッシュによって、別の（AMP 閲覧者の）ドメインからページがレンダリングされる場合があります。

    この問題は、中間 iframe アーキテクチャを利用することで解決できます。中間 iframe でワンタップの統合が完了したら、デベロッパーは <amp-onetap-google> コンポーネントを追加して AMP ページに埋め込むことができます。

    AMP ページと非 AMP HTML ページの両方で、同じ中間 iframe を再利用できます。

  • プライバシー リスク。

    中間 iframe が想定外のドメインに埋め込まれないように、対策を講じる必要があります。たとえば、悪意のあるサイトによって中間の iframe が埋め込まれ、そのウェブサイトにワンタップ UX が表示される場合があります。これにより、エンドユーザーのプライバシーに関する多くの懸念が生まれることは明らかです。

  • セキュリティ リスク。

    前述の予期しないフレーミングの問題により、中間 iframe は ID トークン、セッション Cookie 値、ユーザーデータなどのセキュリティやプライバシーのセンシティブ データを親フレームに送信しないようにする必要があります。このルールに従わないと、ウェブサイトが危険にさらされる可能性があります。

中間 iframe でワンタップをレンダリングする

中間 iframe 内にワンタップを表示するには、中間 iframe の HTML コードに次のコード スニペットを配置します。

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-allowed_parent_origin="https://example.com">
</div>

data-allowed_parent_origin 属性が使用されている場合、Google One Tap は中級 iframe モードで動作します。属性値として、1 つのドメインまたはカンマ区切りのドメインリストを設定できます。ワイルドカードのサブドメインもサポートされます。

（省略可）中間 iframe で後続の UX をレンダリングする

ログインのレスポンスでは、どのような HTML コードでも返せますが、そのコードによってエンドユーザーに可視コンテンツが表示されることがあります。追加のプロフィール情報の提供や 利用規約への同意などがありますページが送信されると、追加のページを表示できます。（お支払いや定期購入など）。

中間 iframe はサイズ変更できます。

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentResize(320);
</script>

要約すると、中間 iframe では、完全なログインまたは登録の UX フローを埋め込み UX として実装できます。

ワンタップ UX の後の最初のページでは、次の理由により notifyParentResize() メソッドを 2 回呼び出す必要があります。

  1. ワンタップ UX が完了すると、中間 iframe は非表示に設定されます。

  2. 非表示の要素の offsetHeight 属性値は 0 です。

最初の呼び出しでは、表示のために iframe の高さを 1 ピクセルに変更できます。offsetHeight 属性値が使用可能になったら、適切な高さにサイズ変更できます。

次のサンプルコードは、親オリジンを検証し、ワンタップ UX 後の UI の中間 iframe のサイズを変更する方法を示しています。

<script>
window.onload = () => {
  google.accounts.id.intermediate.verifyParentOrigin(
    ["https://example.com","https://example-com.cdn.ampproject.org"],
    () => {
      google.accounts.id.intermediate.notifyParentResize(1);
      window.setTimeout(() => {
        let h = document.getElementById('container').offsetHeight;
        google.accounts.id.intermediate.notifyParentResize(h);
      }, 200);
    },
    () => {
      document.getElementById('container').style.display = 'none';
      document.getElementById('warning').innerText = 'Warning: the page is displayed in an unexpected domain!';
    }
  );
};
</script>

UX 完了の中間 iframe を削除する

UX フローが完了したら、親コンテンツ ページに通知して中間 iframe を削除する必要があります。そのためには、ログイン レスポンス コードに次のコード スニペットを挿入します。

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentDone();
</script>

UX フローがスキップされた場合は、代わりに notifyParentClose メソッドを呼び出す必要があります。

中間 iframe を HTML ページに埋め込む

Google One Tap によって表示する HTML ページに次のコード スニペットを配置します。

<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
     data-src="https://example.com/onetap_iframe.html">
</div>

data-src 属性は、中間 iframe の URI です。