內嵌式分析教學

搭配 Amazon QuickSight

單元五:API 閘道與靜態網頁

在本單元,我們將繼續設定 Web 入口網站。

簡介

在本單元中,我們將繼續透過建立 API 閘道,叫用 Lambda 函數,並在 S3 儲存貯體中撰寫和載入 HTML 靜態頁面來設定 Web 入口網站。

您將學到的內容

  • 建立 API 閘道 - 叫用 Lambda 函數。
  • 建立靜態網頁

 完成時間

20 分鐘

 使用的服務

實作

  • 建立 API 閘道

    接下來,讓我們設定 API 閘道,以叫用 QSGetEmbedUrl Lambda 函數。

    1.啟動 API 閘道並按一下 Create API (建立 API) 按鈕。

    114

    2.向下捲動至 REST API 並按一下 Build (建置) 按鈕。

    115

    3.將 API 名稱設定為 QSGetEmbedUrlApi,然後按一下 Create API (建立 API) 按鈕。

    116

    4.按一下 Actions (動作) 下拉清單,然後按一下 Create Resource (建立資源) 選項。

    117

    5.設定下列值。
    資源名稱:GetEmbedUrl
    啟用 API Gateway CORS:已核取
    按一下 Create Resource (建立資源) 按鈕

    118

    6.按一下 Actions (動作) 下拉清單 (已選取 getembedurl 資源),然後按一下 Create Method (建立方法) 選項。

    119

    7.從選項方塊選取 GET,然後按一下刻度圖示。

    120

    8.設定下列值。
    整合類型:Lambda 函數
    Use Lambda Proxy integration (使用 Lambda 代理整合):已核取
    Lambda 函數:QSGetEmbedUrl
    按一下 Save (儲存) 按鈕

    121

    9.按一下 Add Permission (新增權限) 對話方塊中的 OK (確定) 按鈕。

    122

    10.按一下 Actions (動作) 下拉清單,然後按一下 Deploy API (部署 API) 選項。

    123

    11.做出以下選擇。
    部署階段:選取 [New Stage]
    階段名稱:test
    按一下 Deploy (部署) 按鈕

    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 App Client Id (儲存在記事本中)
    <cloudfrontUrl>: https://CloudFront Domain Name (儲存在記事本中)

    3.右鍵按一下下列 aws 標誌並另存為 logo.png
    (或使用自己名為 logo.png 的標誌檔案)

    131

    4.啟動 S3,搜尋 qseAwsAccountId按一下儲存貯體名稱。

    132

    5.按一下 Upload (上傳) 按鈕

    133

    6.新增 qsembed.htmllogo.png,然後按一下 Upload (上傳) 按鈕。

    134

結論

您已成功完成單元五! 下一步,讓我們在單元六中進行使用者和網域設定。

這個單元對您是否有幫助?

QuickSight 使用者和網域設定