FirebaseUI - 在创建用户之前验证 displayName

Question

我正在使用 firebaseui-web-react。在注册流程中，我想在创建用户之前验证用户提供的 displayName。特别是，我想确保 displayName 是唯一的。

我知道如何使用 Firestore 验证唯一用户名。我有一个包含 displayName 字段的 public user 集合。我知道如何查看 displayName 是否已被使用，查询如下：

const snapshot = await store
  .collection('user')
  .where('displayName', '==', displayNameFormValue)
  .get()

return snapshot.empty

我想在创建用户之前验证 displayName。我想避免创建并立即删除用户。我想在 FirebaseUI 发送创建用户的请求之前验证 displayName。

然而，FirebaseUI 只提供像 signInSuccessWithAuthResult 这样的回调。这些回调仅在用户创建后 运行。如果我使用这些回调来验证 displayName，我将不得不追溯删除创建的用户（如果他们的 displayName 被占用）。我想在创建用户之前验证用户的 displayName 以避免删除。

如何在创建 Firebase 用户之前使用上面显示的查询来验证 displayName？如何在利用预制 FirebaseUI 组件和上下文的同时支持唯一的显示名称？如何将表单验证与 FirebaseUI 集成？

Answer 1

正如documentation中所说：

Currently, FirebaseUI does not offer customization out of the box. However, the HTML around the widget is not affected by it so you can display everything you want around the widget container.

所以你没有办法添加pre-hook, validation等。但是，你可以尝试使用xhr-intercept or fetch-intercept拦截请求，并在有创建用户的请求时做任何你想做的事.如果 displayName 不唯一并通过 JS 显示错误，您可以取消请求。

Answer 2

由于firebaseUI无法自定义，可能的解决方案可以。

1. 后端解决方案 - 订阅通知任何数据更改的 firebase hooks。您可以在其中检查唯一的显示名称。

2. 前端解决方案 - 设计与 firebase UI plugins 集成的自定义 Auth UI 屏幕。在将数据发送到 firebase 之前，您可以在这里完全控制数据。