Autentica gli utenti delle applicazioni React esistenti utilizzando l'interfaccia utente di Amazon Cognito e Amplify AWS

Crea un pool di utenti.

Crea un pool di utenti Amazon Cognito. Configura le opzioni di accesso e i requisiti di sicurezza del pool di utenti in base al tuo caso d'uso.

Aggiungi un client per l'app.

Configura un client di app per pool di utenti. Questo client è necessario per consentire all'applicazione di interagire con il pool di utenti di Amazon Cognito.

Installare le dipendenze.

Per installare i @aws-amplify/ui-react pacchetti aws-amplify and, esegui il seguente comando dalla directory principale dell'applicazione:

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

Configura il pool di utenti.

In base all'esempio seguente, create un aws-exports.js file e salvatelo nella src cartella. Il file deve includere le seguenti informazioni:

// 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;

Importa e configura il servizio Amplify.

Aggiungi il componente Authenticator UI.

Per visualizzare il componente dell'Authenticatorinterfaccia utente, aggiungete le seguenti righe di codice al file del punto di ingresso dell'applicazione ()App.js:

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

Nota: lo snippet di codice di esempio importa il componente Authenticator UI e il file Amplify UI styles.css, necessario quando si utilizzano i temi predefiniti del componente.

Il componente Authenticator UI fornisce due valori restituiti:

Vedi il seguente componente di esempio:

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

Nota: per un App.js file di esempio, consulta la sezione Informazioni aggiuntive di questo modello.

(Facoltativo) Recupera le informazioni sulla sessione.

Dopo l'autenticazione di un utente, puoi recuperare i dati relativi alla sua sessione dal client Amplify. Ad esempio, puoi recuperare il JSON web token (JWT) dalla sessione di un utente in modo da poter autenticare le richieste dalla sua sessione a un backend. API

Guarda il seguente esempio di intestazione di richiesta che include: JWT

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