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

通過iframe集成一鍵式

可以在您自己的網站託管的iframe(以下稱為“中級iframe”)中渲染Google One Tap。使用中間iframe時,One Tap UX上沒有任何可感知的變化。

基於中間iframe的集成帶來了一些靈活性和風險:

  • 一鍵式嵌入式UX和後續的UX流程

    完成“一鍵式UX”後,您可以在中間iframe中顯示後續的UX流。因此,一鍵式和後續UX都可以嵌入到當前內容頁面中。請參閱下面的示例。

    具有中間iframe的嵌入式UX的示例。

    如果沒有中間iframe,通常您需要整頁導航才能顯示後續的UX流,這在某些情況下可能會帶來干擾。

  • 集成一次,並在任何地方顯示

    所有的One Tap集成代碼(One Tap API調用和後續的UX處理)都封裝在中間iframe中。在可能顯示“一鍵式”的內容頁面上,您需要做的就是嵌入中間iframe。

    這種體系結構允許關注點分離,從而降低了集成和維護成本。

  • 限制ID令牌的暴露範圍

    中間iframe直接使用ID令牌。它們從不暴露於內容頁面。這種體系結構可能會大大減少ID令牌的暴露範圍。

    中間iframe方式也適用於已經具有專用的與登錄相關的子域(例如,login.example.com)和多個與內容相關的子域(例如,sports.example.com和games.example.com)的網站。

  • 一鍵式顯示域

    根據Google的OAuth政策的要求,所有接收OAuth響應的域都必須在Google API控制台中預先註冊。使用常規的One Tap集成,開發人員需要預先註冊One Tap可能顯示的所有域,因為ID令牌將傳遞回這些域。一些網站允許其用戶動態創建子域,而這些子域是無法預先註冊的。如此一來,一鍵式便無法顯示在這些動態創建的子域中。

    可以通過利用中間iframe來解決此問題。在這種情況下,僅中間iframe的域需要預先註冊。無需註冊內容頁面域,因為ID令牌不會暴露給這些內容頁面。

  • AMP支持

    默認情況下,由於以下某些原因,Google One Tap無法顯示在AMP頁面中。

    1. 不允許使用自定義JS庫或代碼。

    2. AMP緩存可以使頁面形成另一個(AMP Viewer)域。

    可以通過利用中間iframe架構來解決此問題。在中間iframe中完成One Tap集成後,開發人員可以通過添加<amp-onetap-google>組件將其嵌入AMP頁面。

    AMP頁面和非AMP HTML頁面都可以重複使用相同的中間iframe。

  • 隱私風險

    開發人員必須採取措施,以防止將中間iframe嵌入到意外域中。例如,malware.com可能會嵌入您的中間iframe,從而在其網站上不顯示One Tap 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模式下運行。您可以將一個域或逗號分隔的域列表設置為屬性值。還支持通配符子域。

(可選)在中間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()方法兩次。

  1. 完成“一鍵式UX”操作後,中間iframe將設置為隱藏。

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

在第一個調用中,您可以將iframe的高度調整為1px,以使其可見。然後,在offsetHeight屬性值可用之後,可以將其調整為合適的高度。

以下示例代碼顯示了在One Tap 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。