Nozioni di base su AWS

Creazione di un'applicazione Web serverless

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

Modulo 4: Implementazione di un'API RESTful

In questo modulo Amazon API Gateway sarà utilizzato per esporre la funzione Lambda creata nel modulo precedente come API RESTful.

Panoramica

In questo modulo utilizzerai Gateway Amazon API per esporre la funzione Lambda che hai creato nel modulo precedente come API RESTful. L'API sarà accessibile pubblicamente su Internet. Sarà protetta utilizzando il pool di utenti Amazon Cognito creato nel modulo precedente. Utilizzando questa configurazione, il sito Web ospitato staticamente verrà trasformato in un'applicazione Web dinamica aggiungendo JavaScript sul lato client che effettua chiamate AJAX alle API esposte.

Panoramica dell'architettura

Il diagramma precedente mostra come il componente di Gateway API che verrà creato in questo modulo si integra con i componenti esistenti creati in precedenza. Gli elementi in grigio sono voci già implementate nelle fasi precedenti.

Il sito Web statico distribuito nel primo modulo include già una pagina configurata per interagire con l'API che compilerai in questo modulo. La pagina /ride.html include una semplice interfaccia basata una mappa per la richiesta di un giro con un unicorno. Dopo aver effettuato l'autenticazione tramite la pagina /signin.html, gli utenti saranno in grado di selezionare la propria posizione di incontro facendo clic su un punto sulla mappa e quindi richiedendo un passaggio scegliendo il pulsante "Request Unicorn" (Richiedi unicorno) nell'angolo in alto a destra.

Questo modulo si concentrerà sulle fasi necessarie per creare i componenti cloud dell'API. Per informazioni su come funziona nel browser il codice per chiamare l'API, esamina il file ride.js del sito Web. In questo caso, l'applicazione utilizza il metodo ajax() di jQuery per effettuare la richiesta remota.

 Tempo per il completamento

15 minuti

 Servizi utilizzati

Implementazione

    1. Nella console Gateway Amazon API, seleziona API nel riquadro di navigazione a sinistra. 
    2. Scegli Crea in REST API. 
    3. Nella sezione Scegli il protocollo, seleziona REST
    4. Nella sezione Crea nuova API, seleziona Nuova API.
    5. Nella sezione Impostazioni, inserisci WildRydes per il nome dell'API e seleziona Ottimizzato per l’edge nel menu a discesa Tipo di endpoint.
      Nota: utilizza i tipi di endpoint ottimizzati per l’edge per i servizi pubblici accessibili tramite Internet. Gli endpoint regionali in genere vengono utilizzati per le API a cui si accedere principalmente dalla stessa regione AWS.
    6. Scegli Crea API.
  • È necessario creare un autorizzatore dei pool di utenti di Amazon Cognito. Gateway Amazon API utilizza token Web JSON (JWT), che vengono restituiti dal pool di utenti di Amazon Cognito (creato nel Modulo 2) per autenticare le chiamate API. In questa sezione, creeremo un autorizzatore per l'API, in modo da poter utilizzare il pool di utenti.

    Utilizza i seguenti passaggi per configurare l'autorizzatore nella console di Gateway Amazon API:

    1. Nel riquadro di navigazione a sinistra dell'API WildRydes che hai appena creato, seleziona Autorizzatori.
    2. Seleziona Crea nuovo autorizzatore
    3. Inserisci WildRydes nel campo Nome dell'autorizzatore.
    4. Seleziona Cognito come Tipo
    5. In Pool di utenti Cognito, nel menu a discesa Regione, seleziona la stessa Regione che hai utilizzato per il resto del tutorial. Inserisci WildRydes nel campo del nome del pool di utenti di Cognito.
    6. Immetti Autorizzazione come Origine token
    7. Scegli Crea.
    8. Per verificare la configurazione dell'autorizzatore, seleziona Test
    9. Incolla il token di autorizzazione copiato dalla pagina Web ride.html nella sezione Convalida la tua implementazione del Modulo 2 nel campo Autorizzazione (intestazione) e verifica che il codice di risposta dello stato HTTP sia 200. 

     

     

  • In questa sezione creerai una nuova risorsa all'interno della tua API. Quindi crea un metodo POST per quella risorsa e configuralo per utilizzare un'integrazione del proxy Lambda supportata dalla funzione RequestUnicorn creata nel primo passaggio di questo modulo.

    1. Nel riquadro di navigazione a sinistra dell'API WildRydes, seleziona Risorse.
    2. Nel menu a discesa Operazioni scegli Crea risorsa.
    3. Inserisci ride come nome della risorsa, che creerà automaticamente il percorso della risorsa /ride.
    4. Seleziona la casella di controllo Abilita CORS per Gateway API.
    5. Scegli Crea risorsa.
    6. Con la risorsa /ride selezionata appena creata, dal menu a discesa Operazioni seleziona Crea metodo.
    7. Seleziona POST dal nuovo menu a discesa visualizzato in OPZIONI, quindi seleziona l'icona del segno di spunta.
    8. Seleziona Funzione Lambda per Tipo di integrazione.
    9. Seleziona la casella di controllo per Usa integrazione del proxy Lambda.
    10. Seleziona la stessa Regione che hai utilizzato durante il tutorial per Regione Lambda.
    11. Inserisci RequestUnicorn per Funzione Lambda.
    12. Scegli Salva.
      Nota: se si verifica un errore che segnala che la funzione non esiste, verificare che la regione selezionata corrisponda a quella utilizzata nel modulo precedente.
    13. Quando viene richiesto di autorizzare Gateway Amazon API a richiamare la funzione, seleziona OK.
    14. Seleziona la scheda Richiesta metodo.
    15. Selezionare l'icona della matita accanto a Autorizzazione.
    16. Seleziona l'autorizzatore WildRydes del pool di utenti di Cognito dall'elenco a discesa e fai clic sull'icona con il segno di spunta.
  • In questa sezione implementerai la tua API dalla console Gateway Amazon API

    1. Nell'elenco a discesa Operazioni, seleziona Implementa API.
    2. Seleziona Nuova fase nell'elenco a discesa Fase implementazione.
    3. Immetti prod per Nome fase.
    4. Scegli Implementa.
    5. Copia l’URL della chiamata. Verrà utilizzato nella sezione successiva.
  • In questa fase, aggiornerai il file /js/config.js nell’implementazione del sito Web in modo da includere l'URL di chiamata della fase appena creata. Copierai l'URL di chiamata direttamente dalla parte superiore della pagina dell'editor di fasi nella console di Gateway Amazon API e lo incollerai nella chiave invokeUrl del file config.js del sito. Il file di configurazione conterrà comunque gli aggiornamenti apportati nel modulo precedente per userPoolID, userPoolClientID e region di Amazon Cognito.

    1. Sul computer locale, passa alla cartella js e apri il file config.js in un editor di testo di tua scelta
    2. Incolla l'URL della chiamata che hai copiato dalla console di Gateway Amazon API nella sezione precedente nel valore invokeUrl del file config.js
    3. Salva il file.

    Guarda il seguente esempio di un file config.js completato. Tieni presente che 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: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 
    
        } 
    
    };

        3. Aggiungi, esegui il commit e invia il file config.js aggiornato al tuo repository Git per implementarlo automaticamente nella console Amplify.

    $ git add .
    $ git commit -m "new_configuration"
    $ git push
    
  • Nota: è possibile che si verifichi un ritardo tra l'aggiornamento del file config.js nel bucket S3 e il momento in cui il contenuto aggiornato è visibile nel browser. Devi inoltre assicurarti di svuotare la cache del browser prima di eseguire le seguenti fasi.

    1. Aggiorna la versione JS di ArcGIS dalla 4.3 alla 4.6 (le versioni più recenti non funzioneranno in questo tutorial) nel file ride.html come:
    <script src="https://js.arcgis.com/4.6/"></script>
     <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

    Di seguito è disponibile un esempio di file ride.html completo. Tieni presente che alcuni valori nel tuo file potrebbero essere diversi.

    <div id="noApiMessage" class="configMessage" style="display: none;">
            <div class="backdrop"></div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Successfully Authenticated!</h3>
                </div>
                <div class="panel-body">
                    <p>This page is not functional yet because there is no API invoke URL configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 3.</p>
                    <p>In the meantime, if you'd like to test the Amazon Cognito user pool authorizer for your API, use the auth token below:</p>
                    <textarea class="authToken"></textarea>
                </div>
            </div>
        </div>
    
        <div id="noCognitoMessage" class="configMessage" style="display: none;">
            <div class="backdrop"></div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">No Cognito User Pool Configured</h3>
                </div>
                <div class="panel-body">
                    <p>There is no user pool configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 2 of the workshop.</p>
                </div>
            </div>
        </div>
    
        <div id="main">
            <div id="map">
            </div>
        </div>
    
        <div id="authTokenModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="authToken">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Your Auth Token</h4>
                    </div>
                    <div class="modal-body">
                        <textarea class="authToken"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    
    
        <script src="js/vendor/jquery-3.1.0.js"></script>
        <script src="js/vendor/bootstrap.min.js"></script>
        <script src="js/vendor/aws-cognito-sdk.min.js"></script>
        <script src="js/vendor/amazon-cognito-identity.min.js"></script>
        <script src="https://js.arcgis.com/4.6/"></script>
        <script src="js/config.js"></script>
        <script src="js/cognito-auth.js"></script>
        <script src="js/esri-map.js"></script>
        <script src="js/ride.js"></script>
    </body>
    
    </html>

    2. Salva il file modificato. Aggiungi, esegui il commit e avvia git push perché il repository Git lo implementi automaticamente nella console AWS Amplify.

        3. Consulta /ride.html nel dominio del sito Web.

        4. Se vieni reindirizzato alla pagina di accesso di ArcGIS, accedi con le credenziali utente create in precedenza nella sezione Introduzione come prerequisito di questo tutorial.

        5. Una volta caricata la mappa, fai clic su un punto qualsiasi per impostare una posizione di incontro.

        6. Seleziona Richiedi Unicorno. Dovrebbe essere visualizzata una notifica nella barra laterale destra che informa dell'arrivo di un unicorno e quindi l'icona dell'unicorno che vola fino al punto di incontro.

Questa pagina è stata utile?

Pulizia delle risorse