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><br />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><br />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><br />`ampify-react-application`dov'è il nome dell'app.<br />Quando l'app è stata creata con successo, vedrai il messaggio:<pre>Success! Created amplify-react-application</pre><br />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><br />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><br />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*.<br />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><br />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.<br />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.)<br />L'interfaccia utente frontend dovrebbe richiedere le credenziali di accesso e fornire un'opzione per creare un account.<br />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)