Nozioni di base su AWS
Creazione di un'applicazione React
Crea una semplice applicazione Web utilizzando AWS Amplify

aggiungi autenticazione
Modulo 3: Aggiunta di un'autenticazione
In questo modulo verrà utilizzata l'interfaccia a riga di comando (CLI) di Amplify per configurare e aggiungere un'autenticazione alla tua app.
Introduzione
La prossima funzionalità che verrà aggiunta sarà l'autenticazione. In questo modulo imparerai come autenticare un utente con l'interfaccia a riga di comando (CLI) di Amplify e le librerie sfruttando Amazon Cognito, un servizio di identità utente gestito.
Imparerai anche come usare la libreria di componenti UI di Amplify per eseguire lo scaffolding di un intero flusso di autenticazione dell'utente, consentendo agli utenti di registrarsi, accedere e ripristinare la password con poche righe di codice.
Avrai modo di approfondire i seguenti aspetti
- Installazione di librerie Amplify
- Creazione e distribuzione di un servizio di autenticazione
- Configurare l'app React per includere l'autenticazione
Concetti chiave
Librerie Amplify: le librerie di Amplify consentono di interagire con i servizi AWS da un'applicazione Web o mobile.
Autenticazione: nei software l'autenticazione è il processo di verifica e gestione dell'identità di un utente usando un servizio di autenticazione o API.
Tempo richiesto per il completamento
10 minuti
Servizi utilizzati
Implementazione
-
Installazione delle librerie Amplify
Avremo bisogno di due librerie Amplify per il nostro progetto. La libreria aws-amplify contiene tutte le API lato cliente per interagire con i vari servizi AWS con cui lavoreremo e la libreria @aws-amplify/ui-react contiene componenti UI specifici del framework. Installa queste librerie nella cartella root del progetto.
npm install aws-amplify @aws-amplify/ui-react
-
Creazione del servizio di autenticazione
Per creare il servizio di autenticazione, usa l'interfaccia a riga di comando (CLI) di Amplify:
amplify add auth ? Do you want to use the default authentication and security configuration? Default configuration ? How do you want users to be able to sign in? Username ? Do you want to configure advanced settings? No, I am done.
-
Distribuzione del servizio di autenticazione
Ora che il servizio di autenticazione è stato configurato localmente, può essere distribuito eseguendo il comando push di Amplify:
amplify push --y
-
Configurazione del progetto React con le risorse Amplify
L'interfaccia a riga di comando (CLI) ha creato e continuerà ad aggiornare un file chiamato aws-exports.js che si trova nella directory src del nostro progetto. Useremo questo file per fare in modo che il progetto React conosca le diverse risorse AWS disponibili nel nostro progetto Amplify.
Per configurare la nostra app con queste risorse, apri src/index.js e aggiungi il seguente codice all'ultima importazione:
import Amplify from 'aws-amplify'; import config from './aws-exports'; Amplify.configure(config);
-
Aggiungere il flusso di autenticazione in App.js
Successivamente, apri src/App.js e aggiornalo con il seguente codice:
import React from 'react'; import logo from './logo.svg'; import './App.css'; import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react' function App() { return ( <div className="App"> <header> <img src={logo} className="App-logo" alt="logo" /> <h1>We now have Auth!</h1> </header> <AmplifySignOut /> </div> ); } export default withAuthenticator(App);
In questo componente abbiamo usato il componente withAuthenticator. Questo componente eseguirà lo scaffolding di un intero flusso di autenticazione dell'utente consentendo agli utenti di registrarsi, accedere, ripristinare la password e confermare l'accesso per l'autenticazione a più fattori (MFA). Abbiamo anche usato il componente AmplifySignOut che fornirà il pulsante Disconnetti.
-
Eseguire l'app localmente
Successivamente, esegui l'app per vedere il nuovo flusso di autenticazione che protegge l'app:
npm start
Qui puoi provare la registrazione che poi ti farà accedere automaticamente. Una volta effettuato l'accesso, dovresti vedere un pulsante di disconnessione per disconnettere l'utente e riavviare il flusso di autenticazione.
-
Distribuire le modifiche nell'ambiente reale
Distribuisci le modifiche su GitHub per avviare una nuova build nella console Amplify:
git add . git commit -m “added auth” git push origin master