AWS 入門

建立 React 應用程式

使用 AWS Amplify 建立簡單的 Web 應用程式

單元 3:新增身份驗證

在本單元中,您將使用 Amplify CLI 和程式庫來設定應用程式,並新增身份驗證。

簡介

您將新增的下一個功能是身份驗證。在本單元中,您將學習如何利用受管使用者身份服務 Amazon Cognito 透過 Amplify CLI 和程式庫對使用者進行身份驗證。

您還將學習如何使用 Amplify UI 元件程式庫來建立整個使用者身份驗證流程,僅用幾行程式碼即可允許使用者進行註冊、登入和重置密碼操作。

您將學到的內容

  • 安裝 Amplify 程式庫
  • 建立和部署身份驗證服務
  • 設定您的 React 應用以納入身份驗證功能

主要概念

Amplify 程式庫 – Amplify 程式庫讓您可以透過 Web 或行動應用程式與 AWS 服務進行互動。

身份驗證 – 在軟體中,身份驗證是使用身份驗證服務或 API 驗證和管理使用者身份的過程。

 完成時間

10 分鐘

 使用的服務

實作

  • 安裝 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
    Front End Sign In Screen Module 3

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

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

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

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

結論

現在,您已經使用幾行程式碼將使用者身份驗證功能新增到了您的應用程式中! 在下一個單元中,您將學習如何為應用程式新增 API。

這個單元對您是否有幫助?

感謝您
請告訴我們您喜歡的部分。
抱歉,讓您失望
是有內容過時、令人困擾,或不準確嗎? 請提供意見回饋,協助我們改進此教學課程。

新增 GraphQL