凤凰彩票

技术介绍|以简单的方式向应用程序添加身份验证

这篇文章收集了IPFS部队地区的翻译。版权属于原作者。我公司的明确目标是使分散的应用程序更容易使用。

然而,这些工具不仅适用于分散应用。

传统的应用程序开发人员可以使用SimpleID以很少的开销向应用程序快速添加身份验证和存储。

看看这有多简单。

让我们从一个示例项目开始,因为在大多数情况下,开发人员将向现有项目添加身份验证。

为此,我们可以使用我构建的一个简单的待办应用程序来比较Redux和reactn。

先决条件:对react有一定的了解,因为示例项目节点和NPM安装在您的计算机上的React中。文本编辑器启动:步骤1:克隆待办事项应用程序存储库:GitClonehttps://GitHub . com/石墨-文档/到达-待办事项-示例。Git步骤2:复制到新克隆的目录:CdReach-Todo-示例步骤3:安装依赖项npminstall步骤4:安装SimpleIDnpmisimpleid-js-sdk好了,现在我们已经安装好了所有的东西,一切都准备好了。

让我们谈谈我们将在这里做什么。

项目本身是一个简单的todo应用程序,具有基本的状态管理。

这个东西没有模型,所以请事先原谅我。

在我们编辑任何内容之前,您最好确保应用程序正常工作,因此请继续运行并启动npmstart。

如您所见,没有身份验证和数据持久性。

刷新,您的更新将丢失。

我们将在几分钟内解决这个问题。

我将解释作为服务提供商的身份是多么简单。

它源于对分散应用程序的需求,以获得更好的身份验证体验。

SimpleID可以免费使用。随着你的成长,会有一些可控的空。

立即可用,您可以访问以下非集中式协议:以太网协议块堆栈(EthereumIPFSBlockstack),但您可能并不关心这一点。

您可能只关心添加身份验证和轻松存储数据。

为此,我们将使用SimpleID的块堆栈模块。

那么,让我们开始吧。

请访问https://app.simpleid.xyz注册免费帐户。

这里有一个有趣的提示:我们为自己的内部应用程序使用SimpleID,所以当您注册时,您实际上是在用加密密钥对创建一个非集中式身份。

注册后,您应该会看到验证码。

检查您的电子邮件,并从SimpleID中找到开发人员验证电子邮件。

这封邮件只是为了确保你是正确的人。

点击此链接后,您的帐户将被验证,您可以登录。

您将看到以下界面:开始时,您需要做一些事情。

首先,单击“编辑模块”按钮。

这将带您进入选择界面,在这里您可以选择应用程序中要使用的协议。

正如我提到的,我们将在本教程中使用块堆栈。

在身份验证模块屏幕上,选择块堆栈。

然后切换到存储模块,并在那里选择块堆栈。

单击右下角的保存按钮选择模块。

现在,单击左上角的菜单图标,选择帐户返回帐户页面。

在这里,您只需要创建一个项目。

给你的项目一个名称和一个网址(这应该是你的用户最终访问应用程序的基本网址)。

完成后,单击“创建项目”,您的“帐户”页面应该类似于:我们需要做的最后一件事是获取项目的devID和apiKey。

为此,单击视图项目,您将访问这两个项目的内容。

将它们记录在某个地方,因为您将在Todo应用程序中使用它们。

现在,让我们开始编码。

当使用SimpleID时,您需要参考SimpleID文档。

你可以在这里找到它。

在您最喜欢的文本编辑器中打开待办事项应用程序。

项目结构如下:我们将只添加一个新的认证组件,从而使事情变得非常简单。

因此,让我们创建一个名为Auth.js的新组件,并将其嵌套在components文件夹下。

在Auth.js文件中,欢迎您创建类组件或函数组件。

为了简单起见(和快速的状态变化,不涉及反应挂钩),我将创建一个类组件。

但是我们希望这个组件做什么呢?我们希望它能处理注册和登录请求,对吗?这意味着我们的组件需要能够有条件地呈现注册页面或登录页面,这取决于用户想要做什么。

让我们建造它。

到目前为止,还没有发生什么,但是我们现在已经建立了框架。

我们在看什么?首先,注意我们从“React”导入REACT。

这是todo应用程序中使用的全局状态管理框架,因此需要从该模块导入react,以便利用全局状态(我们稍后将使用全局状态)。

接下来,我们在类组件的构造函数中创建了本地状态。

这是因为我们需要验证选择状态来告诉应用程序是显示注册页面还是登录页面。

您可以看到这个逻辑是如何放置在RETURN语句的开始和结束分隔符之间的。

现在,我们需要做两件事:1。允许用户在注册和登录之间切换。

2.为用户填写输入字段。

让我们现在开始吧:我们这里不做太多花哨的事情。

我们在条件呈现语句上面添加了两个按钮,一个用于注册,另一个用于登录。

在这些按钮上,有一个点击处理程序,它更新本地状态以显示适当的屏幕。

如果用户单击注册按钮,将显示注册表单。

如果用户单击登录按钮,将显示登录表单。

我们还在条件语句下的相应位置添加了两个表。

登记表需要用户名、密码和电子邮件。

另一个登录表单只需要用户名和密码。

现在,我们需要为这些表单中的每一个提供一个表单提交处理程序,这是SimpleID可以放置的地方。

我们将很快为这项工作准备文件,所以我们开始吧。

我们在这里做了什么?我们导入createUserAccount,并从之前安装到此todo应用程序中的simpleid-js-sdk登录。

我们添加了一个配置对象来存储我们的项目信息(包括您希望在生产项目中保护的apiKey和devId)。

我们在handleSubmit函数中构建了一个表单提交处理程序。

我们在createUserAccount中使用了登录函数,在handleSubmit函数中使用了simpleid-js-sdk。

最后,我们连接表单,以便在提交表单时可以调用handleSubmit函数。

假设一切顺利,您现在可以尝试观察控制台输出。

你能行的!

我们仍然需要将Auth.js组件添加到App.js主文件中。

我们现在将这样做,但是只有当用户没有登录时,它才被允许有条件地呈现它。

因此,首先在src文件夹下找到index.js文件。

您将看到带有嵌套对象的setGlobal函数。

将对象更新为这样:isLoggedIn状态是我们将在应用程序文件中使用的。

让我们转到文件并将其重构为一个类组件来处理我们的条件逻辑。

您最终会得到这样的结果,我们将它重构为一个类组件,以确保在全局状态改变时强制执行条件逻辑。

类似地,我们可以使用钩子来实现这一点,但是我们试图更关注于验证解决方案而不是反应。

我们做的另一件事是添加全局状态变量isLoggedIn,并检查它是否为真。

如果为真,将显示应用程序。

如果没有,将显示身份验证页面。

现在,您可以尝试注册该功能。

用户名必须全部小写,但请尝试并确保查看控制台。

您应该会看到这样的情况:您可能看不到409条错误消息。

由用户创建的用户名实际上已经被添加到一批其他名字中,这些名字将被广播到比特币区块链并在那里注册。

这让您的用户能够真正控制自己的身份。

但是,由于我用于开发的注册服务商的知识产权地址限制,我现在已经限制了我可以注册的最大用户数量。

但是我离题了。

这里的重要信息是控制台中的最后一条消息。

它是一个带有消息“用户会话已创建”的对象

现在,您对这个用户会话的处理完全取决于您,但是返回的数据是您可以用来确保用户实际登录的数据。

所以一个快速简单的检查方法是这样做:首先,将setGlobal添加到文件顶部的React的import语句中:importReact,{setGlobal}from’reactn’;这允许您从应用程序的任何位置设置全局状态然后,在handleSubmit函数的注册逻辑中,您可以这样做:当然,您需要对在account.body中返回的用户会话数据执行某些操作,但您可以通过多种方式处理该问题,我将由您决定。因此,一个快速简单的检查方法是这样做的:首先,将setGlobal添加到文件顶部的reach的import语句中:importreach,{setglobal}来自“reach”;这允许您从应用程序中的任何位置设置全局状态。然后,在handleSubmit函数的注册逻辑中,您可以这样做:当然,您需要对account.body中返回的用户会话数据执行一些操作,但是您可以用多种方式处理这个问题,我将让您来决定。

我们最不需要检查的是登录是否有效。

因此,假设您记得您输入的凭据,您可以使用它们。

如果没有,请重新注册并记住它们。)刷新页面并让我们登录(记住,您将希望保留您获得的用户会话数据,因此刷新不会消除用户会话,但这只是一个简单的教程)。

打开控制台,以便您可以看到发生了什么。

您应该会看到:现在,您可以添加一个检查登录功能来正确更新全局状态,就像注册时一样。

看起来是这样的:类似地,您将希望保持用户会话的持久性,以便您的用户在页面刷新时不会注销,但是这超出了本教程的范围。

现在,您已经在没有任何数据库配置或管理的情况下向应用程序添加了身份验证。

您使用户注册和登录变得很容易。

您已经为他们提供了一个分散的身份(如果您浏览返回的用户会话对象,您可以为您的用户提供许多有用的信息)。

你用很少的代码做了很多工作。

SimpleID的最终目标是简化身份验证。

去集中化应用程序、传统应用程序、物联网项目、服务器端项目等。

我们希望任何语言的开发人员都能轻松使用它。

You may also like...

发表评论