이 페이지는 Cloud Translation API를 통해 번역되었습니다.

삽입된 Looker iframe 메시지

1. 시작하기 전에

비공개 삽입 또는 SSO 삽입을 사용하여 iframe 내에 Looker 콘텐츠를 삽입해야 합니다. 이 Codelab에서는 자바스크립트를 통해 iframe과 상호작용하여 웹페이지를 더욱 동적으로 만듭니다. 웹페이지는 iframe에 삽입된 Looker 콘텐츠와 메시지를 주고받습니다.

기본 요건

실행 중인 Looker 인스턴스 있음
Looker 대시보드가 iframe 내에 비공개로 삽입되거나 SSO로 삽입되어 있습니다.
window.postMessage() 메서드 이해

학습할 내용

JavaScript 상호작용을 위해 iframe 및 Looker 인스턴스를 준비하는 방법
iframe에서 이벤트를 수신하는 방법
iframe으로 작업 메시지를 보내는 방법

필요한 항목

iframe을 관리하는 프런트엔드 코드의 HTML 및 JavaScript에 대한 액세스
Looker 인스턴스의 관리자 삽입 설정에 대한 액세스 권한

2. 준비

iframe과 상호작용하려면 먼저 iframe과 Looker 인스턴스를 준비해야 합니다.

`id` 속성을 iframe에 추가

iframe에서 전송되는 메시지를 확인해야 합니다. 이렇게 하려면 iframe에 id 속성을 정의합니다.

<iframe 
    id="looker"
    src="https://instance_name.looker.com/embed/dashboards/1"
>
</iframe>

iframe의 `src` 속성에 삽입 도메인을 추가합니다.

iframe을 호스팅하는 웹페이지의 도메인을 확인합니다. 웹페이지의 URL이 https://mywebsite.com/with/embed이면 웹페이지 도메인이 https://mywebsite.com이라고 가정해 보겠습니다.

비공개 임베딩을 사용하는 경우 iframe의 src에서 도메인을 embed_domain 쿼리 매개변수로 추가합니다.

<iframe
    id="looker"
    src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://mywebsite.com"
>
</iframe>

SSO 삽입을 사용하는 경우 도메인을 삽입 URL에 embed_domain 쿼리 매개변수로 추가합니다.

Looker 인스턴스에서 삽입 도메인을 허용합니다.

마지막으로 메시지 전송을 허용하려면 Looker 인스턴스에서 삽입 도메인을 허용해야 합니다.

Looker 인스턴스의 관리 섹션에서 삽입 페이지로 이동합니다. https://your_instance.looker.com/admin/embed

Embedded Domain Allowlist(삽입된 도메인 허용 목록) 입력란에 삽입의 도메인을 입력합니다. 도메인 이름을 입력한 후 Tab 키를 눌러 도메인이 상자에 표시되도록 합니다. 후행 슬래시 /는 포함하지 마세요.

업데이트 버튼을 클릭합니다.

3. iframe의 이벤트 메시지 수신 대기

Looker 콘텐츠가 삽입된 iframe은 호스트 웹페이지로 메시지를 전송합니다. 이러한 이벤트 메시지에는 삽입된 Looker 콘텐츠에 관한 시의적절한 정보(예: 삽입된 대시보드가 로드되기 시작했거나 사용자가 삽입된 콘텐츠 내에서 '다운로드' 옵션을 선택한 경우)가 포함됩니다. 이러한 이벤트를 수신하고 파싱해 보겠습니다.

이벤트 객체 스키마 이해하기

이벤트 객체의 스키마는 다음과 같습니다.

{
  type: "...",
  eventSpecificProperty1: ...,
  eventSpecificProperty2: ...,
  ...
}

이벤트에는 항상 어떤 이벤트인지 확인할 수 있는 type 속성이 있습니다. 다른 모든 이벤트별 속성은 이벤트 참조에 정의되어 있습니다.

이벤트 수신 및 파싱

웹페이지의 JavaScript가 iframe을 초기화하거나 관리하는 위치에 다음을 추가합니다.

window.addEventListener("message", function(message) {
  const iframeElement = document.getElementById("looker");
  if (message.source === iframeElement.contentWindow) {
    if (message.origin === "https://instance_name.looker.com") {
      const event = JSON.parse(message.data);
      switch (event.type):
        case "dashboard:run:start":
          console.log("The embedded dashboard has started loading"); 
    }
  }
});

이 코드 스니펫은 다음 작업을 실행합니다.

window 객체에서 "message" 이벤트를 수신 대기합니다.
메시지의 source 속성이 삽입된 Looker 콘텐츠가 있는 iframe인지 확인합니다.
메일의 origin 속성이 Looker 인스턴스의 도메인인지 확인합니다.
JSON은 메시지의 data 속성을 파싱하여 이벤트 객체에 액세스하고 파싱합니다.
이벤트 객체의 type 속성을 사용 설정하여 이벤트 유형을 확인하고 이에 따라 작업을 실행합니다.

이제 호스트 웹페이지가 삽입된 Looker 콘텐츠에서 내보내는 이벤트에 동적으로 반응할 수 있습니다.

4. iframe에 작업 메시지 전송

호스트 웹페이지에서도 iframe에 삽입된 Looker 콘텐츠로 메시지를 보낼 수 있습니다. 이러한 작업 메시지는 삽입된 대시보드의 필터를 업데이트하는 것처럼 삽입된 Looker 콘텐츠의 상태를 변경할 수 있습니다. 삽입된 대시보드에 쿼리를 실행하고 메시지를 iframe으로 전송하도록 지시하는 작업 메시지를 만들어 보겠습니다.

작업 메시지 만들기

웹페이지의 JavaScript 내에 작업 메시지를 만듭니다.

const action = { type: "dashboard:run" };
const actionJSONFormatted = JSON.stringify(action);

action 객체는 이전 event 객체와 동일한 형식을 따릅니다. 항상 type 속성이 있고 작업 참조에 정의된 작업별 속성이 있습니다. 작업 메시지는 JSON 형식이어야 합니다.

작업 메시지 보내기

웹페이지의 JavaScript 내에서 JSON 형식의 작업을 iframe으로 전송합니다.

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');

작업을 전송할 iframe을 결정합니다.
iframe의 contentWindow 속성에서 postMessage() 메서드를 호출하여 메시지를 전송합니다.

이제 호스트 웹페이지에서 삽입된 Looker 콘텐츠의 상태를 동적으로 변경할 수 있습니다.

5. 추가 정보

축하합니다. 이제 iframe의 삽입된 Looker 콘텐츠에서 이벤트를 수신 대기하고 작업을 전송할 수 있습니다. 자세한 내용은 다음 리소스를 확인하세요.

사용 가능한 모든 이벤트 및 속성에 대한 이벤트 참조
사용 가능한 모든 작업 및 해당 속성에 대한 작업 참조
Looker 콘텐츠 삽입과 관련된 보안 권장사항