設定

在您將「使用 Google 帳戶登入」、「One Tap」或「自動登入」功能新增到網站之前，請先進行 OAuth 設定，並視需要設定網站內容安全政策。

注意： 您必須擁有用戶端 ID 才能設定「使用 Google 帳戶登入」功能，並在後端驗證 ID 權杖。用戶端 ID 如以下範例所示：1234567890-abc123def456.apps.googleusercontent.com

取得 Google API 用戶端 ID

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

1. 開啟 Google API 控制台的「Credentials」(憑證) 頁面。
2. 建立或選取 Google API 專案。如果您已有「使用 Google 帳戶登入」按鈕或 Google One Tap 專案，請使用現有的專案和網路用戶端 ID。建立正式版應用程式時，您可能需要多個專案，並針對每個您管理的每個專案重複本節的其餘步驟。
3. 按一下「Create credentials」(建立憑證) >「OAuth client ID」(OAuth 用戶端 ID)，然後針對「Application type」(應用程式類型) 選取「Web application」(網頁應用程式) 建立新的用戶端 ID。如要使用現有的用戶端 ID，請選取其中一種網頁應用程式類型。

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

   重點：如果是本機測試或開發作業，請同時加入 http://localhost 和 http://localhost:<port_number>
   重點：Google One Tap 只能在 HTTPS 網域中顯示。

5. 或者，您也可以利用重新導向的方式傳回您代管的端點，而非透過 JavaScript 回呼。在這種情況下，請將重新導向 URI 新增至授權的重新導向 URI。重新導向 URI 包含配置、完整主機名稱和路徑，且必須符合重新導向 URI 驗證規則。例如：https://www.example.com/auth-receiver

重點： 使用 http 和 localhost 進行測試時，請將網頁應用程式中的 Referrer-Policy 標頭設為 Referrer-Policy: no-referrer-when-downgrade。

設定 OAuth 同意畫面

「使用 Google 帳戶登入」和「使用 One Tap」驗證都包含一個同意畫面，可讓使用者瞭解應用程式要求存取自己的資料、要求存取的資料類型，以及適用的條款。

1. 開啟 Google Developer Console 中「API 和服務」部分的 OAuth 同意畫面頁面。
2. 如果出現提示訊息，請選取您剛建立的專案。

3. 在「OAuth 同意畫面」頁面上填寫表單，然後按一下「儲存」按鈕。

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

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

   3. 支援電子郵件：會顯示在同意畫面中，以便提供使用者支援，以及供 G Suite 管理員評估使用者存取您的應用程式的權限。當使用者按一下應用程式名稱時，會在「使用 Google 帳戶登入」同意畫面上看到這個電子郵件地址。

   4. Google API 範圍：範圍可讓應用程式存取使用者的私人資料。就驗證而言，預設範圍 (電子郵件、設定檔、開放 ID) 就已足夠，不需要新增任何敏感範圍。一般而言，最佳做法是要求在需要存取權時逐步要求範圍，而非事先要求存取權。瞭解詳情

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

   6. 應用程式首頁連結：「使用 Google 帳戶登入」功能會顯示，以及符合 GDPR 規定的一鍵式免責事項資訊。必須託管於授權網域。

   7. 應用程式隱私權政策連結：「使用 Google 帳戶登入」同意畫面會顯示，且會在「繼續以：」按鈕下方顯示符合 GDPR 規定的免責事項資訊。必須託管於授權網域。

   8. 應用程式服務條款連結 (選填)：使用「使用 Google 帳戶登入」功能時，會顯示於「以下列身分繼續」按鈕下方，顯示符合 GDPR 規定的免責事項資訊。必須託管於授權網域。

4. 如果您的應用程式需要驗證，請查看「驗證狀態」，然後按一下「Submit For Verification」按鈕提交驗證申請。詳情請參閱 OAuth 驗證規定。

登入時顯示 OAuth 設定

使用 FedCM 執行 One Tap

當使用者在 Chrome 中表示同意時，系統會顯示頂層網域。

One Tap (不使用 FedCM)

系統會在使用者同意時顯示「應用程式名稱」。

圖 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 Identity Services 伺服器端端點的上層網址。
• frame-src 指令新增了 https://accounts.google.com/gsi/，以允許「One Tap and Sign In With Google」(使用 Google 登入) 按鈕 iframe 的父項網址。
• script-src 指令新增 https://accounts.google.com/gsi/client，以允許 Google Identity 服務 JavaScript 程式庫的網址。
• style-src 指令新增 https://accounts.google.com/gsi/style 以允許 Google Identity 服務樣式表的網址。
• 如果使用 default-src 指令，並且未指定任何前述指令 (connect-src、frame-src、script-src 或 style-src) 時，為備用指令，請新增 https://accounts.google.com/gsi/，以允許頁面載入 Google Identity Services 伺服器端端點的上層網址。

使用 connect-src 時，避免列出個別 GIS 網址。這樣就能盡量減少 GIS 更新後失敗。舉例來說，與其新增 https://accounts.google.com/gsi/status，不如使用 GIS 父項網址 https://accounts.google.com/gsi/。

這個回應標頭範例可讓 Google Identity 服務成功載入並執行：

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/;

跨來源開啟器政策

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

已啟用 FedCM 後，瀏覽器會直接顯示彈出式視窗，因此無需進行任何變更。

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

• 到「same-origin」和
• 加入 same-origin-allow-popups。

如未設定適當的標頭，會中斷視窗之間的通訊，進而造成空白彈出式視窗或類似的錯誤。