什麼是客戶端 ID？
Google 用戶端 ID（或稱 ClientID）是分配給應用程式/使用者的唯一識別碼。它用於使用 OAuth (Auth 2.0) 對客戶端和伺服器進行身份驗證。

要取得 Google 用戶端 ID，請開啟 Google Cloud Console，然後啟動一個新專案。在本教程中，我們將專案命名為“GoogleReact Sign-In”，但您可以選擇您喜歡的任何名稱。

建立專案後，導覽至「API 與服務」選單中的「憑證」部分。在這裡，您將找到一個儀表板，您目前的專案名稱應顯示在左上角，靠近 Google Cloud 標誌。

現在，在建立憑證之前，讓我們前往 OAuth 同意畫面來設定同意畫面。

設定 Google 登入同意畫面。

同意螢幕，顧名思義，是一個要求使用者透過外部或第三方庫登入的頁面。此彈出視窗通知使用者他們將離開應用程式的根頁面並授予對第三方頁面的存取權。下面顯示的 Google 登入同意畫面範例

簡單來說，當您使用 OAuth 2.0 授權時，您的應用程式會要求使用者使用其 Google 帳戶授權一個或多個存取範圍。存取範圍包括您的應用程式被授權存取或在使用者帳戶上執行的任何資訊或活動。

要為您的 React 應用程式設定 Google 同意頁面，請導覽至 Google Cloud Console 左側選單上的「OAuth 同意畫面」標籤。

進入此選項卡後，選擇“外部”，這是唯一允許的選項，除非您使用的是經過 Google 驗證的公司或應用程序，然後點擊“建立”按鈕以產生您的同意畫面。

接下來，在同一頁下，提供您的申請名稱和電子郵件地址，以接收專案狀態的更新。

您現在可以將剩餘的需求和選項留空，但如果您有可用的詳細信息，您可以在此階段添加它們。

您暫時可以跳過剩餘的註冊部分。只需向下滾動每個部分，點擊“儲存”，然後完成後返回儀表板。

設計 OAuth 同意頁面後，我們必須先發布應用程序，然後再進行試驗或確保身份驗證有效。預設情況下，其狀態為“測試”，發布後，將移至生產環境。

將應用程式標記為「正在生產」後，擁有 Google 帳戶的所有人都可以存取該應用程式。

產生您的網路用戶端 ID。

現在，我們將返回憑證選項以存取您可以建立 Web 用戶端 ID 的頁面。
在螢幕上，選擇頁面頂部的 CREATE CREDENTIALS，然後按一下 OAuth 用戶端 ID。

您將被要求選擇應用程式類型，如下所示。如果您按照以下步驟進行 React，請選擇 Web 應用程式（我們正在使用 Google 用戶端 ID 進行 Web 操作）。

接下來，我們將為我們的客戶端 ID 選擇一個名稱，以標識或指定指向單一應用程式的特定 ID 鏈接，將使用此名稱。為了區分 Web、iOS 和 Android ID，我們可以在它們的命名約定中新增「Web ID」、「Android ID」、「iOS ID」等：

接下來，我們將介紹兩種類型的 URL：授權的 JavaScript 來源和授權的重定向 URL。

「授權的 JavaScript 來源 URL」是您的應用程式登入的 URL。對於 React 開發人員來說，它是 localhost (localhost:3000) 或您託管的 URL（如果您託管了您的應用程式）。

「授權重新導向 URL」是 Google 在您成功登入使用者後將使用者帶回的連結。例如，您可以將他們返回到原始連結或將他們重定向到其他連結。您需要在此處新增 URL。

將以下 URL 新增至授權的 javaScript 來源和授權的重定向 URL：分別為 http://localhost:3000 和 http://localhost：

要建立網路用戶端 ID，您需要按一下「建立」按鈕。您將返回主頁，您可以在其中查看新建立的憑證。若要複製新的 Web 用戶端 ID，請點選複製圖示。

現在我們已經成功建立了 Web 用戶端 ID，您將進入我們的 React 應用程式並將您的客戶端 ID 新增到 .env 檔案中。