编程语言
首页 > 编程语言> > 如何在 React JS 中连接 Firebase Auth 和 Firestore 数据库

如何在 React JS 中连接 Firebase Auth 和 Firestore 数据库

作者:互联网

第 1 步:

在仪表板上,单击“恢复数据库”。

然后,您将看到此弹出窗口。选择所需的模式,然后单击下一步,但在本文中,我将使用生产模式。

 

接下来,选择您的 Firestore 位置。我将使用 nam5(美国)。选择您的并单击启用。

 

步骤 2 :

之后,将出现此页面。导航到“规则”。

 

您将看到以下规则:

rules_version = '2';
Service Cloud.firestore { match /databases/{database}/Documents { match /{document=**} {
 

 allow read, write: if false;
    }
  }
}

将上述规则更改为:

rules_version = '2';
Service Cloud.Firestore { match /databases/{database}/Documents { match /{document=**} {
 

 allow read, write: if request.auth != null;
    }
  }
}

第 3 步:

我假设您已经创建了“firebase-config.js”文件。在下面的代码中,您将看到我从“firebase/firestore”导入了“getFirestore”,然后我创建并导出了一个名为“db”的变量。

从“Firebase/app”导入 { initializeApp };
从“firebase/auth”导入 { getAuth };
从“Firebase/Firestore”导入 { getFirestore };
TODO:为要使用的 Firebase 产品
添加 SDK const firebaseConfig = { ............
.............
 .........................
 .........................
 .........................
};
Initialize Firebaseexport const app = initializeApp(firebaseConfig
);
export const auth = getAuth(app);
export const db = getFirestore(app)

第 4 步:

在您的注册组件上,从 firebase/firestore 导入文档 setDoc,然后导入“db”,即您在上面从 firebase-config 创建和导出的变量

从“firebase/firestore”导入 { doc, setDoc };
从  “../firebase-config”;

第五步:(最后一步)

在注册组合的“handleSubmit”函数中,在“try/then”块内创建一个变量。你可以随心所欲地命名它,但我将使用“userId”作为示例,并为其分配一个值Response.user.uid

const [fullName, setFullName] = useState<string>(“”);
 const [email, setEmail] = useState<string>(“”);
 const [password, setPassword] = useState<string>(“”);
 const [dateOfBirth, setDateOfBirth] = useState<string>(“”)
 const [userName, setUsername] = useState<string>(“”);


const handlesubmit = () => {
 createUserWithEmailAndPassword(auth, email, password)
 .then(async (response) => {
 const userid = response.用户。UID;
 setTimeout(() => {
 navigate('/Homepage'); }, 3000);

 try { await setDoc(doc(db, “users”, userid), {

 fullName: fullName, username: userName,
 email: email, dateOfBirth: dateOfBirth,


 }); }
捕获 (e) {
 控制台。错误(“添加文档时出错:”, e);
 }
 })
 。catch((错误) => {
 控制台。日志(错误)
                }
            });
    };

总之,在 React JS 中集成 Firebase Auth 和 Firestore 数据库使开发人员能够构建安全高效的 Web 应用程序。按照本文中概述的步骤操作,您可以无缝连接 Firebase 身份验证和 Firestore,从而打造卓越的用户体验。利用 Firebase 身份验证和实时数据库功能的强大功能来创建安全、响应迅速且动态的网络应用。

标签:JavaScript,编程,handleSubmit
来源: