設定

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

取得 Google API 用戶端 ID

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

1. 開啟 Google API 控制台的憑證頁面。
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。

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

設定 OAuth 同意畫面

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

1. 開啟 Google 開發人員控制台「API 和服務」部分的「OAuth 同意畫面」頁面。
2. 如果出現提示，請選取您剛建立的專案。

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

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

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

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

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

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

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

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

   8. 應用程式服務條款連結 (選用)：在「使用 Google 帳戶登入」同意聲明畫面和「一鍵登入」GDPR 法規遵循聲明資訊下方顯示。必須在授權網域上代管。

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

在登入時顯示 OAuth 設定

圖 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 和「使用 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 Identity Services 伺服器端端點的父項網址。

使用 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。

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