實作

• 安裝 Amplify 程式庫

  我們的專案將需要 2 個 Amplify 程式庫。主要 aws-amplify 程式庫包含用於與我們將使用的各種 AWS 服務進行互動的所有用戶端 API，而@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 下面新增以下程式碼：

  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 元件，該元件將呈現「登出」按鈕。
  

• 在本機執行應用程式

  接下來，執行應用程式以查看保護該應用程式的新身份驗證流程：
  

  npm start

  

  在這裡，您可以嘗試進行註冊，然後自動登入。登入後，您應該會看到一個「登出」按鈕，該按鈕將讓使用者登出，並重新開始身份驗證流程。

• 將變更部署到實際使用的環境

  將變更部署到 GitHub 以在 Amplify 主控台中啟動新的建置：

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