警告:このデータは、 Googleユーザーデータポリシーに基づいて提供されています。ポリシーを確認して遵守してください。そうしないと、プロジェクトまたはアカウントが停止される可能性があります。

Iframeを介してワンタップを統合する

Google One Tapは、独自のWebサイトでホストされているiframe(以下、中間Iframeと呼びます)内でレンダリングできます。中間iframeが使用されている場合、One TapUXで認識できる変更はありません。

中間のiframeベースの統合は、いくつかの柔軟性とリスクをもたらします。

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

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

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

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

  • 一度統合すれば、どこにでも表示できます。

    すべてのワンタップ統合コード(ワンタップAPI呼び出しとそれに続くUX処理)は、中間iframeにカプセル化されます。ワンタップが表示される可能性のあるコンテンツページでは、中間のiframeを埋め込むだけです。

    このアーキテクチャにより、関心の分離が可能になるため、統合とメンテナンスのコストが削減されます。

  • IDトークンの公開範囲を制限します

    IDトークンは、中間iframeによって直接消費されます。コンテンツページに公開されることはありません。このアーキテクチャにより、IDトークンの公開範囲が大幅に減少する可能性があります。

    中間のiframeの方法は、専用のログイン関連のサブドメイン(login.example.comなど)と複数のコンテンツ関連のサブドメイン(sports.example.comやgames.example.comなど)がすでにあるWebサイトでもうまく機能します。 。

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

    GoogleのOAuthポリシーで要求されているように、OAuth応答を受信するすべてのドメインは、GoogleAPIコンソールに事前登録する必要があります。通常のワンタップ統合では、IDトークンがこれらのドメインに返されるため、開発者はワンタップが表示する可能性のあるすべてのドメインを事前登録する必要があります。一部のWebサイトでは、ユーザーがサブドメインを動的に作成できますが、事前登録は不可能です。その結果、これらの動的に作成されたサブドメインにワンタップを表示することはできません。

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

  • AMPサポート

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

    1. カスタムJSライブラリまたはコードは許可されていません。

    2. AMPキャッシュは、ページを別の(AMPビューアの)ドメインからレンダリングする場合があります。

    この問題は、中間のiframeアーキテクチャを活用することで修正できます。中間のiframeでワンタップ統合が行われた後、開発者は<amp-onetap-google>コンポーネントを追加することでそれをAMPページに埋め込むことができます。

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

  • プライバシーリスク

    開発者は、中間iframeが予期しないドメインに埋め込まれるのを防ぐための対策を講じる必要があります。たとえば、malistable.comが中間iframeを埋め込んでいるため、One TapUXがWebサイトに表示されない場合があります。これは間違いなくエンドユーザーから多くのプライバシーの懸念を引き起こします。

  • セキュリティリスク

    上記の予期しないフレーミングの問題により、中間iframeは、IDトークン、セッションCookie値、ユーザーデータなど、セキュリティまたはプライバシーに配慮したデータを親フレームに送信しないでください。このルールに従わないと、Webサイトが危険。

中間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 data-allowed_parent_originは中間iframeモードで実行されます。属性値として、1つのドメインまたはコンマ区切りのドメインリストを設定できます。ワイルドカードサブドメインもサポートされています。

(オプション)中間Iframeで後続のUXをレンダリングする

ログイン応答では、エンドユーザーに表示されるコンテンツを表示する可能性のあるHTMLコードを返すことができます。たとえば、追加のプロファイル情報を要求したり、TOSに同意したりします。ページが送信されると、さらにページを表示できます。たとえば、支払いやサブスクリプションなど。

以下のように、中間iframeのサイズを変更するオプションもあります。

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

要約すると、中間iframeを使用すると、完全なサインインまたはサインアップUXフローを組み込みUXとして実装できます。

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

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

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

最初の呼び出しでは、iframeの高さを1pxにサイズ変更して、表示できるようにすることができます。次に、 offsetHeight属性値が使用可能になったら、適切な高さにサイズ変更できます。

次のサンプルコードは、親のオリジンを検証し、One TapUXの後にforUIの中間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 OneTapで表示する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です。