設定

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

取得 Google API 用戶端 ID

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

  1. 開啟 Cloud Shell 的「Credentials」(憑證) 頁面， Google API 控制台。
  2. 建立或選取 Google API 專案。如果您已經有專案 「使用 Google 帳戶登入」按鈕或「Google One Tap」選項，使用現有專案 和網路用戶端 ID建立正式版應用程式時 可能需要多項專案，請重複其餘步驟 您也能建立 Cloud Storage 值區
  3. 按一下「Create credentials」(建立憑證) >OAuth 用戶端 ID和應用程式類型 選取「網頁應用程式」來建立新的用戶端 ID。如要使用現有的用戶端 ID，請選取「網頁應用程式」類型。

  4. 將您網站的 URI 加入「已授權的 JavaScript 來源」。URI 只包含通訊協定和完整主機名稱。例如 https://www.example.com。

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

使用「使用 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 符合 GDPR 規範」的免責事項資訊 「以下列身分繼續登入」按鈕。必須存放在授權網域中。

    7. 應用程式隱私權政策連結：「使用 Google 帳戶登入」會顯示 「同意畫面」，以及「一觸即享 GDPR 合規」的免責事項資訊 「以<使用者名稱>的身分繼續」按鈕。必須存放在授權網域中。

    8. 應用程式服務條款連結 (選用)：顯示在「登入時」 Google 同意畫面和「一鍵式 GDPR 符合 GDPR 規範」的免責事項資訊 ，在「以下列身分繼續」下按鈕。必須存放在授權網域中。

  4. 如果應用程式需要進行驗證，請查看「驗證狀態」，然後 按一下 [送交驗證]按下這個按鈕提出申請 驗證。詳情請參閱 OAuth 驗證規定 。

登入時顯示 OAuth 設定

One Tap 使用 FedCM

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

頂層網域授權網域會顯示在 。

One Tap (不使用 FedCM)

One Tap 顯示的 OAuth 同意聲明設定

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

圖 1. One Tap 在 Chrome 顯示的 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 身分識別服務伺服器端端點的父項網址。

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

如果未能設定正確的標頭，就會中斷視窗間的通訊， 空白彈出式視窗 或類似錯誤