設定

在網站中加入「使用 Google 帳戶登入」、「一鍵登入」或自動登入功能前，請先設定 OAuth 設定，並視需要設定網站的內容安全性政策。

取得 Google API 用戶端 ID

如要在網站上啟用「使用 Google 帳戶登入」功能，您必須先設定 Google API 用戶端 ID。若要這樣做，請完成下列步驟：

  1. 開啟 的 。
  2. 建立或選取 專案。如果您已建立「使用 Google 帳戶登入」按鈕或 Google One Tap 的專案，請使用現有專案和網頁用戶端 ID。建立正式版應用程式時，可能需要多個專案，請針對您管理的每個專案重複執行本節的剩餘步驟。
  3. 按一下「Create client」，然後在「Application type」中選取「Web application」，即可建立新的用戶端 ID。如要使用現有的用戶端 ID，請選取「Web application」類型。

  4. 將網站的 URI 加到「已授權的 JavaScript 來源」。URI 只包含配置和完整主機名稱。例如 https://www.example.com。

  5. 您可以選擇透過重新導向至您代管的端點，而不是透過 JavaScript 回呼，來傳回憑證。如果是這種情況，請將重新導向 URI 新增至「已授權的重新導向 URI」。重新導向 URI 包含配置、完整的主機名稱和路徑，且必須符合重新導向 URI 驗證規則。例如：https://www.example.com/auth-receiver

使用「使用 Google 帳戶登入」和「一鍵驗證」時，都會顯示同意畫面，告知使用者應用程式要求存取哪些資料、要求哪些資料類型，以及適用的條款。

  1. 開啟的 Google Auth Platform 部分，然後開啟 。
  2. 如果出現提示，請選取剛剛建立的專案。

  3. 在 中填寫表單，然後按一下「Save」(儲存) 按鈕。

    1. 應用程式名稱：要求同意的應用程式名稱。名稱應如實反映您的應用程式，並與使用者在其他地方看到的應用程式名稱一致。

    2. 應用程式標誌：這張圖片會顯示在同意聲明畫面上，方便使用者辨識您的應用程式。標誌會顯示在「使用 Google 帳戶登入」同意聲明畫面和帳戶設定中，但不會顯示在 One Tap 對話方塊中。

    3. 支援電子郵件：顯示在同意畫面上，供使用者支援人員和 G Suite 管理員評估使用者對應用程式的存取權。使用者點選應用程式名稱時，系統會在「使用 Google 帳戶登入」同意聲明畫面上顯示這個電子郵件地址。

    4. 授權網域：為保護您和使用者，Google 只允許使用 OAuth 驗證的應用程式使用授權網域。應用程式的連結必須由授權網域代管。瞭解詳情。

    5. 應用程式首頁連結：顯示在「使用 Google 帳戶登入」同意聲明畫面，以及「繼續以」按鈕下方的「一鍵登入」GDPR 法規遵循聲明資訊。必須託管在授權網域中。

    6. 應用程式隱私權政策連結：顯示在「使用 Google 帳戶登入」同意聲明畫面，以及「繼續以」按鈕下方的「一鍵登入」GDPR 法規遵循聲明資訊。必須託管在授權網域中。

    7. 應用程式服務條款連結 (選用)：顯示在「使用 Google 帳戶登入」同意聲明畫面，以及「繼續以」按鈕下方的「一鍵登入」GDPR 法規遵循聲明資訊。必須託管在授權網域中。

  4. 前往 設定應用程式的範圍。

    1. Google API 的範圍：範圍可讓應用程式存取使用者的私人資料。對於驗證，預設範圍 (電子郵件、個人資料、openid) 就足夠，您不需要新增任何敏感範圍。一般而言，最佳做法是逐步要求範圍，在需要存取權時提出要求，而非事先提出要求。

  5. 檢查「驗證狀態」，如果應用程式需要驗證，請按一下「提交驗證」按鈕，將應用程式送交驗證。詳情請參閱 OAuth 驗證規定。

在登入時顯示 OAuth 設定

使用 FedCM 的 One Tap

Chrome One Tap 使用 FedCM 顯示的 OAuth 同意設定

使用者在 Chrome 中同意授權時，系統會顯示頂層授權網域。只有在跨來源但同網站的 iframe 中使用 One Tap 才是支援的方法。

不使用 FedCM 的 One Tap

One Tap 顯示的 OAuth 同意設定

使用者同意時，系統會顯示「Application name」。

圖 1. Chrome 中 One Tap 顯示的 OAuth 同意設定。

內容安全政策

雖然這不是必要步驟，但建議您設定內容安全政策，以保護應用程式並防範跨網站指令碼攻擊 (XSS)。詳情請參閱「CSP 簡介」和「CSP 和 XSS」。

您的內容安全性政策可能包含一或多個指示，例如 connect-src、frame-src、script-src、style-src 或 default-src。

如果 CSP 包含：

  • connect-src 指令，請新增 https://accounts.google.com/gsi/，讓網頁載入 Google 身分識別服務伺服器端端點的父項網址。
  • frame-src 指令，請新增 https://accounts.google.com/gsi/，允許 One Tap 和「使用 Google 帳戶登入」按鈕 iframe 的父項網址。
  • script-src 指令，請新增 https://accounts.google.com/gsi/client 以允許 Google Identity 服務 JavaScript 程式庫的網址。
  • style-src 指令，請新增 https://accounts.google.com/gsi/style 來允許 Google 身分識別服務樣式表單的網址。
  • 如果使用 default-src 指令，則在未指定任何前述指令 (connect-src、frame-src、script-src 或 style-src) 的情況下，會加入 https://accounts.google.com/gsi/，讓網頁載入 Google 身分識別服務伺服器端端點的父網址。

使用 connect-src 時，請避免列出個別 GIS 網址。這有助於在更新 GIS 時盡量減少失敗情形。例如，請使用 GIS 上層網址 https://accounts.google.com/gsi/，而非新增 https://accounts.google.com/gsi/status。

這個範例回應標頭可讓 Google 身分識別服務順利載入及執行：

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

跨來源開發者政策

如要成功建立彈出式視窗，您可能需要變更 Cross-Origin-Opener-Policy (COOP)，才能使用「使用 Google 帳戶登入」按鈕和 Google One Tap。

啟用 FedCM 後，瀏覽器會直接轉譯彈出式視窗，因此不需要進行任何變更。

不過，如果停用 FedCM，請設定 COOP 標頭：

  • 連線到 same-origin 和
  • 納入 same-origin-allow-popups。

如果未設定適當的標頭，就會中斷視窗之間的通訊，導致空白彈出式視窗或類似錯誤。