如何在React和Express應用中設置新的Google Auth

>本文演示瞭如何將新的Google登錄按鈕集成到React.js和Express.js應用程序中。 與不棄用的JavaScript庫相比，使用Google的Identity Service SDK使用了更新的“使用Google登錄”按鈕，提供了簡化且更安全的身份驗證體驗。 此改進的方法包括諸如用於帳戶選擇的個人資料圖片預覽和一個點擊登錄的功能。 >>

密鑰功能：

• 簡化的Google Auth：本指南簡化了新的Google登錄按鈕在React和Express應用程序中的集成，強調了易於使用和安全性增強功能。 >
>逐步實現：>文章提供了詳細的演練，涵蓋了從生成Google客戶端ID到秘密到對客戶端和服務器側面處理身份驗證的所有步驟。為了清楚
• ，包括代碼片段。 完整的解決方案：
教程提供了指向服務器和客戶端實現的完整源代碼的鏈接。
設置Google憑據：

>

Google Cloud Console：

訪問Google Cloud Console。
1. 新項目：
創建一個新項目（例如，
2. ）。 > connect-google-auth-2024 oauth同意屏幕：
配置OAuth同意屏幕，提供應用程序詳細信息（名稱，電子郵件，徽標）。 切記在部署時用您的實際域替換佔位符uris。
3. > 憑據：
使用“ Web Application”類型創建OAuth 2.0客戶端ID。 添加
4. 和作為授權的重定向URI（稍後用您的生產域替換）。 http://localhost>http://localhost:3000>下載憑據：
>下載或複制客戶ID和秘密。

> React App Setup：

>使用創建React App或Vite創建React應用程序。安裝：

@react-oauth/google Express Server設置：

npm install @react-oauth/google

創建服務器文件夾並安裝以下軟件包：

>使用

和

配置

npm install express cors dotenv google-auth-library jsonwebtoken nodemon

腳本。 用您的

>和package.json。 startdev>客戶端實現（react）：nodemon>

使用@react-oauth/google庫的GoogleLogin組件。 使用react-router-dom實施路由。 創建用於著陸，註冊，登錄和家庭頁面的組件。 自定義掛鉤（useFetch）處理對Express Server的API調用以進行身份​​驗證。 >

>服務器端實現（Express）： Express Server使用>驗證Google令牌。 它包括

和

路由，以處理React應用程序的身份驗證請求。 JWT用於會話管理。 對於無效令牌和其他問題，實施了錯誤處理。 google-auth-library> /signup/login附加說明：

> >本文涵蓋了創建一個自定義的Google登錄按鈕，以獲得更好的品牌。 >

一擊登錄被解釋和實現。

> 討論了
• 令牌刷新機制。
>
• >用於管理用戶詳細信息和處理錯誤的最佳實踐。
提供了與其他身份驗證方法的比較。
• >
• >此修訂後的響應維護原始圖像順序和格式，同時顯著提高了信息的清晰度和組織。 它將冗長的原始文本凝結成適合重寫文章的更簡潔，更可讀的格式。

以上是如何在React和Express應用中設置新的Google Auth的詳細內容。更多資訊請關注PHP中文網其他相關文章！