In questo modulo creerai un pool di utenti di Amazon Cognito per gestire gli account dei tuoi utenti. Distribuirai le pagine che consentono ai clienti di registrarsi come nuovo utente, verificare il loro indirizzo e-mail e accedere al sito.

Serverless_Web_App_LP_assets-03

Quando gli utenti visitano il tuo sito Web dovranno prima creare un nuovo account utente. Ai fini di questo workshop gli chiederemo soltanto di fornire un indirizzo e-mail e una password per registrarsi. Comunque, è possibile configurare Amazon Cognito per richiedere ulteriori attributi nelle tue applicazioni.

Una volta effettuata la registrazione da parte degli utenti, Amazon Cognito invierà loro un'e-mail di conferma con un codice di verifica all'indirizzo fornito. Per verificare il proprio account, gli utenti torneranno al tuo sito e immetteranno il loro indirizzo e-mail e il codice di verifica che hanno ricevuto. È anche possibile confermare gli account utente utilizzando la console di Amazon Cognito, se desideri utilizzare indirizzi e-mail fittizi per il testing.

Quando gli utenti disporranno di un account confermato, (attraverso il processo di verifica e-mail o di conferma manuale tramite la console), saranno in grado di accedere. Quando gli utenti effettuano l'accesso, immettono il proprio nome utente (o e-mail) e la password. Poi, una funzione JavaScript comunica con Amazon Cognito, effettua l'autenticazione utilizzando il protocollo Secure Remote Password (SRP) e riceve un set di JSON Web Tokens (JWT). I JWTs contengono le richieste sull'identità dell'utente e saranno utilizzati nel modulo successivo per eseguire l'autenticazione nel RESTful API creato con Amazon API Gateway.

Tempo di completamento: 30 minuti

Servizi utilizzati: Amazon Cognito

Modello di CloudFormation: se desideri passare al modulo successivo, puoi avviare uno di questi modelli di AWS CloudFormation nella stessa regione che hai utilizzato nel Modulo 1.

Regione Modello di CloudFormation
Stati Uniti orientali (Virginia settentrionale) Avvia stack >
Stati Uniti orientali (Ohio) Avvia stack >
Stati Uniti occidentali (Oregon) Avvia stack >
UE (Francoforte) Avvia stack >
UE (Irlanda) Avvia stack >
UE (Londra) Avvia stack >
Asia Pacifico (Tokyo) Avvia stack >
Asia Pacifico (Seoul) Avvia stack >
Asia Pacifico (Sydney) Avvia stack >
Asia Pacifico (Mumbai) Avvia stack >
Serverless_Web_App_LP_assets-17

Istruzioni per l’avvio di CloudFormation

  1. Scegli il link di Avvia stack qui sopra per la regione a tua scelta.

  2. Scegli Next (Successivo) nella pagina di selezione del modello.

  3. Inserisci il nome del bucket del sito Web creato nel Modulo 1 in Website Bucket Name (ad es. wildrydes-yourname), quindi seleziona Next.

    Nota: è necessario usare lo stesso nome di bucket che hai utilizzato nel modulo precedente. Se fornisci un nome di bucket che non esiste o per cui non hai accesso in scrittura, la creazione dello stack di CloudFormation non riuscirà.

  4. Nella pagina Options (Opzioni) lascia tutte le impostazioni predefinite e scegli Next (Successivo).

  5. Nella pagina Review (Revisione), seleziona la casella per confermare che CloudFormation creerà le risorse di IAM e scegli Create (Crea).

    Questo modello utilizza risorse personalizzate per creare un pool di utenti e un client Amazon Cognito e anche generare un file di configurazione con le informazioni necessarie per connettersi a questo pool di utenti e caricarlo nel tuo bucket del sito Web. Il modello creerà un ruolo che consente l'accesso per la creazione di queste risorse e il caricamento del file config nel tuo bucket.

  6. Attendi che lo stack wildrydes-webapp-2 raggiunga lo stato CREATE_COMPLETE.

  7. Segui i passaggi descritti nella Fase 4. Esegui un test sull'implementazione per confermare che puoi passare al modulo successivo.


Segui i passaggi indicati nelle istruzioni seguenti per creare i pool di utenti. Fai clic sul numero della fase per espandere la sezione.

  • Fase 1. Crea un pool di utenti Amazon Cognito

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


    1. Nella Console AWS fai clic su Services (Servizi) poi seleziona Cognito sotto a Mobile Services (Servizi per dispositivi mobili).
    2. Scegli Manage your User Pools (Gestisci i tuoi pool di utenti).
    3. Scegli Create a User Pool (Crea un pool di utenti)
    4. Fornisci un nome per il tuo pool di utenti, ad esempio WildRydes, poi seleziona Review Defaults (Rivedi impostazioni predefinite)
    5. Nella pagina Review (Revisione) fai clic su Create pool (Crea pool).
    6. Annota l'Id del pool nella pagina dei dettagli del tuo pool di utenti appena creato.
  • Fase 2. Aggiungi un'applicazione per il tuo pool di utenti

    Tramite la console di Amazon Cognito seleziona il pool di utenti e seleziona la sezione App clients (Applicazione client). Aggiungi una nuova applicazione client e accertati che l'opzione Generate client secret (Genera client secret) sia deselezionata. I client secret non sono attualmente supportati dal kit SDK JavaScript. Se crei un’applicazione con un secret generato, eliminala e creane una nuova con la configurazione corretta.


    1. Nella pagina Pool Details del pool di utenti, seleziona App clients dalla sezione General Settings a sinistra, nella barra di navigazione.
    2. Seleziona Add an app client.
    3. Assegna un nome, ad esempio WildRydesWebApp.
    4. Deseleziona l'opzione Generate client secret (Genera client secret). I client secret attualmente non supportano l'uso con applicazioni basate su browser.
    5. Fai clic su Create app client.
    6. Annota l’Id dell’applicazione client dell'applicazione appena creata.
  • Fase 3. Aggiorna il file config.js nel bucket del tuo sito Web

    Il file /js/config.js contiene le impostazioni dell'ID del pool di utenti, l'ID dell'app client e la regione. Aggiorna questo file con le impostazioni del pool di utenti e dell'app che hai creato nei passaggi precedenti e carica il file all'interno del bucket.


    1. Scarica il file config.js dalla directory del sito Web del primo modulo in questo repository nel computer locale. Puoi trovarlo tornando al bucket S3 che hai creato e spostandoti nella cartella denominata 'js'.
    2. Apri il file scaricato utilizzando l'editor di testo che preferisci.
    3. Aggiorna la sezione di Cognito con i valori corretti per il pool di utenti e l'applicazione appena creata.
    4. Per consultare il valore del campo userPoolId, seleziona selezionato il pool di utenti appena creato nella console di Amazon Cognito e apri la relativa pagina dei dettagli.
      Per consultare il valore del campo userPoolClientId, seleziona App clients nella barra di navigazione sinistra. Utilizza il valore dal campo App client id per l'app creata nella sezione precedente.
      Il valore nel campo region deve corrispondere al codice della regione AWS in cui hai creato il pool di utenti. Ad es. us-east-1 è il codice per la regione Stati Uniti orientali (Virginia settentrionale) e us-west-2 per la regione Stati Uniti occidentali (Oregon). Se non sei sicuro di quale sia il codice da utilizzare, è possibile consultare il valore Pool ARN nella pagina dei dettagli del pool. Il codice della regione fa parte dell'ARN e si trova dopo la dicitura arn:aws:cognito-idp:.
      Il file aggiornato config.js dovrebbe apparire come questo. Si noti che i valori effettivi per i tuoi file saranno diversi:

    finestra._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', } };

    1. Salva il file modificato assicurandoti che il nome file sia ancora config.js.
    2. Apri la console di Amazon S3 visitando https://console.aws.amazon.com/s3/.
    3. Seleziona il bucket del tuo sito Web Wild Rydes che hai creato nel modulo precedente.
    4. Cerca il prefisso js.
    5. Scegli Upload (Carica), quindi Add files (Aggiungi file).
    6. Vai alla directory in cui è salvata la tua versione del file config.js modificata localmente, selezionalo e scegli Open (Apri).
    7. Scegli Upload (Carica) sul lato sinistro della finestra di dialogo.

    Nota: anziché scrivere il codice lato browser per gestire la registrazione, la verifica e i flussi di accesso, forniamo un'implementazione funzionante nelle risorse che hai distribuito nel primo modulo. Il file cognito-auth.js contiene il codice che gestisce gli eventi UI e richiama i giusti metodi di Amazon Cognito Identity SDK. Per ulteriori informazioni su SDK, consulta la pagina del progetto su GitHub.

  • Fase 4. Esegui un test dell'implementazione


    1. Visita /register.html sotto il dominio del tuo sito Web, oppure seleziona il pulsante Giddy Up! sulla homepage del tuo sito.
    2. Completa il modulo di registrazione e scegli Let's Ryde. Puoi usare la tua e-mail o immettere un indirizzo e-mail fittizio. Assicurati di scegliere una password che contenga almeno un lettera maiuscola, un numero e un carattere speciale. Non dimenticare la password che hai inserito per dopo. Dovresti visualizzare un avviso di conferma dell'avvenuta creazione dell'utente.
    3. Conferma il tuo nuovo utente utilizzando uno dei due metodi riportati di seguito.
    4. Se hai utilizzato un indirizzo e-mail di cui sei amministratore, potrai completare la procedura di verifica visitando /verify.html sotto al dominio del tuo sito Web e immettendo il codice di verifica che ti sarà inviato via e-mail. Ricorda, l'e-mail di verifica può finire nella tua cartella spam. Per le implementazioni reali raccomandiamo di configurare il pool di utenti per l'utilizzo di Amazon Simple Email Service per l'invio di e-mail da un dominio di tua proprietà.
    5. Se hai utilizzato un indirizzo e-mail fittizio, è necessario verificare l'utente manualmente attraverso la console Cognito.
    6. Dalla console di AWS, fai clic su Servizi quindi seleziona Cognito sotto Sicurezza, Identità e Conformità.
    7. Scegli Manage your User Pools (Gestisci i tuoi pool di utenti)
    8. Seleziona il pool di utenti WildRydes e fai clic su Users and groups nella barra di navigazione sinistra.
    9. Dovresti vedere un utente corrispondente all'indirizzo e-mail che hai inviato tramite la pagina di registrazione. Scegli quel nome utente per visualizzare la sua pagina dei dettagli.
    10. Scegli Confirm user (Conferma utente) per completare il processo di creazione dell'account.
    11. Una volta verificato il nuovo utente utilizzando tramite la pagina /verify.html o la console di Cognito, visita /signin.html ed effettua l'accesso utilizzando l'indirizzo e-mail e la password immessi durante la fase di registrazione.
    12. Se l'operazione viene completata correttamente, sarai reindirizzato alla pagina /ride.html. Dovresti vedere una notifica che avvisa che l'API non è configurato.
    successful-login