在深度第2部分中反应本地身份验证-真实世界的身份验证流程

这篇文章将涵盖：

• 经生产测试的认证流程概述。
• 使用第1部分中的现有应用程序实现Auth流。
• 连接Redux以处理应用程序UI和某些身份验证状态。
• 使用AWS Amplify处理Cognito用户会话。

我们将使用的导航库是React Navigation，但是这些模式基本上可以转换为任何导航库。

验证流程

如果正确实施身份验证流程，那么在您的应用程序开发之初就获得正确的身份验证流程可以节省大量时间。 这篇文章的目的是向您展示如何建立端到端的一些基本而又真实的身份验证，以及如何以一种在现实世界中有意义的方式将其连接到应用程序的UI中。

让我们快速浏览一个非常常见且有用的导航/身份验证流程。

在示例1中，LoggedInNavContainer和LoggedOutNavContainer包装在单个条目组件中。 这两个组件可以是任何类型的导航（抽屉，堆栈，标签），但是在我们的示例中，我们将要构建， LoggedInNavContainer将是Stack，而LoggedOutNavContainer将是标签。

在示例1中，我们基本上是检查一个loggedIn布尔值（来自您选择的状态管理），并根据其登录状态呈现一个完全不同的组件。

这两个主要组件通常本身就是导航组件。

当然，还有其他一些情况需要考虑，例如“帐户锁定” ， “重置密码”或“忘记密码” ，尽管我们可以在带有组件/ UI的if语句中添加更多逻辑来处理此问题，或者处理这些来自LoggedOutNavContainer导航器中。

另一个选择是使Main条目本身成为一个Navigator，以处理整个auth状态并进行相应的导航。 让我们更详细地看一下另一种方法：

在此示例中，有一个主要的导航组件（React Navigation的Think Stack Navigator），具有一个Login / Auth堆栈（或同一堆栈中的Login / Auth路由），以及一个“ Application”堆栈，该堆栈仅可访问/推送到如果用户已登录。

我们将重点关注第一个示例，因为它实现了选项卡，并且在实践中不像仅使用StackNavigators的第二组路由那样容易推论。

入门

首先，您应该跟着第一部分进行准备，或者准备好该项目，或者克隆该项目并配置src/aws-exports.js所有字段，以匹配来自AWS控制台的信息。

您还可以通过以下屏幕录像来创建第1部分：

在此文件中，我们有一个基本的登录表单，带有一个按钮，该按钮将向redux分配一个身份验证操作，然后该按钮将调用Auth.signIn ，并将用户名和密码输入到表单中。

我们还有一个模式，仅当用户成功使用用户名和密码登录但尚未通过两因素身份验证进行身份验证时，才会显示该模式。 用户成功登录后，我们将显示模式并允许用户输入其验证码。

auth / SignUp.js

此组件与“登录”组件相似，只是我们还有几个额外的字段可用于捕获用户的电话号码和电子邮件地址。 我们还具有模式功能，因此，当用户创建帐户时，我们通过两步验证进行验证，向用户发送短信并确认其短信，并在确认用户注册后隐藏模式。

auth / Tabs.js

在这里，我们进入SignIn和SignUp屏幕，并将其实现到TabNavigator中。

登录状态

用户登录后， Nav组件将呈现在我们的App.js文件中。

Nav是一个StackNavigator，目前只有一个Home路由。 本地路线将具有一个注销按钮，以演示注销功能。

在Nav目录中，创建Nav.js和Home.js，复制链接文件的内容。

就是这样，您应该能够运行该项目并在项目中具有有效的Auth流！

结论

该项目在某些方面仍然缺乏，例如，如果用户由于某种原因未收到他们的signUp确认代码，我们将无法使用现有的配置调用Amplify resendSignUp方法（尽管这样做很容易加）。

我还想对UI进行一些小的更改。

总的来说，这是我在当前正在生产的一些大型项目中看到的流程类型，并且我自己也实现了这种类型的流程，因此，如果您要使用以下方法构建下一个应用程序，则此项目是一个不错的开始像Amazon Cognito这样的可靠提供商提供的真实身份验证流程！

我叫Nader Dabit。 我是AWS Mobile的开发人员倡导者，负责AppSync和Amplify等项目，也是React Native Training的创始人。

如果您喜欢React和React Native，请查看我们的播客-React Native Radioon Devchat.tv。

另外，请查阅我的书《 React Native in Action》（可从Manning Publications获得）

如果您喜欢这篇文章，请推荐并分享！ 谢谢你的时间

图片由Amazon Web Services，Inc提供