3단계: 대시보드 URL 임베드 - Amazon QuickSight

3단계: 대시보드 URL 임베드

중요

Amazon QuickSight는 분석 기능을 포함하기 위한 새로운 API, 즉 GenerateEmbedUrlForAnonymousUser와(과) GenerateEmbedUrlForRegisteredUser을(를) 제공합니다.

여전히 GetDashboardEmbedUrl 및 GetSessionEmbedUrl API를 사용하여 대시보드와 QuickSight 콘솔을 내장할 수 있지만, 여기에는 최신 임베딩 기능이 포함되어 있지 않습니다. 최신 임베딩 환경에 대한 자세한 내용은 애플리케이션에 QuickSight 분석 임베딩을(를) 참조하세요.

다음 단원에서는 Amazon QuickSight 임베딩 SDK(JavaScript)를 사용하여 3단계의 대시보드 URL을 웹 사이트 또는 애플리케이션 페이지에 포함하는 방법을 알아볼 수 있습니다. SDK를 사용하여 다음 작업을 수행할 수 있습니다.

  • HTML 페이지에 대시보드 배치

  • 대시보드에 파라미터 전달

  • 애플리케이션에 사용자 지정되는 메시지로 오류 상태 처리

GetDashboardEmbedUrl API 작업을 호출하여 앱에 포함할 수 있는 URL을 가져오세요. 이 URL은 5분 동안 유효하며 결과 세션은 10시간 동안 유효합니다. 이 API 작업은 URL에 single-sign on 세션을 허용하는 auth_code을(를) 제공합니다.

다음은 get-dashboard-embed-url의 응답 예입니다.

//The URL returned is over 900 characters. For this example, we've shortened the string for
//readability and added ellipsis to indicate that it's incomplete.
{
     "Status": "200",
     "EmbedUrl": "https: //dashboards.example.com/embed/620bef10822743fab329fb3751187d2d...",
     "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}

QuickSight 임베딩 SDK를 사용하거나 이 URL을 iframe에 추가하여 웹 페이지에 이 대시보드를 포함합니다. 고정 높이 및 너비(단위: 픽셀)를 설정한 경우, QuickSight에서 이들 설정을 사용하고 창 크기가 바뀔 때 시각적 개체를 변경하지 않습니다. 상대 비율 높이 및 너비를 설정한 경우, QuickSight가 창 크기 변화에 따라 수정되는 반응형 레이아웃을 제공합니다. Amazon QuickSight 임베딩 SDK를 사용하여, 대시보드 안에서 파라미터를 제어하고 페이지 로드 완료 및 오류로 콜백을 수신할 수도 있습니다.

다음 예제는 생성된 URL을 사용하는 방법을 보여 줍니다. 이 코드는 앱 서버에서 생성됩니다.

<!DOCTYPE html>
<html>

<head>
    <title>Basic Embed</title>

    <script src="./quicksight-embedding-js-sdk.min.js"></script>
    <script type="text/javascript">
        var dashboard;

        function embedDashboard() {
            var containerDiv = document.getElementById("embeddingContainer");
            var options = {
                // replace this dummy url with the one generated via embedding API
                url: "https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/dashboardId?isauthcode=true&identityprovider=quicksight&code=authcode",  
                container: containerDiv,
                scrolling: "no",
                height: "700px",
                width: "1000px",
                footerPaddingEnabled: true
            };
            dashboard = QuickSightEmbedding.embedDashboard(options);
        }
    </script>
</head>

<body onload="embedDashboard()">
    <div id="embeddingContainer"></div>
</body>

</html>

이 예제가 제대로 작동하려면, Amazon QuickSight 임베딩 SDK를 사용하여 JavaScript로 웹 사이트에 임베디드 대시보드를 로드해야 합니다. 이 정보를 얻으려면 다음 중 하나를 수행합니다.