0717-7821348
新闻中心

欢乐彩app官网

您现在的位置: 首页 > 新闻中心 > 欢乐彩app官网
欢乐彩票3539-技能引谈 | 用简略的方法向应用程序增加身份验证
2019-09-15 22:13:33

本文由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,注册欢乐彩票3539-技能引谈 | 用简略的方法向应用程序增加身份验证一个免费帐户。这儿有一个风趣的提示:咱们将SimpleID用于咱们自己的内部运用程序,所以当你注册时,你实践上是在用加密密钥对创立一个去中心化的身份。

注册后,您应该会看到验证码。去查看您的电子邮件,并从SimpleID查找开发人员验证电子邮件。这封电子邮件仅仅保证您是对的人。点击该链接欢乐彩票3539-技能引谈 | 用简略的方法向应用程序增加身份验证后,您的帐户就会得到验证,您就能欢乐彩票3539-技能引谈 | 用简略的方法向应用程序增加身份验证够登陆了。您会看到如下界面:

开端时,您需求做几件事。首要,单击“修改模块”按钮。这将带您进入挑选界面,您能够在其中挑选要在运用程序中运用的协议。正如我所说到的,咱们将在本教程中运用Blockstack。在Authentication Modules屏幕上,挑选Blockstack。然后切换到存储模块并在那里挑选Blockst欢乐彩票3539-技能引谈 | 用简略的方法向应用程序增加身份验证ack。点击右下方的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地址约束,我现在现已最大极限地约束了我能够注册的用户数量。

但我离题了。这儿的重要信息是操控台中的终究一条音讯。它是一个带有音讯“用户会话已创立”的目标。

现在,您对该用户会话的处理彻底取决于您,但回来的数据是您能够用来保证用户实践登录的内容。所以一个快速简略的查看办法是这样欢乐彩票3539-技能引谈 | 用简略的方法向应用程序增加身份验证做:

首要,将setGlobal增加到文件顶部的React的import句子中: import React, { setGlobal } from 'reactn';

这答应您从运用程序的任何方位设置大局状况然后,在handleSubmit函数的注册逻辑中,您能够这样做:

当然,您需求对在account.body中回来的用户会话数据履行某些操作,但您能够经过多种方法处理该问题,我将由您决议。咱们终究要查看的是登录是否有用。因而,假定您记住输入的凭据,您能够运用这些凭据。假如没有,请从头注册并记住它们;)

改写页面并让咱们登录(记住,你会想要保存你得到的用户会话数据,所以改写不会消除用户的会话,但这仅仅一个简略的教程)。翻开操控台,这样你就能够看到发作了什么。你应该看到这个:

现在,您能够增加一个查看登录功用,以正确更新大局状况,就像注册时相同。它看起来像这样:

相同,您将期望耐久保存用户会话,以便在页面改写时您的用户不会刊出,但这超出了本教程的规模。

您现在现已为您的运用增加了身份验证,而不需求任何数据库装备或办理。您现已让用户轻松注册并登录。您现已为他们供给了去中心化的身份(假如您阅读回来的用户会话目标,就能够为您的用户供给许多有用的信息)。您现已用很少的代码完成了许多作业。

SimpleID的终极方针是简化身份验证。去中心化运用程序、传统运用程序、物联网项目、服务器端项目等。咱们期望任何言语的开发人员都能够轻松运用。

—end—

本文由IPFS原力区编译,

原文来自:medium

(作者:IPFS原力区,内容来自链得得内容敞开渠道“得得号”;本文仅代表作者观念,不代表链得得官方态度)