Implementazione

• Creazione di un pool di utenti Amazon Cognito e integrazione di un'app con il tuo pool di utenti

  Amazon Cognito offre due meccanismi diversi per l'autenticazione degli utenti. Puoi utilizzare i pool di utenti Cognito per aggiungere la funzionalità di registrazione e accesso alla tua applicazione oppure i pool di identità Cognito per autenticare gli utenti tramite i provider di identità social (come Facebook, Twitter o Amazon) con le soluzioni SAML oppure utilizzando il tuo sistema di identità personale. Per questo modulo, utilizzerai un pool di utenti come back-end per le pagine di registrazione e accesso fornite.
  

  1. Nella console Amazon Cognito, scegli Crea pool di utenti.
  2. Nella pagina Configura esperienza di accesso, nella sezione Opzioni di accesso al pool di utenti di Cognito, seleziona Nome utente. Mantieni le impostazioni predefinite per le altre impostazioni, ad esempio i tipi di provider, e non selezionare alcun requisito per il nome utente. Scegli Avanti.
  3. Nella pagina Configura i requisiti di sicurezza, mantieni la modalità Policy della password come predefinita di Cognito. Puoi scegliere di configurare l'autenticazione a più fattori (MFA) o scegliere Nessuna MFA e mantenere altre configurazioni come predefinite. Scegli Avanti.
  4. Nella pagina Configura esperienza di registrazione, mantieni tutto come predefinito. Scegli Avanti.
  5. Nella pagina Configura il recapito dei messaggi, per Provider di posta elettronica, verifica che sia selezionata l'opzione Invia e-mail con Amazon SES - Consigliato. Nel campo dell'indirizzo e-mail DA, seleziona un indirizzo e-mail che hai verificato con Amazon SES, seguendo le istruzioni in Verifica dell'identità di un indirizzo e-mail nella Guida per gli sviluppatori di Amazon Simple Email Service.
     Nota: se non vedi l'indirizzo email verificato nel menu a discesa, assicurati di aver creato un indirizzo email verificato nella stessa regione selezionata all'inizio del tutorial.
  6. Nella pagina Integra la tua app, assegna un nome al tuo pool di utenti: WildRydes . In Client app iniziale, assegna un nome al client dell'app: WildRydesWebApp e mantieni le altre impostazioni come predefinite.
  7. Nella pagina Rivedi e crea, scegli Crea pool di utenti.
  8. Nella pagina Pool di utenti, seleziona il nome del pool di utenti per visualizzarne le informazioni dettagliate. Copia l’ID del pool di utenti nella sezione Panoramica del pool di utenti e salvalo in una posizione sicura sul tuo computer locale. 
  9. Seleziona la scheda Integrazione app e copia e salva l'ID client nella sezione App client e analisi del pool di utenti appena creato.
• Aggiornamento del file di configurazione del sito Web

  Il file js/config.js contiene le impostazioni per l'ID del pool di utenti, l'ID del client applicazioni e la Regione. Aggiorna questo file con le impostazioni del pool di utenti e l'applicazione creata nelle fasi precedenti e caricalo di nuovo sul bucket.

  1. Dalla macchina locale, apri il file wildryde-site/js/config.js in un editor di testo.
  2. Aggiorna la sezione cognito del file con i valori corretti per l'ID del pool di utenti e l’ID client dell'app salvati nelle fasi 8 e 9 della sezione precedente. userPoolID è l’ID pool di utenti dalla sezione Panoramica del pool di utenti e userPoolClientID è l’ID client dell’app dalla sezione Integrazione app > Client app e analisi di Amazon Cognito. 
  3. Il valore della regione deve corrispondere al codice della regione AWS in cui è stato creato il pool di utenti. Ad esempio, us-east-1 per la Regione Virginia settentrionale o us-west-2 per la Regione Oregon. Se non sei sicuro di quale sia il codice da utilizzare, è possibile consultare il valore ARN del pool nella panoramica del pool di utenti. Il codice della regione fa parte dell'ARN e si trova dopo arn:aws:cognito-idp:.

  Il file config.js aggiornato deve corrispondere a quanto segue. I valori reali del file saranno diversi:
  

  window._config = {
      cognito: {
          userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb
          userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
          region: 'us-west-2' // e.g. us-east-2
      },
      api: {
          invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
      }
  };

  Code snippet copied

  Copia

      4. Salva il file modificato.

      5. Nella finestra del terminale, aggiungi, esegui il commit e invia il file al tuo repository Git per farlo distribuire automaticamente nella console di Amplify.

  Il seguente blocco di codice è un esempio di ciò che vedrai nella finestra del tuo terminale:

  $ git add .
  $ git commit -m "new_config"
  $ git push
  

  Code snippet copied

  Copia
• Convalida dell'implementazione
  1. In una finestra del Finder o in Esplora risorse di Windows, vai alla cartella wildrydes-site che hai copiato sul tuo computer locale nel Modulo 1. 
  2. Apri /register.html o scegli il pulsante Giddy Up! sulla home page (index.html) del tuo sito.
  3. Compila il modulo di registrazione e scegli Let's Ryde. È possibile utilizzare il proprio indirizzo e-mail o un indirizzo fittizio. Accertarsi di scegliere una password che contenga almeno una lettera maiuscola, un numero e un carattere speciale. Tenere a mente la password immessa. Viene visualizzato un avviso che conferma che l'utente è stato creato.
  4. Verificare il nuovo utente tramite uno dei due seguenti metodi:
     1. Se si è utilizzato un indirizzo e-mail di cui si è amministratore, è possibile completare la procedura di verifica visitando /verify.html nel dominio del proprio sito Web e immettendo il codice di verifica che verrà inviato via e-mail. Tieni presente che l'e-mail di verifica potrebbe finire nella cartella dello spam. Per le implementazioni reali, consigliamo di configurare il pool di utenti per l'uso di Amazon Simple Email Service per inviare messaggi e-mail da un dominio di proprietà.
     2. Se si è utilizzato un indirizzo e-mail fittizio, è necessario verificare l'utente manualmente tramite la console Cognito.
        1. Nella console Amazon Cognito, seleziona il pool di utenti WildRydes.
        2. Nella scheda Utenti, viene visualizzato un utente corrispondente all'indirizzo e-mail inviato tramite la pagina di registrazione. Scegli il nome utente per visualizzare la pagina dei dettagli dell'utente.
        3. Nel menu a discesa Operazioni, seleziona Conferma account per finalizzare il processo di creazione dell'account.
        4. Nella finestra a comparsa Conferma account per utente, scegli Conferma.
  5. Una volta verificato il nuovo utente tramite la pagina /verify.html o la console Cognito, visita /signin.html e accedi utilizzando l'indirizzo e-mail e la password immessi durante la fase di registrazione.
  6. Se l'operazione viene completata correttamente, verrai reindirizzato alla pagina /ride.html. Viene visualizzata una notifica che indica che l'API non è configurata.
     Importante: copia e salva il token di autenticazione per creare l'autorizzatore del pool di utenti di Amazon Cognito nel modulo successivo.