实施

• 安装 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