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
在這裡,您可以嘗試進行註冊,然後自動登入。登入後,您應該會看到一個「登出」按鈕,該按鈕將讓使用者登出,並重新開始身份驗證流程。
-
將變更部署到實際使用的環境
將變更部署到 GitHub 以在 Amplify 主控台中啟動新的建置:
git add . git commit -m “added auth” git push origin master