強(qiáng)大的用戶身份驗(yàn)證對(duì)於應(yīng)用程序安全至關(guān)重要。從頭開始構(gòu)建此功能是耗時(shí)且複雜的，從而增加了安全漏洞的風(fēng)險(xiǎn)。 Firebase大大簡(jiǎn)化了此過程，為用戶身份管理提供了簡(jiǎn)化的方法。本教程演示瞭如何使用Firebase V9的模塊化API實(shí)施用戶註冊(cè)，驗(yàn)證和身份驗(yàn)證。

該教程假設(shè)熟悉React，React鉤子和Firebase V8。您需要安裝一個(gè)Google帳戶和Node.js。

目錄

• 設(shè)置firebase
• 項(xiàng)目設(shè)置
• 火基整合
• 用戶註冊(cè)
• 用戶狀態(tài)管理（REACT上下文API）
• 電子郵件驗(yàn)證
• 個(gè)人資料頁面
• 私人路線保護(hù)
• 登錄功能
• 概括
• 進(jìn)一步閱讀

設(shè)置firebase

1. 登錄您的Google帳戶並訪問Firebase Console。
2. 創(chuàng)建一個(gè)新的Firebase項(xiàng)目（例如“ firebase-user-reg-auth”）。您可以跳過Google Analytics（本教程）。
3. 導(dǎo)航到Firebase控制臺(tái)側(cè)邊欄中的身份驗(yàn)證部分。
4. 啟用電子郵件/密碼身份驗(yàn)證。

項(xiàng)目設(shè)置

克隆啟動(dòng)器存儲(chǔ)庫：

 git克隆-b啟動(dòng)器https://github.com/tammibriggs/firebase_user_auth.git
CD FIREBASE_USER_AUTH
NPM安裝

這包括package.json中的firebase v9。運(yùn)行npm start啟動(dòng)應(yīng)用程序。

火基整合

1. 在Firebase控制臺(tái)中，獲取項(xiàng)目的Web配置對(duì)象。
2. 在您的React應(yīng)用程序的src目錄中創(chuàng)建firebase.js 。
3. 導(dǎo)入必要的模塊：

 // src/firebase.js
從'firebase/app'導(dǎo)入{initializeapp};
從'firebase/auth'導(dǎo)入{getauth};

4. 粘貼您的firebaseconfig對(duì)象並初始化firebase：

 // src/firebase.js
const firebaseconfig = { / *您的config在此處 * /};
const app = initizeApp（firebaseconfig）;
const auth = getauth（app）;
導(dǎo)出{auth};

用戶註冊(cè)

Register.js組件使用createUserWithEmailAndPassword （firebase v9）。密碼驗(yàn)證可確保匹配密碼。註冊(cè)功能處理用戶創(chuàng)建和錯(cuò)誤處理。表格的onSubmit事件觸發(fā)註冊(cè)過程。

用戶狀態(tài)管理（REACT上下文API）

AuthContext.js文件提供了用於管理用戶狀態(tài)的上下文。 AuthProvider共享用戶狀態(tài)， useAuthValue訪問它。 App.js用AuthProvider包裝組件，並且onAuthStateChanged更新用戶狀態(tài)。

電子郵件驗(yàn)證

註冊(cè)後， sendEmailVerification發(fā)送驗(yàn)證電子郵件。用戶被重定向到A /verify-email頁面。此頁面使用useEffect和狀態(tài)管理以防止限制速率，以60秒的冷卻方式顯示用戶的電子郵件和“重新啟動(dòng)電子郵件”按鈕。經(jīng)過驗(yàn)證後，用戶將自動(dòng)重定向到其配置文件。

個(gè)人資料頁面

Profile.js組件使用useAuthValue顯示用戶電子郵件和驗(yàn)證狀態(tài)。 “簽名”按鈕利用Firebase的signOut 。

私人路線保護(hù)

PrivateRoute.js限制了對(duì)配置文件頁面的訪問，以使用Redirect驗(yàn)證用戶。 App.js路由已更新以將PrivateRoute用於配置文件組件。

登錄功能

Login.js組件使用signInWithEmailAndPassword 。登錄後，它將檢查電子郵件驗(yàn)證並在必要時(shí)重定向到/verify-email ，開始60秒的倒計(jì)時(shí)。

概括

本教程提供了使用Firebase V9在React應(yīng)用程序中實(shí)現(xiàn)安全用戶身份驗(yàn)證的綜合指南。使用Firebase的使用可顯著簡(jiǎn)化該過程，從而提供強(qiáng)大而有效的解決方案。

進(jìn)一步閱讀

• Firebase身份驗(yàn)證文檔
• React上下文API文檔

以上是用firebase並進(jìn)行反應(yīng)的用戶註冊(cè)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！