引谈 | 用简单的方式向应用程序添加身份验证

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

引谈 | 用简单的方式向应用程序添加身份验证

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

  引谈 | 用简单的方式向应用程序添加身份验证 我的公司明确的目标是使去中心化的应用程序更易于使用。然而,这些工具不仅适用于去中心化的应用程序。传统的应用程序开发人员可以利用SimpleID快速向应用程序添加身份验证和存储,而且开销很小。看看它有多容易。 让我们从一个示例项目开始,因为在大多数情况下,开发人员将为现有项目添加身份验证。为此,我们可以使用我构建的一个简单的to-do应用程序来比较Redux和reactn。 前提条件:
  • 对react有一定的了解,因为示例项目在React中
  • 节点和NPM安装在您的计算机上
  • 文本编辑器
开始: 第一步:克隆todo 应用程序存储库: Git clone https://github.com/Graphite-Docs/reactn-todo-example.git 第二步:复制到新克隆的目录: 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原力区编译, 原文链接:https://medium.com/simpleid-dev-tools/adding-authentication-to-your-app-the-easy-way-44d182055f91 引谈 | 用简单的方式向应用程序添加身份验证
【IPFS原力区】
价值观:价值 共建 共享 荣耀
 
总部位于上海,聚集基于分布式网络&存储的众多技术大咖和爱好者,深耕基于 IPFS 的商业生态建设和社区发展。
 
每周二举办“分布式存储网络”主题沙龙,聚集了众多技术大咖和 IPFS 爱好者,通过持续输出全面、精细、优质的 IPFS 咨询和技术支持,将生态中的爱好者转化为 IPFS 支持者和参与者,共建 IPFS 生态的健康发展。
引谈 | 用简单的方式向应用程序添加身份验证

本文来自https://medium.com,经授权后发布,本文观点不代表IPFSER立场,转载请联系原作者。

发表评论

登录后才能评论

联系我们

在线咨询:点击这里给我发消息

邮件:ipfsforce@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code