3단계: 콘솔 세션 URL 임베드 - Amazon Quick Suite

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

3단계: 콘솔 세션 URL 임베드

중요

Amazon Quick Sight에는 임베딩 분석을 위한 새로운 APIs인 GenerateEmbedUrlForAnonymousUser 및가 있습니다GenerateEmbedUrlForRegisteredUser.

GetDashboardEmbedUrl 및 GetSessionEmbedUrl APIs를 사용하여 대시보드와 Amazon Quick Sight 콘솔을 임베딩할 수 있지만 최신 임베딩 기능은 포함되어 있지 않습니다. up-to-date 임베딩 환경은 애플리케이션에 Amazon Quick Sight 분석 임베딩을 참조하세요.

다음 섹션에서는 Amazon Quick Sight 임베딩 SDK(JavaScript)를 사용하여 웹 사이트 또는 애플리케이션 페이지의 3단계에서 콘솔 세션 URL을 임베드하는 방법을 알아볼 수 있습니다. SDK를 사용하여 다음 작업을 수행할 수 있습니다.

  • 콘솔 세션을 HTML 페이지에 배치합니다.

  • 콘솔 세션에 파라미터를 전달합니다.

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

GetSessionEmbedUrl 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"
}

Amazon Quick Sight 임베딩 SDK를 사용하거나이 URL을 iframe에 추가하여 웹 페이지에이 콘솔 세션을 임베딩합니다. 고정 높이 및 너비 숫자(픽셀)를 설정하면 Amazon Quick Sight는 이를 사용하며 창의 크기가 조정될 때 시각적 객체를 변경하지 않습니다. 상대 백분율 높이와 너비를 설정하면 Amazon Quick Sight는 창 크기가 변경될 때 수정되는 응답형 레이아웃을 제공합니다. Amazon Quick Sight 임베딩 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 Quick Sight 임베딩 SDK를 사용하여 JavaScript를 사용하여 웹 사이트에 임베디드 콘솔 세션을 로드해야 합니다. 이 정보를 얻으려면 다음 중 하나를 수행합니다.