Nozioni di base su AWS

Creazione di un'applicazione React

Crea una semplice applicazione Web utilizzando AWS Amplify

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

  • 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
  • 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.
  • Ora che il servizio di autenticazione è stato configurato localmente, può essere distribuito eseguendo il comando push di Amplify:

    amplify push --y
  • 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);
    
  • 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.

  • 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.

  • Distribuisci le modifiche su GitHub per avviare una nuova build nella console Amplify:

    git add .
    git commit -m “added auth”
    git push origin master
    

Conclusione

Hai appena aggiunto l'autenticazione utente alla tua app con poche righe di codice! Nel prossimo modulo aggiungeremo un'API alla tua app.

Questo modulo è stato utile?

Aggiunta di GraphQL