在網站中加入「使用 Google 帳戶登入」、「一鍵登入」或自動登入功能前,請先設定 OAuth 設定,並視需要設定網站的內容安全性政策。
取得 Google API 用戶端 ID
如要在網站上啟用「使用 Google 帳戶登入」功能,您必須先設定 Google API 用戶端 ID。若要這樣做,請完成下列步驟:
- 開啟 Google API 控制台的憑證頁面。
- 建立或選取 Google API 專案。如果您已有「使用 Google 帳戶登入」按鈕或 Google One Tap 的專案,請使用現有的專案和網路用戶端 ID。建立正式版應用程式時,可能需要多個專案,請針對您管理的每個專案重複執行本節的剩餘步驟。
- 按一下「Create credentials」(建立憑證) >「OAuth client ID」(OAuth 用戶端 ID),然後在「Application type」(應用程式類型) 中選取「Web application」(網頁應用程式) 以建立新的用戶端 ID。如要使用現有的用戶端 ID,請選取「網頁應用程式」類型。
將您網站的 URI 加入「已授權的 JavaScript 來源」。URI 只包含配置和完整主機名稱。例如
https://www.example.com
。您可以選擇透過重新導向至您代管的端點,而不是透過 JavaScript 回呼來傳回憑證。如果是這種情況,請將重新導向 URI 新增至「已授權的重新導向 URI」。重新導向 URI 包含配置、完整主機名稱和路徑,且必須符合重新導向 URI 驗證規則。例如:
https://www.example.com/auth-receiver
設定 OAuth 同意畫面
使用「使用 Google 帳戶登入」和「一鍵驗證」驗證方式時,都會顯示同意畫面,告知使用者應用程式要求存取其資料,以及要求存取哪些資料,以及適用的條款。
- 開啟 Google 開發人員控制台「API 和服務」部分的「OAuth 同意畫面」頁面。
- 如果出現提示,請選取您剛建立的專案。
在「OAuth 同意畫面」頁面中填寫表單,然後按一下「Save」(儲存) 按鈕。
應用程式名稱:要求同意的應用程式名稱。名稱應準確反映您的應用程式,並與使用者在其他地方看到的應用程式名稱一致。
應用程式標誌:這張圖片會顯示在同意畫面上,協助使用者識別您的應用程式。標誌會顯示在「使用 Google 帳戶登入」同意畫面和帳戶設定中,但不會顯示在 One Tap 對話方塊中。
支援電子郵件:顯示在同意畫面上,用於使用者支援,以及供 G Suite 管理員評估您應用程式的使用者存取權。使用者點選應用程式名稱時,系統會在「使用 Google 帳戶登入」同意聲明畫面上向使用者顯示這個電子郵件地址。
Google API 的範圍:範圍可讓應用程式存取使用者的私人資料。對於驗證,預設範圍 (電子郵件、設定檔、openid) 就足夠了,您不需要新增任何敏感範圍。一般來說,最佳做法是在需要存取權時,逐漸要求範圍,而非一開始就要求。瞭解詳情
授權網域:為保護您和使用者,Google 僅允許使用 OAuth 驗證的應用程式使用授權網域。您的應用程式連結必須由授權網域代管。 瞭解詳情。
應用程式首頁連結:顯示在「使用 Google 帳戶登入」同意畫面,以及「繼續以」按鈕下方的「一鍵登入」GDPR 法規遵循聲明資訊。必須託管在授權網域中。
應用程式隱私權政策連結:在「使用 Google 帳戶登入」同意聲明畫面中顯示,並在「繼續以」按鈕下方顯示符合 GDPR 規定的免責事項資訊。必須託管在授權網域中。
應用程式服務條款連結 (選用):在「使用 Google 帳戶登入」同意聲明畫面和「一鍵登入」GDPR 法規遵循聲明資訊下方顯示。必須在授權網域上代管。
檢查「驗證狀態」,如果應用程式需要驗證,請按一下「提交驗證」按鈕,將應用程式送交驗證。詳情請參閱 OAuth 驗證規定。
在登入時顯示 OAuth 設定
使用 FedCM 的 One Tap
在 Chrome 中取得使用者同意時,系統會顯示頂層「授權網域」。
不使用 FedCM 的 One Tap
使用者同意時,系統會顯示「Application name」。
圖 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
。
如果未能設定適當的標頭,就會中斷視窗之間的通訊,進而產生空白彈出式視窗或類似的錯誤。