npm i @aws-amplify/ui-react aws-amplify| Sviluppatore di app | | 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:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)
// replace the user pool region, id, and app client id details| Sviluppatore di app | | Importa e configura il servizio Amplify. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) | Sviluppatore di app | | Aggiungi il componente Authenticator UI. | Per visualizzare il componente dell'`Authenticator`interfaccia utente, aggiungete le seguenti righe di codice al file del punto di ingresso dell'applicazione ()`App.js`:
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;
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';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:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)Vedi il seguente componente di esempio:function App() {
return (
{({ signOut, user }) => (
Welcome {user.username}
)}
);
}Per un `App.js` file di esempio, consultate la sezione [Informazioni aggiuntive](#authenticate-react-app-users-cognito-amplify-ui-additional) di questo modello. | Sviluppatore di app |
| (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 token web JSON (JWT) dalla sessione di un utente in modo da poter autenticare le richieste dalla sua sessione a un'API di backend.Guarda il seguente esempio di intestazione di richiesta che include un JWT:import { fetchAuthSession } from 'aws-amplify/auth';
(await fetchAuthSession()).tokens?.idToken?.toString(); | Sviluppatore di app |
## risoluzione dei problemi
| Problema | Soluzione |
| --- | --- |
| I nuovi utenti non possono iscriversi all'applicazione. | Come segue, assicurati che il tuo pool di utenti Amazon Cognito sia configurato per consentire agli utenti di registrarsi per far parte del pool di utenti:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) |
| Il componente di autenticazione ha smesso di funzionare dopo l'aggiornamento dalla v5 alla v6. | La `Auth` categoria è passata a un approccio funzionale e a parametri denominati in Amplify v6. Ora devi importare il funzionale APIs direttamente dal percorso. `aws-amplify/auth` Per ulteriori informazioni, consulta [Migrare dalla v5 alla v6](https://docs.amplify.aws/gen1/react/build-a-backend/auth/auth-migration-guide/) nella documentazione di Amplify. |
## Risorse correlate
+ [Guida introduttiva ad Amazon Cognito (sito Web](https://aws.amazon.com/cognito/getting-started/))AWS
+ [Crea una nuova app React](https://reactjs.org/docs/create-a-new-react-app.html) (documentazione React)
+ [Cos'è Amazon Cognito?](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) (documentazione di Amazon Cognito)
+ [Libreria Amplify UI (documentazione Amplify](https://ui.docs.amplify.aws/))
## Informazioni aggiuntive
Il `App.js` file deve contenere il seguente codice:
```
import './App.css';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
import { fetchAuthSession } from 'aws-amplify/auth';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
Amplify.configure({ ...awsExports });
let token = (await fetchAuthSession()).tokens?.idToken?.toString();
function App() {
return (
Welcome {user.username}
Your token is: {token}