設定

在網站中加入「使用 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

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

使用 FedCM 的 One Tap

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

在 Chrome 中取得使用者同意時,系統會顯示頂層「授權網域」

不使用 FedCM 的 One Tap

One Tap 顯示的 OAuth 同意設定

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

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

內容安全政策

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

您的內容安全性政策可能包含一或多個指示,例如 connect-srcframe-srcscript-srcstyle-srcdefault-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-srcframe-srcscript-srcstyle-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

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