摘要： SimpleID的终极目标是简化身份验证，在这里读懂简单的使用SimpleID操作–》

本文由IPFS原力区收集译制，版权所属原作者

我的公司明确的目标是使去中心化的应用程序更易于使用。然而，这些工具不仅适用于去中心化的应用程序。传统的应用程序开发人员可以利用SimpleID快速向应用程序添加身份验证和存储，而且开销很小。看看它有多容易。

让我们从一个示例项目开始，因为在大多数情况下，开发人员将为现有项目添加身份验证。为此，我们可以使用我构建的一个简单的to-do应用程序来比较Redux和reactn。

前提条件：

对react有一定的了解，因为示例项目在React中

节点和NPM安装在您的计算机上

文本编辑器

开始：

第一步：克隆todo 应用程序存储库：

第二步：复制到新克隆的目录：

cd reactn-todo-example

第三步：安装依赖项

npm install

第四步：安装SimpleID

npm i simpleid-js-sdk

好了，现在我们已经安装好了所有东西，万事俱备。让我们来谈谈我们在这里要做的事情。项目本身是一个简单的todo应用程序，具有基本的状态管理。这个东西没有模型，所以请提前原谅我。在我们编辑任何内容之前，您最好先保证应用程序正常工作，所以请继续运行并启动npm start。

如您所见，没有身份验证，也没有数据持久性。刷新，您的更新将丢失。我们将在几分钟内解决这个问题。我将解释如何：

SimpleID是作为服务提供者的身份。它源于对去中心化应用程序的需求，以获得更好的身份验证体验。SimpleID可以免费使用，随着您的成长会有一些可控的空间。立即可用，您可以访问以下去中心化的协议：

Ethereum

IPFS

Blockstack

但你可能不关心这一点。您可能只关心添加身份验证和轻松存储数据。为此，我们将使用SimpleID的Blockstack模块。那么，让我们开始吧。

请访问https://app.simpleid.xyz，注册一个免费帐户。这里有一个有趣的提示：我们将SimpleID用于我们自己的内部应用程序，所以当你注册时，你实际上是在用加密密钥对创建一个去中心化的身份。

注册后，您应该会看到验证码。去查看您的电子邮件，并从SimpleID查找开发人员验证电子邮件。这封电子邮件只是确保您是对的人。点击该链接后，您的帐户就会得到验证，您就可以登陆了。您会看到如下界面：

开始时，您需要做几件事。首先，单击“编辑模块”按钮。这将带您进入选择界面，您可以在其中选择要在应用程序中使用的协议。正如我所提到的，我们将在本教程中使用Blockstack。在Authentication Modules屏幕上，选择Blockstack。然后切换到存储模块并在那里选择Blockstack。点击右下方的Save按钮，就可以进行模块选择了。

现在，单击左上角的菜单图标并选择Account，返回到Account页面。在这里，您只需要创建一个项目。给你的项目一个名称和一个URL（这应该是你的用户最终从中访问应用的基本URL）。

完成后，单击“创建项目”，您的“帐户”页面应类似于：

我们需要做的最后一件事是获取项目的devID和apiKey。为此，单击View Project，您将访问这两个项目内容。将它们记录在某个地方，因为您将在Todo应用程序中使用它们。

现在，让我们开始编码。在使用SimpleID时，您需要查阅SimpleID文档。你可以在这里找到。在您喜欢的文本编辑器中打开您的todo应用程序。项目结构如下所示：

我们将只添加一个新组件进行身份验证，从而使事情变得非常简单。所以，让我们创建一个名为Auth.js的新组件，并将其嵌套在components文件夹下。在Auth.js文件中，欢迎您创建类组件或函数组件。为了简单（以及快速的状态更改而不涉及反应挂钩），我将创建一个类组件。但是我们希望这个组件做什么呢？我们希望它能够处理注册和登录请求，对吗？

这意味着我们的组件需要能够有条件地呈现注册页面或登录页面，具体取决于用户想要做什么。让我们构建它。

目前还没有发生太多事情，但我们现在已经构建了框架。那么我们到底在看什么？首先，注意我们从“reactn”导入React。这是todo应用程序中使用的全局状态管理框架，因此，为了利用全局状态（我们稍后将使用全局状态），需要从该模块导入react。

接下来，我们在类组件的构造函数中创建了本地状态。这是因为我们需要authSelection状态来告诉应用程序是显示注册页面还是登录页面。您可以看到这个逻辑是如何在RETURN语句的开始和结束分隔符之间放置的。

现在，我们需要做两件事：

1.允许用户在注册和登录之间切换。2.为用户填写输入字段。

让我们现在开始:

我们这里没有做太多花哨的事情。我们在条件呈现语句上方添加了两个按钮，一个用于注册，另一个用于登录。在这些按钮上，有一个单击处理程序，它将更新本地状态以显示适当的屏幕。如果用户单击“注册”按钮，则会显示注册表单。如果用户单击“登录”按钮，则会显示登录表单。

我们还在条件语句下在各自的位置添加了两个表格。一张注册表单，需要用户名，密码和电子邮件。另一种登录表单，只需要用户名和密码。

现在，我们需要为这些表单中的每一个提供表单提交处理程序，这是可以放入SimpleID的地方。我们马上就要为这个工作准备文档了，所以我们开始吧。

我们在这做了什么？我们导入createUserAccount并从之前安装到这个todo应用程序的simpleid-js-sdk中登录。我们添加了一个配置对象来存放我们的项目信息(包括您希望在生产项目中保护的apiKey和devId)。我们在handleSubmit函数中构建了一个表单提交处理程序。我们在handleSubmit函数中使用了createUserAccount和simpleid-js-sdk中的登录函数。最后，我们将表单连接起来，以便在表单提交时调用handleSubmit函数。

假设一切顺利，你现在可以尝试一下并观察控制台输出。你可以的。

我们仍然需要将Auth.js组件添加到App.js主文件中。我们现在就这样做，但是只有当用户没有登录时才让它有条件地呈现它。因此，首先在src文件夹下找到index.js文件。您将看到带有嵌套对象的setGlobal函数。更新对象，使它看起来像这样:

isLoggedIn状态是我们将在App.js文件中使用的。让我们转到该文件并将其重构为一个类组件来处理我们的条件逻辑。你最终会得到这样的结果:

我们将其重构为一个类组件，以确保在全局状态更改时强制执行条件逻辑。同样，我们也可以使用Hooks来实现这一点，但是我们试图将更多的精力放在验证解决方案上，而不是React功能上。

我们做的其他事情是我们添加了全局状态变量isLoggedIn，并检查它是否为真。如果为true，则显示应用程序。如果没有，则显示身份验证页面。

现在，您可以尝试注册功能。用户名必须全部小写，但请尝试一下，并确保查看控制台。你应该看到这样的东西:

您可能不会看到409错误消息。用户创建的用户名实际上已添加到一批其他名称中，这些名称将广播到比特币区块链并在那里注册。这使您的用户能够真正控制他们的身份。但是，由于我用于开发的注册商的IP比特币矿池地址限制，我现在已经最大限度地限制了我可以注册的用户数量。

但我离题了。这里的重要信息是控制台中的最后一条消息。它是一个带有消息“用户会话已创建”的对象。

现在，您对该用户会话的处理完全取决于您，但返回的数据是您可以用来确保用户实际登录的内容。所以一个快速简单的检查方法是这样做：

首先，将setGlobal添加到文件顶部的React的import语句中： import React, { setGlobal } from 'reactn';

这允许您从应用程序的任何位置设置全局状态然后，在handleSubmit函数的注册逻辑中，您可以这样做：

当然，您需要对在account.body中返回的用户会话数据执行某些操作，但您可以通过多种方式处理该问题，我将由您决定。我们最后要检查的是登录是否有效。因此，假设您记住输入的凭据，您可以使用这些凭证。如果没有，请重新注册并记住它们；）

刷新页面并让我们登录（记住，你会想要保留你得到的用户会话数据，所以刷新不会消除用户的会话，但这只是一个简单的教程）。打开控制台，这样你就可以看到发生了什么。你应该看到这个：

现在，您可以添加一个检查登录功能，以正确更新全局状态，就像注册时一样。它看起来像这样：

同样，您将希望持久保存用户会话，以便在页面刷新时您的用户不会注销，但这超出了本教程的范围。

您现在已经为您的应用添加了身份验证，而不需要任何数据库配置或管理。您已经让用户轻松注册并登录。您已经为他们提供了去中心化的身份（如果您浏览返回的用户会话对象，就可以为您的用户提供很多有用的信息）。您已经用很少的代码完成了很多工作。

SimpleID的终极目标是简化身份验证。去中心化应用程序、传统应用程序、物联网项目、服务器端项目等。我们希望任何语言的开发人员都可以轻松使用。

—end—

本文由IPFS原力区编译，

原文来自：medium

（