設定

如要使用 Google Identity Services JavaScript 程式庫 (google.accounts.oauth2)，授權網頁應用程式存取 Google API，您必須先完成下列步驟：

  1. 取得 OAuth 2.0 用戶端 ID。
  2. 設定 OAuth 同意畫面和範圍。
  3. 載入用戶端程式庫。
  4. 視需要設定內容安全政策 (CSP) 和跨源開啟工具政策 (COOP)。

取得 Google API 用戶端 ID

如要在網站上啟用 Google 帳戶授權，您必須先設定 Google API 用戶端 ID。操作步驟如下：

  1. 開啟 Google Cloud 控制台的「Clients」(用戶端) 頁面。
  2. 建立或選取 Cloud 控制台專案。建立正式版應用程式時，可能需要多個專案；請為您管理的每個專案重複本節的其餘步驟。
  3. 按一下「Create client」(建立用戶端)，然後在「Application type」(應用程式類型) 中選取「Web application」(網頁應用程式)，建立新的用戶端 ID。如要使用現有的用戶端 ID，請選取「網頁應用程式」類型的 ID。

  4. 將網站的 URI 新增至「已授權的 JavaScript 來源」。URI 僅包含配置和完整主機名稱。例如 https://www.example.com。

  5. 如果您搭配 ux_mode: 'redirect' 使用授權碼模式 (或在後端端點交換授權碼)，請將重新導向 URI 新增至「已授權的重新導向 URI」。重新導向 URI 包含配置、完整主機名稱和路徑，且必須符合重新導向 URI 驗證規則。例如：https://www.example.com/oauth2callback。

設定完成後，請記下建立的用戶端 ID。初始化 initCodeClient() 或 initTokenClient() 時，您會在 client_id 屬性中傳遞這個值。(系統也會建立用戶端密鑰，您必須保密，且只能用於伺服器端權杖交換作業)。

當網頁應用程式使用 OAuth 2.0 範圍要求存取使用者資料時，Google 會顯示同意畫面，告知使用者哪個應用程式要求存取權、要求哪些資料範圍，以及適用的條款。

  1. 在 Cloud 控制台的「Google Auth Platform」部分，開啟「品牌宣傳」頁面。
  2. 如果出現提示，請選取您設定的專案。
  3. 填寫品牌宣傳表單 (應用程式名稱、應用程式標誌、支援電子郵件、授權網域、應用程式首頁連結和隱私權政策連結)，然後按一下「Save」(儲存)。
  4. 前往「資料存取」頁面，設定應用程式所需的 Google API 範圍。最佳做法是在需要存取權時，逐步要求範圍，而非預先要求。
  5. 確認驗證狀態。如果應用程式要求存取機密或受限制的範圍，請將應用程式送交驗證。詳情請參閱 OAuth 驗證規定。

內容安全政策和 COOP

如果網頁應用程式強制執行內容安全政策 (CSP)，請允許下列 Google Identity 服務來源：

  • script-src：https://accounts.google.com/gsi/client
  • frame-src：https://accounts.google.com/gsi/
  • connect-src：https://accounts.google.com/gsi/

如果是彈出式授權流程 (initTokenClient 或 initCodeClient 搭配 ux_mode: 'popup')，請將 Cross-Origin-Opener-Policy (COOP) HTTP 回應標頭設為 same-origin-allow-popups，讓對話方塊視窗能將授權回應傳回網頁。

後續步驟

接著，在網頁上載入用戶端程式庫，開始初始化授權用戶端。