使用 Firebase 检测用户名的唯一性并做出反应 js答案

【问题标题】：detect the uniqueness of the usernames with Firebase and react js使用 Firebase 检测用户名的唯一性并做出反应 js
【发布时间】：2019-05-10 00:45:58
【问题描述】：

在注册表中我有三个字段

用户名
电子邮件ID
密码

当用户注册时，我需要验证用户名是否已经被占用。我正在发送电子邮件和密码以进行身份验证并使用 username 更新配置文件。如何检查用户名是否被使用？

firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password).then(createdUser => {
                    console.log(createdUser);
                    createdUser.user.updateProfile({
                        username: this.state.username
})

【问题讨论】：

标签： reactjs firebase firebase-authentication

【解决方案1】：

首先，请注意User 没有username 属性。因此，将具有username 属性的对象传递给updateProfile() 方法将不起作用。您需要传递具有displayName 和photoURL 属性的对象。

如果您想将 用户名 与您的用户相关联，您可以做的很好（这很常见）是在 Firestore 数据库中拥有一个包含以下文档的集合每个用户。然后将此用户名值存储在此文档中。

然后，要检查“用户名没有被占用”，可以在创建用户之前查询集合，如下：

var db = firebase.firestore();
var usersRef = db.collection('users');
usersRef.where('username', '==', this.state.username).get()
  .then(snapshot => {
    if (snapshot.empty) {
          return firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password);
    } else {
          throw new Error('username already taken');
    } 
  })
  .then(createdUser => {
       console.log(createdUser);
       //Create the user doc in the users collection
       db.collection('users').doc(createdUser.user.uid).set({username: this.state.username});
  })
  .catch(err => {
    console.log('Error: ', err);
  });

【讨论】：

有什么建议可以为此设置 Firestore 数据库规则吗？我看到的问题是需要允许未经身份验证的用户访问users 集合……这不是安全问题吗？也许有办法只允许访问users/xyz 文档的用户名属性？ ...即使这对我来说也不是最佳实践，让公众有机会查看您的所有用户名。
@Tadej 是的，documentation 中有一个安全规则的例子：看第二个代码 sn -p （“另一个常见的模式是确保用户只能读写他们自己的数据”）。
对，我知道这条规则......但是如果你使用它，usersRef.where('username', '==', this.state.username).get() 将不起作用，因为用户没有uid，因为他还没有注册（他只有在下一个 then() 语句中获取 UID）...所以 firestore 会抛出有关权限的异常。
@Tadej 哦，我明白你的意思了！ :-) 如果您想检查username是否存在，但您希望允许用户仅阅读他们自己的个人资料，您应该使用答案中提供的另一种方式。例如，您可以使用 Callable Cloud Function 来查询 users 集合。或者，如果您不介意用户名是公开的，您可以使用仅包含用户名的文档创建另一个集合。
对，我有同样的两个想法。我认为使用函数将是最干净的方式。不确定它是否会起作用，但会尝试并报告（所有代码都需要包装在事务中，因此希望使用函数不会导致问题）。

【解决方案2】：

您好，您可以在用户名字段上有一个 onChange 事件，该事件调用 api 以了解用户名是否已经存在。然后在 onSubmit 中，您可以验证是否未使用用户名，您可以提交调用。

【讨论】：