筆記: React 實作第三方登入：Google

前陣子因為工作串接 Google reCAPTCHA Enterprise ，為了測試有辦了 Google 的雲端服務，現在買東西登入也懶得打一堆有得沒得，相當欣賞這種一個按鈕就解決的登入方式，所以來實作看看。

首先看文件引入 <script src="https://accounts.google.com/gsi/client" async defer></script>

在 Next.js 用 GCP 相關服務都有點麻煩，剛好看到有套件就用了

npm install react-google-login

再來設定 GCP OAuth 相關

在 GCP 左邊 API 與服務選擇 OAuth 同意畫面進行設置，測試時記得加上 localhost ，上正式或測試環境時也要加上 domain。

API 與服務 > 憑證建立憑證，建立OAuth 用戶端 ID，授權的 JavaScript 來源也要加上包含 localhost 等 domain ，重新導向 URI 是登入成功之後會導轉的頁面，然後可以把 JSON 下載下來可以看到 client_id ，需要設置在登入登出按鈕的組件上。

最後就運用 Next.js 完成設定與部屬。

取得的個資會在 profileObj 裡，進行 Hook 設置跟登入導轉(也可以直接寫在 GCP 的重新導向URI)

其他有練習使用 Tailwind CSS 建立 Context 部屬 Vercel。

參考資料：

筆記