👑 使用 React Hooks、Firebase 和 Seald 创建安全的聊天应用程序 🔐

大家好！👋

今天，让我们来探索一个使用React Hooks、Firebase和一个名为Seald的新包开发的小型聊天应用程序！🔥

本文的目的是向您介绍 Seald SDK，以及这个小软件包如何在应用程序安全方面发挥重要作用！

非结构化数据的端到端加密可能非常复杂，且重新开发成本高昂，但这对于保护应用程序处理的机密数据至关重要。借助Seald SDK，我们可以对您的应用程序存储、生成或接收的数据进行端到端加密。

让我们以聊天应用程序为例！💪

我们的聊天应用程序的结构🧰

以上是我们在 React 中开发的聊天应用程序的演示，它具有端到端加密系统，包括以下几个功能：

🟢 创建房间
🟢 添加/删除房间用户
🟢 修改房间
🟢 注册/登录
🟢 用户状态
🟢 加密和解密消息

使用的主要工具是：

Firebase是一个现成的框架，它允许我们创建一个持久的身份验证系统，将加密的消息保存在数据库中，并在用户发布新消息时立即接收它们。

React将成为我们的前端库，用于执行和设计应用程序中的每个状态的简单视图。

Seald是我们将用来为聊天带来端到端加密🔐的交钥匙库。

授权系统👨‍💻

我们的聊天应用程序只有 3 个带有身份验证的路由。注册、登录和房间管理。

我们定义是否允许经过身份验证的用户使用路由。

密码推导🔏

通常，我们会以明文形式向 Firebase 发送密码，然后 Firebase 会使用SCRYPT等安全函数推导密码，以避免将其保存在数据库中。

在我们的例子中，我们希望阻止 Firebase 读取密码，即使它没有被存储，因为我们将使用它来保护Seald 身份端到端（甚至来自 Firebase）。

为了做到这一点，我们只需执行与 Firebase 相同的操作，但在将其提供给 Firebase之前：我们使用安全函数（ SCRYPT ）导出密码，然后将其用作密码。

注册👤

为了在此应用程序中创建用户，包含 3 个字段的简单表单就足够了：

代码没什么复杂的。我们要求 Firebase 通过用户提供的电子邮件和密码创建身份验证。

并添加一些有关用户的信息，如姓名和照片 URL。

然后，我们添加 Seald 应用层来创建我们未来的
加密消息。

登录👤

然后，登录。一个经典的表单（电子邮件/密码）用于访问房间并与其他用户聊天。

与注册时相同。我们检索用户的Firebase 身份验证及其Seald 帐户。

房间👨‍👩‍👦‍👦

有趣的部分就来自于此。

在这个应用程序上，可以与另一个用户进行一对一聊天，也可以与自定义房间中的一组用户聊天。

创建房间🧸

我们一起来详细看看这段代码：

• 首先，我们将表单数据发送到Firebase。需要提供房间名称和选定的用户。

• 然后我们使用Seald SDK创建一个加密会话。这将允许加密和解密该房间的消息。

• 最后，我们要发送第一条加密消息来欢迎这个房间的用户。

发送加密消息🔏

现在，我们开始聊天吧！不过，请记住，我们需要对消息进行端到端加密。

在创建每条消息之前，我们需要检查是否有经过身份验证的 Seald 会话。如果没有，请使用 SDK 🔒 创建该会话。

然后，会话允许我们加密一个字符串，这就是我们的消息。

Alice 👩 向Bob 👨发送了一条消息

"Hello my friend"

encrypt我们将上述消息的方法称为：

该消息将成为

"{\"sessionId\":\"NazDAYyuRw2lDKS0VaianA\",\"data\":\"8RwaOppCD3uIJVFv2LoP3XGXpomj0xsMv4qmMVy30Vdqor2w0+DVCXu3j13PEyN2KfJm6SiSrWDRMDziiiOUjQ==\"}"

现在，Bob👨（以及房间的其他用户）需要解密 Alice👩 的消息。我们该怎么做呢？

解密消息🔐

现在我们知道如何发送加密消息，让我们看看如何立即检索消息并为其他用户解密。

我们使用该value事件来读取事件发生时已存在的消息。此方法在监听器连接时触发一次，之后每次数据（包括子对象）发生变化时都会再次触发。

了解有关使用 Firebase 读取和写入数据的更多信息📂

每次添加消息时，我们都会检索消息列表。因此，会显示一条加密消息，但现在我们需要能够解密它：

Bob👨实际上看到的是：

"{\"sessionId\":\"NazDAYyuRw2lDKS0VaianA\",\"data\":\"8RwaOppCD3uIJVFv2LoP3XGXpomj0xsMv4qmMVy30Vdqor2w0+DVCXu3j13PEyN2KfJm6SiSrWDRMDziiiOUjQ==\"}"

decrypt我们将上述加密消息的方法称为：

Bob👨现在将看到：

"Hello my friend"

我们现在可以使用端到端加密系统进行实时聊天💪

注意：要使用 Seald SDK，请访问seald.io。

瞧

干杯🍻🍻🍻

如果您喜欢这篇文章，您可以在Twitter或dev.to上关注我，我会定期发布与 HTML、CSS 和 JavaScript 相关的简短技巧。

🤝 JavaScript 中的 Promise.allSettled() 与 Promise.all() 🍭

Victor de la Fouchardière ・ 2020 年 8 月 16 日 ・ 阅读 2 分钟

#javascript #node #webdev #beginners

📦 GitHub 个人资料：展示最新开发文章的正确方法 + 福利🎁

Victor de la Fouchardière ・ 2020 年 8 月 5 日 ・ 阅读 4 分钟

#github #markdown #showdev #生产力