警告:這項資料是依據《 Google 使用者資料政策》規定提供。請詳閱並遵守相關政策。否則可能會導致專案或帳戶遭到停權。

透過 Iframe 整合 One Tap

Google One Tap 可呈現在自己網站代管的 iframe (以下稱「中繼 iFrame」) 中。使用中繼 iframe 時,One Tap 使用者體驗不會有任何可察覺的變動。

採用中型 iframe 整合功能可帶來幾項彈性和風險:

  • 適用於內嵌式體驗的 UX 和後續的使用者體驗流程

    One Tap 使用者體驗完成後,您可以在中繼 iframe 中顯示後續的使用者體驗流程。因此,One Tap 和後續的使用者體驗都能嵌入目前的內容網頁中。請參閱下方的範例。

    含有中繼 iframe 的內嵌 UX 範例。

    如果沒有中階 iframe,通常您需要一個完整的頁面導覽選單才能顯示後續的使用者體驗流程,在某些情況下可能會產生幹擾。

  • 只需整合一次,隨處顯示

    所有 One Tap 整合程式碼 (One Tap API 叫用與後續的使用者體驗處理) 都會納入中繼 iframe 中。在內容頁面上,只要顯示 One Tap,您只需嵌入中繼 iframe 即可。

    這個架構可讓您區分疑慮,進而降低整合和維護成本。

  • 限制 ID 符記公開範圍

    ID 憑證會直接由中繼 iframe 使用。絕不會透露給內容頁面這個架構可能會大幅降低 ID 憑證暴露範圍。

    中階 iframe 也可以用於已具備專屬登入相關子網域 (例如 login.example.com) 以及多個內容相關子網域 (例如 sports.example.com 和 game.example.com) 的網站。

  • One Tap 顯示網域

    依據 Google 的 OAuth 政策規定,所有接收 OAuth 回應的網域都必須在 Google API 控制台中預先註冊。由於一般的 One Tap 整合功能,開發人員必須預先註冊所有 One Tap 可顯示的網域,因為 ID 憑證會回傳到這些網域。有些網站可讓使用者動態建立子網域,因此無法預先註冊。因此,「One Tap」無法在這些動態建立的子網域中顯示。

    只要使用中繼 iframe 即可修正這個問題。在這種情況下,您只需預先註冊中繼 iframe 的網域即可。您不需要註冊內容頁面網域,因為 ID 憑證不會暴露於這些內容頁面。

  • AMP 支援

    根據預設,Google One Tap 無法顯示在 AMP 網頁中,原因如下:

    1. 不允許使用自訂 JS 程式庫或程式碼。

    2. AMP 快取可能會轉譯其他頁面 (AMP 檢視器 (#39;s) 網域)。

    只要使用中繼 iframe 架構即可解決這個問題。在中繼 iframe 中完成整合後,開發人員可以透過新增 <amp-onetap-google> 元件,將 AMP 網頁嵌入 AMP 網頁中。

    AMP 網頁和非 AMP HTML 網頁可以重複使用相同的中繼 iframe。

  • 隱私權風險

    開發人員必須採取相關措施,防止中繼 iframe 嵌入到非預期的網域中。例如,惡意.com 可能會嵌入您的中繼 iframe,因而讓使用者在他們的 Tap Tap UX 網站上看見您的 One Tap 使用者體驗。這絕對會導致使用者的許多隱私權疑慮。

  • 安全性風險

    基於上述未預期的頁框問題,您的中繼 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 模式執行。您可以設定一個網域或以逗號分隔的網域清單,做為屬性值。系統也支援萬用字元子網域。

(選用) 在中繼 iframe 中呈現後續的使用者體驗

在登入回應中,您可以傳回任何 HTML 程式碼,此程式碼可能會向使用者顯示某些可見的內容。例如,要求您提供額外的個人資料資訊,或同意 TOS 等。提交網頁之後,您就能顯示其他頁面。例如付款或訂閱等等。

您也可以選擇調整中繼 iframe 的大小,如下所示。

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

總而言之,透過中繼 iframe,您就能以嵌入式使用者體驗來導入完整的登入或註冊使用者體驗流程。

對於 One Tap 使用者體驗結束後的第一頁,您必須呼叫 notifyParentResize() 方法兩次,原因如下:

  1. 中間的 iframe 會在完成輕觸時設為隱藏。

  2. 元素的 offsetHeight 屬性值在隱藏時為 0。

在第一個呼叫中,您可以將 iframe 高度調整為 1 像素,這樣系統就只會顯示 iframe。待系統提供 offsetHeight 屬性值後,您就可以將該值調整為適當的高度。

下列程式碼範例示範如何在 One Tap 使用者體驗結束後驗證父項來源,並調整使用者介面的中繼 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。為此,您可以將以下程式碼片段放入登入回應程式碼中。

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

如果略過使用者體驗流程,則必須改為呼叫 notifyParentClose 方法。

在 HTML 網頁中嵌入中繼 iframe

將以下程式碼片段放入您想讓 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。