Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

# Crea un'app React utilizzando AWS Amplify e aggiungi l'autenticazione con Amazon Cognito
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito"></a>

*Rishi Singla, Amazon Web Services*

## Riepilogo
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-summary"></a>

Questo modello dimostra come utilizzare AWS Amplify per creare un'app basata su React e come aggiungere l'autenticazione al frontend utilizzando Amazon Cognito. AWS Amplify è costituito da un set di strumenti (framework open source, ambiente di sviluppo visivo, console) e servizi (app Web e hosting di siti Web statici) per accelerare lo sviluppo di app mobili e Web su AWS. 

## Prerequisiti e limitazioni
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-prereqs"></a>

**Prerequisiti**
+ Un account AWS attivo
+ [Node.js](https://nodejs.org/en/download/) e [npm](https://www.npmjs.com/get-npm) installati sul tuo computer

**Versioni del prodotto**
+ Node.js versione 10.x o successiva (per verificare la versione in uso, eseguilo `node -v` in una finestra di terminale)
+ npm versione 6.x o successiva (per verificare la versione in uso, eseguila `npm -v` in una finestra di terminale)

## Architecture
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-architecture"></a>

**Stack tecnologico Target**
+ AWS Amplify
+ Amazon Cognito

## Tools (Strumenti)
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-tools"></a>
+ [Interfaccia a riga di comando (CLI) Amplify](https://docs.amplify.aws/cli/)
+ [Amplify](https://docs.amplify.aws/lib/q/platform/react-native/) Libraries (librerie client open source)
+ [Amplify](https://docs.amplify.aws/console/) Studio (interfaccia visiva)

## Epiche
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-epics"></a>

### Installa AWS Amplify CLI
<a name="install-aws-amplify-cli"></a>


| Operazione | Description | Competenze richieste | 
| --- | --- | --- | 
| Installa la CLI Amplify. | L'Amplify CLI è una toolchain unificata per la creazione di servizi cloud AWS per la tua app React. Per installare la CLI Amplify, esegui:<pre>npm install -g @aws-amplify/cli</pre>npm ti avviserà se è disponibile una nuova versione principale. In tal caso, usa il seguente comando per aggiornare la tua versione di npm:<pre>npm install -g npm@9.8.0</pre>dove 9.8.0 si riferisce alla versione che si desidera installare. | Sviluppatore di app | 

### Crea un'app React
<a name="create-a-react-app"></a>


| Operazione | Description | Competenze richieste | 
| --- | --- | --- | 
| Crea un'app React. | Per creare una nuova app React, usa il comando:<pre>npx create-react-app amplify-react-application</pre>`ampify-react-application`dov'è il nome dell'app.Quando l'app è stata creata con successo, vedrai il messaggio:<pre>Success! Created amplify-react-application</pre>Verrà creata una directory con varie sottocartelle per l'app React. | Sviluppatore di app | 
| Avvia l'app sul tuo computer locale. | Vai alla directory `amplify-react-application` creata nel passaggio precedente ed esegui il comando:<pre>amplify-react-application% npm start</pre>Questo avvia l'app React sul tuo computer locale. | Sviluppatore di app | 

### Configurazione della CLI Amplify
<a name="configure-the-amplify-cli"></a>


| Operazione | Description | Competenze richieste | 
| --- | --- | --- | 
| Configura Amplify per connetterti al tuo account AWS. | Configura Amplify eseguendo il comando:<pre>amplify-react-application % amplify configure</pre>La CLI di Amplify ti chiede di seguire questi passaggi per configurare l'accesso al tuo account AWS:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html)Questo scenario richiede agli utenti IAM un accesso programmatico e credenziali a lungo termine, il che rappresenta un rischio per la sicurezza. Per ridurre questo rischio, si consiglia di fornire a questi utenti solo le autorizzazioni necessarie per eseguire l'attività e di rimuoverli quando non sono più necessari. Le chiavi di accesso possono essere aggiornate se necessario. Per ulteriori informazioni, consulta [Updating access keys](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html#Using_RotateAccessKey) nella *IAM User Guide*.Questi passaggi vengono visualizzati nel terminale come segue.<pre>Follow these steps to set up access to your AWS account:<br />Sign in to your AWS administrator account:<br />https://console.aws.amazon.com/<br />Press Enter to continue<br />Specify the AWS Region<br />? region:  us-east-1<br />Follow the instructions at<br />https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli<br />to complete the user creation in the AWS console<br />https://console.aws.amazon.com/iamv2/home#/users/create<br />Press Enter to continue<br />Enter the access key of the newly created user:<br />? accessKeyId:  ********************<br />? secretAccessKey:  ****************************************<br />This would update/create the AWS Profile in your local machine<br />? Profile Name:  new<br /><br />Successfully set up the new user.</pre>Per ulteriori informazioni su questi passaggi, consulta la [documentazione](https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli) nell'Amplify Dev Center. | General AWS, sviluppatore di app | 

### Inizializza Amplify
<a name="initialize-amplify"></a>


| Operazione | Description | Competenze richieste | 
| --- | --- | --- | 
| Inizializza Amplify. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | Sviluppatore di app, General AWS | 

### Aggiungi l'autenticazione al frontend
<a name="add-authentication-to-the-frontend"></a>


| Operazione | Description | Competenze richieste | 
| --- | --- | --- | 
| Aggiungere l'autenticazione. | È possibile utilizzare il `amplify add <category>` comando per aggiungere funzionalità come l'accesso utente o un'API di backend. In questo passaggio utilizzerai il comando per aggiungere l'autenticazione.Amplify fornisce un servizio di autenticazione backend con Amazon Cognito, librerie frontend e un componente dell'interfaccia utente Authenticator drop-in. Le funzionalità includono la registrazione utente, l'accesso utente, l'autenticazione a più fattori, la disconnessione utente e l'accesso senza password. Puoi anche autenticare gli utenti tramite l'integrazione con provider di identità federati come Amazon, Google e Facebook. La categoria di autenticazione Amplify si integra perfettamente con altre categorie di Amplify come API, analisi e archiviazione, in modo da poter definire regole di autorizzazione per utenti autenticati e non autenticati.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | Sviluppatore di app, General AWS | 

### Cambia il file App.js
<a name="change-the-app-js-file"></a>


| Operazione | Description | Competenze richieste | 
| --- | --- | --- | 
| Modificare il file App.js. | Nella `src` cartella, aprite e modificate il `App.js` file. Il file modificato dovrebbe avere il seguente aspetto:<pre>{  App.Js File after modifications:<br />import React from 'react';<br />import logo from './logo.svg';<br />import './App.css';<br />import { Amplify } from 'aws-amplify';<br />import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';<br />import awsconfig from './aws-exports';<br />Amplify.configure(awsconfig);<br />function App({ signOut }) {<br />  return (<br />      <div><br />      <h1>Thankyou for doing verification</h1><br />      <h2>My Content</h2><br />       <button onClick={signOut}>Sign out</button><br />    </div><br />  );<br />}<br />export default withAuthenticator(App);</pre> | Sviluppatore di app | 
| Importa pacchetti React. | Il `App.js` file importa due pacchetti React. Installa questi pacchetti usando il comando:<pre>amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react</pre> | Sviluppatore di app | 

### Avvia l'app React e controlla l'autenticazione
<a name="launch-the-react-app-and-check-authentication"></a>


| Operazione | Description | Competenze richieste | 
| --- | --- | --- | 
| Avvia l'app. | Avvia l'app React sul tuo computer locale:<pre>amplify-react-application1 % npm start</pre> | Sviluppatore di app, General AWS | 
| Verifica l'autenticazione. | Controlla se l'app richiede i parametri di autenticazione. (Nel nostro esempio, abbiamo configurato l'e-mail come metodo di accesso.)L'interfaccia utente frontend dovrebbe richiedere le credenziali di accesso e fornire un'opzione per creare un account.Puoi anche configurare il processo di compilazione di Amplify per aggiungere il backend come parte di un flusso di lavoro di distribuzione continua. Tuttavia, questo modello non copre questa opzione. | Sviluppatore di app, General AWS | 

## Risorse correlate
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-resources"></a>
+ [Guida introduttiva](https://docs.npmjs.com/getting-started) (documentazione npm)
+ [Crea un account AWS autonomo](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) (documentazione AWS Account Management) 
+ [Documentazione AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html)
+ [Documentazione Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html)