Progetti in AWS:

Creazione di un'applicazione Web serverless

con AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB e Amazon Cognito

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

Introduzione

Progression-Bar-07

Hosting di un sito Web statico

Progression-Bar-14

Gestione degli utenti

Progression-Bar-09

Creazione di un back-end serverless

Progression-Bar-10

Distribuzione di un'API RESTful

Progression-Bar-11

Interruzione delle risorse

Modulo 2. Gestione degli utenti

In questo modulo, procederai con la creazione di un pool di utenti Amazon Cognito per gestire gli account degli utenti. Distribuirai le pagine che permettono ai clienti di registrarsi come nuovi utenti, verificare il proprio indirizzo e-mail e accedere al sito.

Panoramica dell'architettura

Serverless_Web_App_LP_assets-03

Quando visitano il tuo sito Web, gli utenti innanzitutto registreranno un nuovo account utente. Ai fini di questo workshop, richiederemo loro soltanto di fornire un indirizzo e-mail e una password per la registrazione. Tuttavia, puoi configurare Amazon Cognito per richiedere ulteriori attributi nelle tue applicazioni.

Una volta che gli utenti hanno inviato la registrazione, Amazon Cognito invia un'e-mail di conferma contenente un codice di verifica all'indirizzo fornito. Per confermare l'account, gli utenti tornano sul sito e immettono l'indirizzo e-mail e il codice di verifica ricevuto. Puoi inoltre confermare gli account utente tramite la console Amazon Cognito se desideri utilizzare indirizzi e-mail fittizi per la verifica.

Una volta che dispongono di un account confermato (con il processo di verifica tramite e-mail o con la conferma manuale tramite la console), gli utenti saranno in grado di effettuare l'accesso. Quando effettuano l'accesso, gli utenti immettono il proprio nome utente (o e-mail) e la password. Quindi, una funzione JavaScript comunica con Amazon Cognito, esegue l'autenticazione tramite il protocollo Secure Remote Password (SRP) e riceve un set di token JWT (JSON Web Token). I token JWT contengono le attestazioni relative all'identità dell'utente e verranno utilizzati nel prossimo modulo per l'autenticazione rispetto all'API RESTful che hai creato con Amazon API Gateway.

Tempo a disposizione per completare il modulo: 30 minuti

Servizi utilizzati: Amazon Cognito

Modello di CloudFormation: per passare al modulo successivo, puoi avviare uno di questi modelli AWS CloudFormation nella stessa regione che hai usato nel modulo 1.

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

Istruzioni per l'avvio di CloudFormation

  1. Scegliere il link Launch Stack (Avvia Stack) sopra relativo alla regione desiderata.

  2. Scegliere Next (Avanti) nella pagina Select Template (Seleziona modello).

  3. Fornire il nome del bucket del sito Web dal modulo 1 per Website Bucket Name (Nome bucket sito Web) (ad es., wildrydes-yourname) e scegliere Next (Avanti).

    Nota: occorre specificare lo stesso nome di bucket utilizzato nel precedente modulo. Se si fornisce un nome di bucket inesistente o per il quale non si dispone dell'accesso in scrittura, lo stack CloudFormation avrà esito negativo durante la creazione.

  4. Nella pagina Options (Opzioni), mantenere tutte le impostazioni predefinite e scegliere Next (Avanti).

  5. Nella pagina Review (Revisione), selezionare la casella per accettare la creazione delle risorse IAM da parte di CloudFormation e scegliere Create (Crea).

    Questo modello utilizza risorse personalizzate per creare un pool di utenti e un client Amazon Cognito, nonché per generare un file di configurazione con i dettagli necessari a connettersi a tale pool di utenti e caricarlo sul bucket del sito Web. Il modello creerà un ruolo che fornisce l'accesso per la creazione di queste risorse e il caricamento del file di configurazione sul bucket.

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

  7. Segui i passaggi descritti in Fase 4. Esegui il test dell'implementazione per verificare di essere pronto a passare al modulo successivo.

Istruzioni per l'implementazione

Segui le istruzioni dettagliate riportate di seguito per creare i pool di utenti. Fare clic su ogni numero di fase per espandere la sezione.

  • Fase 1. Creazione di un pool di utenti Amazon Cognito

    Creazione di un pool di utenti Amazon Cognito

    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. Dalla console AWS, fare clic su Services (Servizi) e selezionare Cognito nella sezione Mobile Services (Servizi mobili).
    2. Scegliere Manage your User Pools (Gestisci pool di utenti).
    3. Scegliere Create a User Pool (Crea pool di utenti).
    4. Fornire un nome per il pool di utenti, come WildRydes, quindi selezionare Review Defaults (Verifica impostazioni predefinite).
    5. Nella pagina Review (Revisione), fare clic su Create pool (Crea pool).
    6. Prendere nota del Pool Id (ID pool) nella pagina dei dettagli del pool di utenti appena creato.

  • Fase 2. Aggiunta di un'applicazione al pool di utenti

    Aggiunta di un'applicazione al pool di utenti

    Dalla console Amazon Cognito, selezionare il pool di utenti, quindi la sezione App clients (Client applicazioni). Aggiungere un nuovo client delle applicazioni e accertarsi che sia deselezionata l'opzione Generate client secret (Genera segreto client). Al momento, i segreti client non sono supportati con l'SDK per JavaScript. Se si crea un'applicazione con un segreto generato, eliminarlo e crearne uno nuovo con la configurazione corretta.

    1. Nella sezione a sinistra General Settings (Impostazioni generali) della barra di navigazione nella pagina Pool Details (Dettagli pool) del pool di utenti, selezionare App clients (Client applicazioni).
    2. Scegliere Add an app client (Aggiungi un client applicazioni).
    3. Assegnare al client applicazioni un nome come WildRydesWebApp.
    4. Deselezionare l'opzione Generate client secret (Genera segreto client). Al momento, i segreti client non sono supportati per l'uso con le applicazioni basate su browser.
    5. Scegliere Create app client (Crea client applicazioni).
    6. Prendere nota dell'App client id (ID client applicazioni) dell'applicazione appena creata.

  • Fase 3. Aggiorna la configurazione del sito Web

    Aggiorna la 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.

    a. Dalla macchina locale, apri il file `wild-ryde-site/js/config.js` in un editor di testo.

    b. Aggiorna la sezione Cognito con i valori corretti per il pool di utenti e l'applicazione appena creati.

    Per consultare il valore del campo userPoolId, seleziona il pool di utenti creato nella console Amazon Cognito e apri la relativa pagina dei dettagli.
    Per consultare il valore del campo userPoolClientId, seleziona Client app nella barra di navigazione a sinistra. Utilizza il valore del campo ID client applicazioni per l'applicazione creata nella sezione precedente.

    Il valore nel campo regione deve corrispondere al codice della regione AWS in cui è stato creato il pool di utenti. Ad esempio, us-east-1 per la regione Stati Uniti orientali (Virginia settentrionale) o 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 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',
    }
};

    d. Salva il file modificato e inseriscilo nel repository Git in modo che sia distribuito automaticamente nella console Amplify.

    $ git push

  • Fase 4. Testing dell'implementazione

    Convalida dell'implementazione

    1. Visitare la pagina /register.html nel dominio del proprio sito Web oppure scegliere il pulsante Giddy Up! nella home page del sito.
    2. Compilare il modulo di registrazione e scegliere 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.
    3. Verificare il nuovo utente tramite uno dei due seguenti metodi.
    4. 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. Si noti che l'e-mail di verifica potrebbe finire nella cartella dello spam. Per le distribuzioni 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à.
    5. Se si è utilizzato un indirizzo e-mail fittizio, è necessario verificare l'utente manualmente tramite la console Cognito.
    6. Dalla console AWS, fare clic su Services (Servizi) e selezionare Cognito nella sezione Security, Identity & Compliance (Sicurezza, identità e conformità).
    7. Scegliere Manage your User Pools (Gestisci pool di utenti).
    8. Selezionare il pool di utenti WildRydes e fare clic su Users and groups (Utenti e gruppi) nella barra di navigazione a sinistra.
    9. Viene visualizzato un utente corrispondente all'indirizzo e-mail inviato tramite la pagina di registrazione. Scegliere il nome utente per visualizzare la pagina dei dettagli dell'utente.
    10. Scegliere Confirm user (Verifica utente) per finalizzare il processo di creazione dell'account.
    11. Una volta verificato il nuovo utente tramite la pagina /verify.html o la console Cognito, visitare /signin.html e accedere utilizzando l'indirizzo e-mail e la password immessi durante la fase di registrazione.
    12. Se l'operazione viene completata correttamente, si verrà reindirizzati alla pagina /ride.html. Viene visualizzata una notifica che indica che l'API non è configurata.
    successful-login
Successivo: Creazione di un back-end serverless