Progetti in AWS

Crea un'applicazione Web moderna

Distribuisci un'applicazione Web, collegala a un database e analizza le attività degli utenti

Modulo 4. Impostazione della registrazione dell'utente

In questo modulo imposterai la registrazione dell'utente sul sito Web in modo da poter acquisire informazioni specifiche su di esso.

Panoramica

Al fine di aggiungere alcuni aspetti cruciali al sito Web Mythical Mysfits, come consentire agli utenti di votare il loro mysfit preferito e di adottarne uno, dobbiamo prima fare in modo che gli utenti si registrino sul sito Web. Per consentire la registrazione e l'autenticazione degli utenti del sito Web, creeremo un pool di utenti in AWS Cognito, un servizio di gestione dell'identità degli utenti completamente gestito.

Quindi, per essere sicuri che solo gli utenti registrati siano autorizzati a mettere mi piace o ad adottare mysfit sul sito Web, distribuiremo un'API REST con Amazon API Gateway di fronte al NLB (Network Load Balancer). Amazon API Gateway è inoltre un servizio gestito e fornisce funzionalità API REST predefinite e comunemente richieste come terminazione SSL (Secure Socket Layer), autorizzazione delle richieste, throttling, fasi delle API e funzione Versioni multiple e molto altro ancora.

Utilizzerai nuovamente l'interfaccia a riga di comando (CLI) di AWS per distribuire le risorse necessarie in AWS.

Diagramma dell'architettura

imposta il diagramma dell'architettura di registrazione dell'utente

 Tempo necessario per completare il modulo

60 minuti

Istruzioni per l'implementazione

  • A. Creazione del pool di utenti Cognito

    Per creare il pool di utenti Cognito in cui verranno memorizzati tutti i visitatori di Mythical Mysfits, esegui il seguente comando CLI per creare un pool di utenti chiamato MysfitsUserPool e indicare che tutti gli utenti registrati in questo pool dovrebbero avere automaticamente il proprio indirizzo email verificato tramite email di conferma prima che diventino utenti confermati.

    aws cognito-idp create-user-pool --pool-name MysfitsUserPool --auto-verified-attributes email

    Copia la risposta dal comando precedente, che include l'ID univoco per il pool di utenti che dovrai utilizzare nelle fasi successive. Ad esempio: Id: us-east-1_ab12345YZ)

    B: Creazione di un client del pool di utenti Cognito

    Successivamente, al fine di integrare il nostro sito Web front-end con Cognito, dobbiamo creare un nuovo client del pool di utenti per questo pool di utenti. In questo modo verrà generato un identificativo univoco del client che consentirà al sito Web di essere autorizzato a chiamare le API non autenticate in Cognito, in cui gli utenti del sito Web possono accedere e registrarsi nel pool di utenti Mythical Mysfits. Per creare un nuovo client utilizzando l'interfaccia a riga di comando di AWS per il suddetto pool di utenti, esegui il seguente comando (sostituendo il valore user-pool-id con quello che hai copiato sopra):

    aws cognito-idp create-user-pool-client --user-pool-id REPLACE_ME --client-name MysfitsUserPoolClient
  • Successivamente, rivolgiamo la nostra attenzione alla creazione di una nuova API RESTful di fronte al servizio Flask esistente, in modo da poter eseguire l'autorizzazione delle richieste prima che il NLB ne riceva una. Lo faremo con Amazon API Gateway, come descritto nella panoramica del modulo.

    Affinché API Gateway si integri privatamente con il NLB, configureremo un collegamento VPC API Gateway che consente alle API di API Gateway di integrarsi direttamente con i servizi Web di back-end ospitati privatamente all'interno di un VPC. Nota: ai fini di questo seminario, abbiamo creato il NLB con connessione a Internet in modo che potesse essere chiamato direttamente nei moduli precedenti. Per questo motivo, anche se dopo questo modulo avremo bisogno di token di autorizzazione nella nostra API, il NLB sarà comunque effettivamente aperto al pubblico tramite l'API di API Gateway.

    In uno scenario del mondo reale, è necessario creare il NLB interno dall'inizio (o creare un nuovo sistema di bilanciamento del carico interno per sostituire quello esistente), sapendo che API Gateway sarebbe la strategia per l'autorizzazione dell'API con connessione a Internet. Ma per motivi di tempo, utilizzeremo il NLB che abbiamo già creato e che rimarrà accessibile al pubblico.

    Crea il collegamento VPC per la prossima API REST usando il seguente comando CLI (dovrai sostituire il valore indicato con l'ARN di Load Balancer che hai salvato quando è stato creato il NLB nel modulo 2):

    aws apigateway create-vpc-link --name MysfitsApiVpcLink --target-arns REPLACE_ME_NLB_ARN > ~/environment/api-gateway-link-output.json

    Il comando di sopra creerà un file chiamato api-gateway-link-output.json che contiene l'ID per il collegamento VPC che viene creato. Mostrerà inoltre lo stato PENDING (IN ATTESA), simile a quanto sotto riportato.

    Per completare la creazione saranno necessari circa 5-10 minuti; puoi copiare l'ID da questo file e procedere alla fase successiva.

    {
        "status": "PENDING",
        "targetArns": [
            "YOUR_ARN_HERE"
        ],
        "id": "abcdef1",
        "name": "MysfitsApiVpcLink"
    }

    Con la creazione del collegamento VPC, possiamo passare alla creazione dell'API REST effettiva utilizzando Amazon API Gateway.

    B: Creazione dell'API REST usando Swagger

    L'API REST di MythicalMysfits viene definita utilizzando **Swagger**, un noto framework open source per la descrizione delle API tramite JSON. Questa definizione dell'API tramite Swagger si trova in `~/environment/aws-modern-application-workshop/module-4/aws-cli/api-swagger.json`. Apri questo file e vedrai l'API REST e tutte le sue risorse, i metodi e la configurazione definiti all'interno.

    Esistono diversi punti all'interno di questo file JSON che devono essere aggiornati per includere parametri specifici del proprio pool di utenti Cognito e del Network Load Balancer.

    L'oggetto `securityDefinitions` all'interno della definizione API indica che abbiamo impostato un meccanismo di autorizzazione apiKey usando l'intestazione Autorizzazione. Noterai che AWS ha fornito estensioni personalizzate a Swagger usando il prefisso `x-amazon-api-gateway-`; queste estensioni esistono dove è possibile aggiungere ai tipici file swagger funzionalità specifiche di API Gateway ai fini di poter sfruttarle.

    Esegui il commando CTRL-F nel file per cercare i vari luoghi in cui si trova `REPLACE_ME` in attesa dei parametri specifici. Dopo aver apportato le modifiche, salva il file ed esegui il seguente comando AWS CLI:  

    aws apigateway import-rest-api --parameters endpointConfigurationTypes=REGIONAL --body file://~/environment/aws-modern-application-workshop/module-4/aws-cli/api-swagger.json --fail-on-warnings

    Copia la risposta restituita da tale comando e salva il valore `ID` per la fase successiva:

    {
        "name": "MysfitsApi",
        "endpointConfiguration": {
            "types": [
                "REGIONAL"
            ]
        },
        "id": "abcde12345",
        "createdDate": 1529613528
    }
    C: Distribuzione dell'API

    Ora l'API è stata creata, ma deve ancora essere distribuita ovunque. Per distribuire l'API, dobbiamo prima creare una distribuzione e indicare quale **fase** è prevista dalla distribuzione. Una fase è un riferimento denominato a una distribuzione, che è uno snapshot dell'API.

    La fase viene utilizzata per gestire e ottimizzare una particolare distribuzione. Ad esempio, è possibile configurare le impostazioni della fase per abilitare la memorizzazione nella cache, personalizzare il throttling delle richieste, configurare la registrazione, definire le variabili della fase o collegare una versione Canary per il test. Chiameremo la nostra fase `prod`. Per creare una distribuzione per la fase prod, esegui il seguente comando CLI:

    aws apigateway create-deployment --rest-api-id REPLACE_ME_WITH_API_ID --stage-name prod

    Tramite questa operazione, l'API REST in grado di autorizzare l'utente è distribuita e disponibile in Internet ... ma dove?! L'API è disponibile nel seguente percorso:

    https://REPLACE_ME_WITH_API_ID.execute-api.REPLACE_ME_WITH_REGION.amazonaws.com/prod

    Copia quanto indicato sopra, sostituendo i valori appropriati e aggiungi `/mysfits` alla fine dell'URI (Uniform Resource Identifier). Dopo averlo inserito in una barra degli indirizzi del browser, dovresti vedere ancora una volta la risposta JSON di Mysfits. Tuttavia, abbiamo aggiunto diverse funzionalità, come mettere mi piace e adottare mysfit, che il servizio Flask di back-end non ha ancora implementato.

    Ci occuperemo di questo successivamente.

    Mentre tali aggiornamenti del servizio vengono inviati automaticamente attraverso la pipeline CI/CD, continua con la fase successiva.

  • A: Aggiornamento del servizio Flask di back-end

    Per accogliere le nuove funzionalità in modo tale da visualizzare, mettere mi piace e adottare i profili Mysfit, abbiamo incluso il codice Python aggiornato per il servizio web Flask di back-end.

    Sovrascriviamo la base di codice esistente con questi file e inseriamoli nel repository:

    cd ~/environment/MythicalMysfitsService-Repository/
    cp -r ~/environment/aws-modern-application-workshop/module-4/app/* .
    git add .
    git commit -m "Update service code backend to enable additional website features."
    git push

    Mentre tali aggiornamenti del servizio vengono inviati automaticamente attraverso la pipeline CI/CD, continua con la fase successiva.

    B: Aggiornamento del sito Web Mythical Mysfits in S3

    Apri la nuova versione del file index.html Mythical Mysfits che a breve invieremo su Amazon S3; si trova in: ~/environment/aws-modern-application-workshop/module-4/app/web/index.html. In questo nuovo file index.html, noterai ulteriore codice HTML e JavaScript utilizzato per aggiungere un'esperienza di registrazione e accesso dell'utente.

    Questo codice interagisce con il kit SDK di AWS Cognito per JavaScript per consentire di gestire la registrazione, l'autenticazione e l'autorizzazione a tutte le chiamate API che lo richiedono.

    In questo file, sostituisci le stringhe REPLACE_ME all'interno delle virgolette singole con gli OutputValues copiati sopra e salva il file:

    before-replace2

    Inoltre, per il processo di registrazione dell'utente, ci sono altri due file HTML, register.html e confirm.html, in cui vanno inseriti i suddetti valori. Inserisci i valori copiati nelle stringhe REPLACE_ME anche in questi file.

    Ora, copiamo questi file HTML, nonché il kit SDK Cognito per JavaScript nel bucket S3 che ospita il contenuto del sito Web Mythical Mysfits in modo che le nuove funzionalità vengano pubblicate online.

    aws s3 cp --recursive ~/environment/aws-modern-application-workshop/module-4/web/ s3://YOUR-S3-BUCKET/

    Aggiorna il sito Web Mythical Mysfits nel browser per vedere le nuove funzionalità in azione!

    Questo conclude il modulo 4.

Infine, acquisisci i comportamenti degli utenti