开始使用 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
    Front End Sign In Screen Module 3

    您可以在此尝试注册,然后自动登录。登录后,您应该会看到一个注销按钮,该按钮会将用户注销并重新开始身份验证流。

  • 将更改部署到真实环境中

    将更改部署到 GitHub,以在 Amplify 控制台中启动一个新的构建:

    git add .
    git commit -m “added auth”
    git push origin master
    

结论

您现在已使用几行代码将用户身份验证添加到您的应用程序中! 在下一个模块中,我们将添加 API 到您的应用程序中。

此模块有帮助吗?

谢谢
请告知我们您喜欢什么。
很抱歉让您失望了
是否存在过时、令人困惑或不准确的内容? 请向我们提供反馈,帮助我们改进本教程。

添加 GraphQL