嵌入式分析教程

与 Amazon QuickSight 配合使用

模块 5:API 网关和静态网页

在本模块中,我们将继续设置 Web 门户。

简介

在本模块中,我们将通过创建 API 网关来调用 Lambda 函数,并在 S3 存储桶中写入和加载 HTML 静态页面来继续设置 Web 门户。

您将学到的内容

  • 创建 API 网关 – 调用 Lambda 函数。
  • 创建静态网页

 完成时间

20 分钟

 使用的服务

实施

  • 创建 API 网关

    让我们下次设置 API 网关以调用 QSGetEmbedUrl Lambda 函数。

    1.启动 API 网关,然后单击创建 API按钮。

    114

    2.向下滚动到 REST API,然后单击构建按钮。

    115

    3.将 API 名称设置为 QSGetEmbedUrlApi,然后单击创建 API 按钮。

    116

    4.单击操作下拉菜单,然后单击创建资源选项。

    117

    5.设置以下值:
    资源名称:GetEmbedUrl
    启用 API Gateway CORS:已选中
    单击创建资源按钮

    118

    6.单击操作下拉菜单(已选中 getembedurl 资源),然后单击创建方法选项。

    119

    7.从选项框中选择 GET,然后单击刻度线图标。

    120

    8.设置以下值:
    集成类型:Lambda 函数
    使用 Lambda 代理集成:已选中
    Lambda 函数:QSGetEmbedUrl
    单击保存按钮

    121

    9.单击“添加权限”对话框中的 OK 按钮。

    122

    10.单击操作下拉菜单,然后单击部署 API 选项。

    123

    11.做出以下选择。
    部署阶段:选择 [新阶段]
    阶段名称:测试
    单击部署按钮

    124

    12.将调用 URL 保存到记事本中,作为 API Gateway URL

    125
  • 创建静态网页

    我们现在将创建一个静态 html 页面并将它加载到我们的 S3 存储桶中。

    1.将以下 html 代码复制到文件中并命名为 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.替换文件中的以下字符串。(使用“全部替换”选项)
    <apiGatewayUrl>:API Gateway URL/getembedurl
    <cognitoUrl>:https://qseAwsAccountId.auth.us-east-1.amazoncognito.com
    <clientId>:Cognito 应用程序客户端 Id 保存在记事本中
    <cloudfrontUrl>: https://CloudFront 域名 保存在记事本中

    3.右键单击以下 aws 徽标并另存为 logo.png
    (或使用您自己的徽标文件命名为 logo.png)

    131

    4.启动 S3,搜索 qseAwsAccountId 并单击存储桶名称。

    132

    5.单击上传

    133

    6.添加 qsembed.htmllogo.png,然后单击上传按钮。

    134

结论

您已成功完成模块 5 的学习! 接下来,让我们在模块 6 中学习如何进行用户和域设置。

此模块有帮助吗?

QuickSight 用户和域设置