Nozioni di base su AWS

Realizza un'applicazione React full-stack

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.

Panoramica

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 di Amplify UI 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.

Obiettivi

In questo modulo completerai le seguenti operazioni:
  • Installazione di librerie Amplify
  • Creazione e distribuzione di un servizio di autenticazione
  • Configurazione dell'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 per il completamento

10 minuti

 Servizi utilizzati

Implementazione

  • Per il nostro progetto, avremo bisogno di due librerie Amplify. La libreria aws-amplify principale contiene tutte le API lato cliente per interagire con i vari servizi AWS con cui lavoreremo mentre la libreria @aws-amplify/ui-react contiene componenti IU 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 logo from "./logo.svg";
    import "@aws-amplify/ui-react/styles.css";
    import {
      withAuthenticator,
      Button,
      Heading,
      Image,
      View,
      Card,
    } from "@aws-amplify/ui-react";
    
    function App({ signOut }) {
      return (
        <View className="App">
          <Card>
            <Image src={logo} className="App-logo" alt="logo" />
            <Heading level={1}>We now have Auth!</Heading>
          </Card>
          <Button onClick={signOut}>Sign Out</Button>
        </View>
      );
    }
    
    export default withAuthenticator(App);

    In questo codice, 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 aggiunto un pulsante Esci che consente agli utenti di disconnettersi.

  • Attendi il completamento dell’implementazione delle risorse, quindi esegui l'app per visualizzare il nuovo flusso di autenticazione che protegge l'app:

    npm start

    Qui puoi provare a registrarti e riceverai un codice di verifica alla tua e-mail. Usa questo codice per accedere all'app. Una volta effettuato l'accesso, dovresti vedere un pulsante Esci, che ti disconnette e riavvia il flusso di autenticazione.

  • A questo punto, dobbiamo configurare il processo di compilazione di Amplify per aggiungere il back-end come parte del flusso di lavoro di implementazione continua. Dalla finestra del terminale esegui:

    amplify console
    ? Which site do you want to open? AWS console

    Verrà aperta la console Amplify. Dal pannello di navigazione, scegli Impostazioni app > Crea impostazioni e modifica la sezione in modo da aggiungere la sezione di back-end (righe 2-7 nel codice seguente) al file amplify.yml. Dopo aver apportato le modifiche, scegli Salva.

    version: 1
    backend:
      phases:
        build:
          commands:
            - '# Execute Amplify CLI with the helper script'
            - amplifyPush --simple
    frontend:
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            - yarn run build
      artifacts:
        baseDirectory: build
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*

    Scorri verso il basso fino a Crea impostazioni immagine e scegli Modifica. Seleziona il menu a discesa Aggiungi sostituzione della versione del pacchetto e seleziona Amplify CLI. L'impostazione predefinita dovrebbe essere la versione più recente, come mostrato nell'immagine.

    Quindi, aggiorna il ramo front-end in modo che punti all'ambiente di back-end appena creato. Sotto il nome del ramo, scegli Modifica, quindi punta il ramo principale verso il back-end di staging appena creato. Scegli Salva.

    Se viene visualizzato il messaggio Configura un ruolo di servizio..., segui le istruzioni fornite prima di continuare a configurare e assegnare un ruolo di servizio alla tua app.

  • Ora torna alla finestra del terminale locale e implementa le modifiche su GitHub per iniziare una nuova build nella console Amplify:

    git add .
    git commit -m "added auth"
    git push origin main
    

Conclusioni

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

Questa pagina è stata utile?

Aggiunta di API e database