Google One Tap は iframe（以下 中間 iframe など）が使用されます。ユーザーが認識できる 中間 iframe を使用した場合のワンタップ UX の変更
中間的な iframe ベースの統合には、ある程度の柔軟性とリスクが伴います。
ワンタップ用の埋め込み UX とその後の UX フロー。
ワンタップ UX が完了すると、後続の UX フローを 中間の iframe です。したがって、ワンタップとその後の UX の両方に埋め込みが可能 直接移動することもできます次の例をご覧ください。
中間 iframe を使用しない場合、通常はページ全体のナビゲーションが必要になります。 後続の UX フローが表示されるため、場合によっては煩わしくなる可能性があります。
一度統合すれば、どこにでも表示できる。
すべてのワンタップ統合コード（One Tap API の呼び出しとその後の UX） 中間の iframe にカプセル化されます。コンテンツページでは ワンタップで画像を表示できます。必要なのは、 使用できます。
このアーキテクチャでは懸念事項を分離できるため、 統合とメンテナンスのコストが削減されます。
ID トークンの公開スコープを制限します。
ID トークンは中間 iframe で直接使用されます。内容は次のとおりです。 コンテンツページには一切表示されませんこのアーキテクチャは ID トークンの露出範囲を減らす。
中級者向けの iframe 方法は、 専用のログイン関連サブドメイン（例: login.example.com）と、 コンテンツ関連のサブドメイン（sports.example.com、games.example.com など）
ワンタップでドメインを表示
Google の OAuth ポリシーで定められているように、OAuth を受け取るすべてのドメイン Google Cloud コンソールで事前登録する必要があります。普通 タップの統合。デベロッパーはワンタップですべてのドメインを事前登録する必要がある ID トークンがドメインに渡されるため、表示される場合があります。一部 ウェブサイトでは、ユーザーがサブドメインを動的に作成でき、 事前登録は不可能ですそのため、ワンタップを 自動的に作成されます。
この問題は、中間 iframe を利用することで解決できます。この例では 中間 iframe のドメインのみを事前登録する必要があります。そこで、 コンテンツ ページのドメインを登録する必要はありません。ID トークンは 該当コンテンツページにのみアクセスできます
プライバシーのリスク。
デベロッパーは、中間 iframe が機能しないようにするため、対策を講じる必要があります。 想定外の結果に埋め込まれる場合ですたとえば、malad.com がユーザーの 中間 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 つのドメインまたはカンマ区切りの URL を設定できます
ドメインリストを属性値として使用しています。ワイルドカード サブドメインもサポートされています。
（省略可）後続の UX を中間 iframe でレンダリングする
ログインのレスポンスでは、どのような 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 回呼び出す必要があります。
ワンタップ UX が完了すると、中間 iframe が非表示に設定されます。
要素の
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 を削除完了
次の場合は、親コンテンツ ページに中間 iframe を削除するよう通知する必要があります。 UX フローは完了ですそのためには、次のコード スニペットを 入力します。
<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 です。