設定

如要在網站中加入「使用 Google 帳戶登入」按鈕或 One Tap 和自動登入提示，您必須先完成以下步驟：

1. 取得 OAuth 2.0 用戶端 ID，
2. 設定 OAuth 品牌和設定
3. 載入 Google Identity Services 用戶端程式庫，以及
4. 視需要設定內容安全政策和
5. 更新跨來源開發者政策

取得 Google API 用戶端 ID

如要在網站上啟用 Google 身分識別服務，您必須先設定 Google API 用戶端 ID。若要這樣做，請完成下列步驟：

1. 開啟 的 。
2. 建立或選取 專案。如果您已有專案可用於「使用 Google 帳戶登入」按鈕或 Google One Tap，請使用現有的專案和網路用戶端 ID。建立正式版應用程式時，可能需要多個專案，請針對您管理的每個專案重複執行本節的其餘步驟。
3. 按一下「Create client」，然後在「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

使用 data-client_id 或 client_id 欄位，在網頁應用程式中加入用戶端 ID。

設定 OAuth 同意畫面

使用「使用 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 設定

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

載入用戶端程式庫

請務必在使用者可能登入的任何網頁上載入 Google Identity Services 用戶端程式庫。請使用下列程式碼片段：

<script src="https://accounts.google.com/gsi/client" async></script> 

如要改善網頁載入速度，請使用 async 屬性載入指令碼。

如要查看程式庫支援的方法和屬性清單，請參閱 HTML 和 JavaScript API 參考資料。

內容安全政策

雖然不是必要，但建議您採用內容安全政策，確保應用程式安全，並防範跨網站指令碼攻擊 (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 身分識別服務伺服器端端點的父項網址。

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

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