在NUXT.JS中构建端到端加密聊天应用程序：消息和加密
#javascript #typescript #appwrite #nuxt

加密涉及将信息转换为秘密代码，以保护信息的精确细节，包括可读性的人，包括网络犯罪分子。

本文讨论了在nuxt.js中构建端到端的加密聊天应用程序，使用Appwrite提供数据库服务和Cryptr来加密交换的数据。

github

查看完整的源代码here。

先决条件

了解本文需要以下内容：

  • node.js的安装
  • 打字稿的基本知识
  • Docker installation
  • 一个appwrite实例;查看此article关于如何设置实例

此外，本文是关于在nuxt.js中构建端到端加密聊天应用程序的两部分系列的第二部分。可以找到讨论设置和身份验证的文章的第一部分。

设置AppWrite的数据库

Appwrite是一款端到端的后端服务器，可提供帮助抽象执行后端任务的某些复杂性的服务。 AppWrite提供的服务之一是数据库服务，它使我们可以存储用户数据并根据需要获取它们。

创建数据库

要在AppWrite中创建数据库，请在菜单选项卡中单击数据库选项，我们可以在其中添加数据库。

Creating a Database

创建一个集合

AppWrite的数据库服务还提供了其数据库中的收集服务。这些收藏充当文件的容器。要创建一个集合，请选择所需的数据库，我们可以从中添加一个新集合。

Creating a collection

创建新集合后，系统将我们重定向到设置页面，我们可以从中设置使用数据库服务所需的权限 - 空的权限字段将阻止客户端的客户访问文档。在我们的情况下，我们将添加任何词的角色访问权限，以允许对收藏的任何角色访问。如下图所示：

collection settings

创建属性

我们的文档将具有一些特殊的属性。为了创建它们，我们将导航到属性部分。在我们的情况下，我们将选择新字符串属性。

collection settings

然后，我们可以创建一个属性ID ，名称为256位。

attributes setting

将聊天应用与AppWrite的数据库连接

我们将首先在init.js和appwrite的database方法中导入AppWrite的SDK。如下：

import {client} from '~/init'
import { Databases, ID } from 'appwrite';

我们还将使用message，databaseMessages和password更新data属性，以保存用户和数据库的消息，例如：

data: () => ({
    message: '',
    databaseMessages: ['']
  }),

然后，我们将使用AppWrite的导入的databases方法创建databases的实例，该方法将客户端作为参数。

const databases = new Databases(client);

数据库中的列出消息
然后，我们可以在methods属性中创建一个listMessages函数：

listMessages: async function (){
      let promise = await databases.listDocuments('database ID', 'collection ID');
      this.databaseMessages = promise.documents.map(document =>  document.message)
    },

上面的代码块中的listMessages函数如下：

  • listDocuments方法从AppWrite访问databases方法以列出数据库中的所有文档。
  • listDocuments方法将database ID和collection ID作为参数。这些ID可以在AppWrite仪表板上找到。
  • AppWrite数据库中返回的消息存储在this.databaseMessages中。

将消息发送到数据库

以上之后，我们可以通过在方法中创建一个名为sendMessage的函数来将消息发送到AppWrite数据库：

sendMessage: async function(){
  try {
    await databases.createDocument('632754bf9b28a3d032e7', '632754dccfc24bf0505e', ID.unique(), {'message': this.message})
    alert('message sent')
    this.message = '';
    this.listMessages()
  } catch(e){
    console.log(e)
  }
}

上面的代码块中的sendMessage功能如下：

  • createDocument方法访问AppWrite的databases方法，以在数据库中创建一个新文档。此方法以database ID，collection ID，appwrite的ID.unique()方法和属性值为参数。在这种情况下，我们的属性值是message，我们在AppWrite Admin仪表板上创建了该值。
  • 警报确认成功发送消息。
  • 清除消息输入字段，我们调用listMessages()函数，该功能列出了发送到AppWrite数据库的所有消息

接下来，我们将更新我们的聊天应用程序界面，以渲染所有发送到数据库的消息如下：

<section v-for="databaseMessage in databaseMessages" :key="JSON.stringify(databaseMessage)">
  <p :class="databaseMessage ? ['bg-lightest-blue', 'pa2', 'mv2', 'br3', 'w-60', 'f7'] : ''">
    {{databaseMessage}}
  </p>
</section>

使用Vue S v-for指令从数据库中返回的消息上方的代码块。然后用{{databaseMessage}}渲染单个消息。

将所有内容放在一起，我们在此阶段的Pages/Chat.vue文件将看起来像： Follow this GitHub Gist 。

发送我们的第一条消息后，我们的应用程序接口也将看起来像以下内容：

first message interface

加密

我们将使用Cryptr，这是Node.js的加密和解密AES-256-GCM模块来加密我们将在聊天应用程序上发送的消息。

通过在项目中安装它来开始使用它：

npm install cryptr

然后，我们可以导入cryptr库，并在我们的Pages/Chat.vue中创建一个新实例，其中包含我们的cryptr秘密密钥的新cryptr实例。

const Cryptr = require('cryptr');
const cryptr = new Cryptr('*****');

我们想加密我们要发送的消息并恢复解密版本，因为加密消息对读者没有太大意义。为此，我们将通过以下内容修改sendMessage功能：

sendMessage: async function(){
  const encryptedMessage = cryptr.encrypt(this.message)
  try {
    await databases.createDocument('632754bf9b28a3d032e7', '632754dccfc24bf0505e', ID.unique(), {'message': encryptedMessage})

  } catch(e){
    console.log(e)
  }
}

上面的代码块执行以下操作：

  • 我们在CRYPTR库上访问encrypt方法，并将发送的消息传递为参数。此encrypt方法加密消息并将其存储在encryptedMessage变量中。
  • 然后将encryptedMessage中的数据传递给AppWrite以保存在数据库中。

如果我们检查了我们的AppWrite数据库，我们将看到您的状态。我们还将以人类可读格式看到第一条消息（Hello）。

human readable format message

由于人类可以理解加密的消息，因此我们需要在聊天界面中将消息渲染回消息之前解密该消息。为此，我们将在Pages/Chat.vue中编辑listMessages函数，就像：

listMessages: async function (){
  let promise = await databases.listDocuments('632754bf9b28a3d032e7', '632754dccfc24bf0505e');
  this.databaseMessages = promise.documents.map(document =>  cryptr.decrypt(document.message))
},

我们使用databases.listDocuments方法在上面代码中从AppWrite的数据库中获取了消息。然后，我们使用Cryptr的decrypt方法来转换我们从数据库获取的加密消息。

在这一点上，我们已经成功创建了一个带有端到端加密的聊天应用程序，以确保对话安全。
我们的应用程序看起来如下：

final application

资源