Tutoriel sur l'analytique intégrée

avec Amazon QuickSight

Module 5 : API Gateway et pages Web statiques

Dans ce module, nous allons poursuivre la configuration du portail web.

Introduction

Dans ce module, nous allons poursuivre la configuration du portail web en créant une passerelle API afin d'appeler la fonction Lambda et d'écrire et de charger la page HTML statique dans le compartiment S3.

Ce que vous apprendrez

  • Créer une API Gateway - Pour appeler des fonctions Lambda.
  • Créer une page web statique

 Durée

20 minutes

 Services utilisés

Implémentation

  • Créer une API Gateway

    Configurons une API Gateway pour appeler la fonction Lambda QSGetEmbedUrl.

    1. Lancez l'API Gateway et cliquez sur le bouton Créer une API.

    114

    2. Faites défiler jusqu'à API REST et cliquez sur le bouton Générer.

    115

    3. Définissez le Nom d'API en tant que QSGetEmbedUrlApi et cliquez sur le bouton Créer une API.

    116

    4. Cliquez sur la liste déroulante Actions et cliquez sur l'option Créer une ressource.

    117

    5. Définissez les valeurs suivantes.
    Nom de la ressource : GetEmbedUrl
    Activer le CORS API Gateway : coché
    Cliquez sur Créer une ressource
    .

    118

    6. Cliquez sur la liste déroulante Actions (la ressource getembedurl doit être sélectionnée) et cliquez sur l'option Créer une méthode .

    119

    7. Sélectionnez GET dans la case d'option et cliquez sur l'icône coche.

    120

    8. Définissez les valeurs suivantes.
    Type d'intégration : fonction Lambda
    Utiliser une intégration proxy Lambda : cochée
    Fonction Lambda : QSGetEmbedUrl
    Cliquez sur le bouton Enregistrer
    .

    121

    9. Cliquez le bouton OK dans la boîte de dialogue Ajouter une autorisation.

    122

    10. Cliquez sur la liste déroulante Actions et cliquez sur l'option Déployer l'API.

    123

    11. Effectuez les sélections suivantes.
    Étape de déploiement : sélectionnez [Nouvelle étape]
    Nom de l'étape : test
    Cliquez sur le bouton Déployer

    124

    12. Enregistrez le contenu d'Appeler une URL dans votre bloc-notes en tant que URL d'API Gateway

    125
  • Créer une page web statique

    Nous allons maintenant créer une page html statique et la charger dans notre compartiment S3.

    1. Copiez le code html suivant dans un fichier et nommez-le qsembed.html.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <script type="text/javascript" src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.2/dist/quicksight-embedding-js-sdk.min.js"></script>
        <title>Embedding demo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://sdk.amazonaws.com/js/aws-sdk-2.517.0.min.js"></script>
        <style>
          iframe {border: 0;}
          body {margin:0;}
        </style>
        <script>
          var awsData = {
            dashboardId: '',
            dashboardRegion: '',
            apiGatewayUrl:'<apiGatewayUrl>?',
            cloudFrontUrl:'<cloudFrontUrl>',
            cognitoUrl:'<cognitoUrl>/login?client_id=<clientId>&response_type=token&scope=openid+profile&redirect_uri=<cloudFrontUrl>/qsembed.html',
            debug: false
          }
    
          $(document).ready(function () {
            document.getElementById('logo').src = awsData.cloudFrontUrl+'/logo.png'
            //On redirect from Cognito; Read out  state
            //Setting client and dashboard id in url is just for demo implementation.
            awsData.dashboardId = getParameterValues('dashboardid','?','&');
            awsData.dashboardRegion = getParameterValues('dashboardregion','?','&');
    
            //Get OpenIdToken
            var tokenPromise = getOpenIdToken();
    
            tokenPromise.then(function(idToken) {
              apiGatewayGetEmbedUrl(
                awsData.apiGatewayUrl,
                awsData.dashboardId,
                awsData.dashboardRegion,
                idToken
              );
            },
            function(err)
            {
                   console.log(err);
            });
          });
    
          function writeDebugInfo(debugInfo){
                  // console.log(debugInfo);
          }
    
          function getCookie(name) {
            var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
            return v ? v[2] : null;
          }
    
          function setCookie(name, value) {
            document.cookie = name + "=" + value ;
          }
    
          function getParameterValues(param,slicer,delimiter) {
            var urlParms = window.location.href.slice(window.location.href.indexOf(slicer)+ slicer.length).split(delimiter);
            for (var i = 0; i < urlParms.length; i++) {
              var urlparm = urlParms[i].split('=');
              if (urlparm[0].toLowerCase() === param) {
                setCookie(param, decodeURIComponent(urlparm[1]));
                return decodeURIComponent(urlparm[1]);
              }
            }
              return getCookie(param);
          }
    
          function parseJwt (token) {
                 var base64Url = token.split('.')[1];
                var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
                var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
                    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
                }).join(''));
                return JSON.parse(jsonPayload);
            }
    
          //Redirect to Cognito if user is not Signed in.
          //Cognito will redirect back to this page and then the promise will be resolved.
          function getOpenIdToken(){
            return new Promise(function(resolve,reject) {
                writeDebugInfo('In getOpenIdToken func');
                var idToken = getParameterValues('id_token','#','&');
                if (idToken ) {
              writeDebugInfo('Token found');
                }
                else {
                    writeDebugInfo('Token not found, Redirecting to Cognito');
                    window.location.href = awsData.cognitoUrl;
                }
    
            resolve(idToken);
            });
          }
    
          //Make APIGateway call to generate the embed url.
          function apiGatewayGetEmbedUrl(
            apiGatewayUrl,
            dashboardId,
            dashboardRegion,
            openIdToken
            ) {
            const parameters = {
                dashboardId: dashboardId,
                dashboardRegion: dashboardRegion,
                openIdToken: openIdToken
            }
    
            const myQueryString = $.param(parameters);
            apiGatewayUrl = apiGatewayUrl + myQueryString;
    
            const headers = { 'Content-Type' : 'application/json' }
    
            axios.get(apiGatewayUrl, { headers: headers})
              .then((response) => {
                  embedDashboard(response.data.EmbedUrl);;
              })
              .catch(function (error) {
                      writeDebugInfo(error);
                      console.log('Error obtaining QuickSight dashboard embed url.');
              });
          }
    
          //Embed the generated url into the div identified to hold the dashboard.
          function embedDashboard(embedUrl) {
              var containerDiv = document.getElementById("dashboardContainer");
              var params = {
                      url: embedUrl,
                      container: containerDiv,
                      width:"100%",
                      height:"1000px"
              };
              var dashboard = QuickSightEmbedding.embedDashboard(params);
          }
    
        </script>
      </head>
      <body>
        <div><img id='logo' src="" style="height:50px;margin-top: 10px;margin-left: 10px;padding-bottom: 10px;" /></div>
        <div id="dashboardContainer"></div>
      </body>
    </html>
    

    2. Remplacez les chaînes suivantes dans le fichier. (Utilisez l'option Remplacer tout)
    <UrlApiGateway> : URL API Gateway/getembedurl
    <cognitoUrl> : https://qseAwsAccountId.auth.us-east-1.amazoncognito.com
    <clientId> : ID client application Cognito enregistré dans le bloc-notes
    <cloudfrontUrl> : https://Nom de domaine CloudFront enregistré dans le bloc-notes

    3. Cliquez avec le bouton droit sur le logo AWS suivant et enregistrez-le sous logo.png
    (ou utilisez votre propre fichier de logo appelé logo.png)

    131

    4. Lancez S3, recherchez qseAwsAccountId et cliquez sur le nom de compartiment.

    132

    5. Cliquez sur le bouton Charger .

    133

    6. Ajoutez qsembed.html et logo.png, puis cliquez sur le bouton Charger.

    134

Conclusion

Vous avez terminé le module 5 avec succès ! Dans le module 6, nous aborderons la configuration des utilisateurs et des domaines.

Ce module vous a-t-il été utile ?

Configuration des utilisateurs et des domaines QuickSight