开始使用 AWS
构建 React 应用程序
使用 AWS Amplify 创建简单的 Web 应用程序
模块 3:添加身份验证
在此模块中,您将使用 Amplify CLI 和库配置和添加身份验证到您的应用程序中。
简介
您将添加的下一个功能是身份验证。在此模块中,您将了解如何使用 Amplify CLI 和库对用户进行身份验证,以利用托管用户身份服务 Amazon Cognito。
您还将了解如何使用 Amplify UI 组件库支撑整个用户身份验证流,从而使用户只需几行代码即可注册、登录和重置密码。
您将学到的内容
- 安装 Amplify 库
- 创建和部署身份验证服务
- 配置您的 React 应用程序以包括身份验证
重要概念
Amplify 库 – 您可以使用 Amplify 库从 Web 应用程序或移动应用程序中与 AWS 服务互动。
身份验证 – 在软件中,身份验证是使用身份验证服务或 API 验证和管理用户身份的过程。
完成时间
10 分钟
使用的服务
实施
-
安装 Amplify 库
我们的项目将需要 2 个 Amplify 库。主 aws-amplify library 包含所有的客户端侧 API,用于与我们使用的各种 AWS 服务交互,而 @aws-amplify/ui-react 库包含框架特定 UI 组件。请在项目根中安装这些库。
npm install aws-amplify @aws-amplify/ui-react
-
创建身份验证服务
要创建身份验证服务,请使用 Amplify CLI:
amplify add auth ? Do you want to use the default authentication and security configuration? Default configuration ? How do you want users to be able to sign in? Username ? Do you want to configure advanced settings? No, I am done.
-
部署身份验证服务
现在,已在本地配置身份验证服务,我们可以通过运行 Amplify push 命令来部署该服务:
amplify push --y
-
使用 Amplify 资源配置 React 项目
CLI 已创建并将继续更新位于我们的项目 src 目录中称为 aws-exports.js 的文件。我们将使用此文件让 React 项目了解可用于我们的 Amplify 项目中的不同 AWS 资源。
要使用这些资源配置我们的应用程序,打开 src/index.js 并在上次导入下添加以下代码:
import Amplify from 'aws-amplify'; import config from './aws-exports'; Amplify.configure(config);
-
在 App.js 中添加身份验证流
接下来,打开 src/App.js 并使用以下代码进行更新:
import React from 'react'; import logo from './logo.svg'; import './App.css'; import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react' function App() { return ( <div className="App"> <header> <img src={logo} className="App-logo" alt="logo" /> <h1>We now have Auth!</h1> </header> <AmplifySignOut /> </div> ); } export default withAuthenticator(App);
在此组件中,我们使用了 withAuthenticator 组件。此组件将支撑整个用户身份验证流,从而使用户能够注册、登录、重置密码和确认登录以进行多重验证 (MFA)。我们还使用了 AmplifySignOut 组件,该组件将提供 Sign Out(注销)按钮。
-
在本地运行应用程序
接下来,运行应用程序以查看保护应用程序的新身份验证流:
npm start
您可以在此尝试注册,然后自动登录。登录后,您应该会看到一个注销按钮,该按钮会将用户注销并重新开始身份验证流。
-
将更改部署到真实环境中
将更改部署到 GitHub,以在 Amplify 控制台中启动一个新的构建:
git add . git commit -m “added auth” git push origin master