使用 Amazon Cognito 和 AWS Amplify UI 驗證現有的 React 應用程式使用者

建立使用者集區。

建立 Amazon Cognito 使用者集區 。設定使用者集區的登入選項和安全性需求，以符合您的使用案例。

新增應用程式用戶端。

設定使用者集區應用程式用戶端 。您的應用程式需要此用戶端，才能與 Amazon Cognito 使用者集區互動。

安裝依存項目。

若要安裝 aws-amplify和 @aws-amplify/ui-react套件，請從應用程式的根目錄執行下列命令：

npm i @aws-amplify/ui-react aws-amplify

設定使用者集區。

根據下列範例，建立aws-exports.js檔案並儲存在 src 資料夾中。檔案應包含下列資訊：

// replace the user pool region, id, and app client id details
const awsmobile = {
    "aws_project_region": "put_your_region_here",
    "aws_cognito_region": "put_your_region_here",
    "aws_user_pools_id": "put_your_user_pool_id_here",
    "aws_user_pools_web_client_id": "put_your_user_pool_app_id_here"
}

export default awsmobile;

匯入並設定 Amplify 服務。

新增驗證器使用者介面元件。

若要顯示 Authenticator UI 元件，請將以下幾行程式碼新增至應用程式的輸入點檔案 （App.js）：

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

注意：範例程式碼片段會匯入 Authenticator UI 元件和 Amplify UI style.css 檔案，這是使用元件的預先建置主題時的必要項目。

UI Authenticator 元件提供兩個傳回值：

請參閱下列範例元件：

function App() {
    return (
        <Authenticator>
            {({ signOut, user }) => (
                <div>
                    <p>Welcome {user.username}</p>
                    <button onClick={signOut}>Sign out</button>
                </div>
            )}
        </Authenticator>
    );
}

注意：如需範例App.js檔案，請參閱此模式的其他資訊區段。

（選用） 擷取工作階段資訊。

使用者經過身分驗證後，您可以從 Amplify 用戶端擷取有關其工作階段的資料。例如，您可以從使用者的工作階段擷取 JSON Web 權杖 （JWT），以便驗證從其工作階段到後端 的請求API。

請參閱下列包含 的請求標頭範例JWT：

import { fetchAuthSession } from 'aws-amplify/auth';
(await fetchAuthSession()).tokens?.idToken?.toString();