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

  • 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
    Front End Sign In Screen Module 3

    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
    

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?

Grazie
Facci sapere cosa ti è piaciuto.
Chiudi
Spiacenti di non esserti stati d'aiuto
C'è qualcosa di obsoleto, ambiguo o approssimativo? Aiutaci a migliorare questo tutorial con il tuo feedback.
Chiudi

Aggiunta di GraphQL