Embed SDK로 Looker를 삽입하는 방법

1. 시작하기 전에

이 Codelab에서는 Looker Embed SDK를 사용하여 Looker 대시보드를 웹페이지에 삽입합니다. iframe을 자동으로 만들고, Looker 콘텐츠를 iframe에 삽입하고, iframe과 웹페이지 간의 통신을 설정하는 일련의 SDK 메서드를 호출합니다.

기본 요건

실행 중인 Looker 인스턴스가 있어야 합니다.
웹 애플리케이션 또는 웹페이지에 삽입하려는 Looker 대시보드가 있어야 합니다.
JavaScript 및 JavaScript 프라미스에 익숙해야 합니다.

학습할 내용

Embed SDK를 사용하여 Looker 콘텐츠를 비공개로 삽입하는 방법
Embed SDK를 사용하여 삽입된 Looker 콘텐츠로 메시지 (작업 및 이벤트)를 보내고 받는 방법

필요한 항목

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

2. 준비하기

Embed SDK로 삽입하려면 먼저 HTML과 Looker 인스턴스를 준비해야 합니다.

삽입 iframe의 컨테이너 요소 추가

웹페이지의 HTML 내에서 div 요소를 만들고 id 속성을 정의합니다.

<div id="looker-embed" />

Looker 인스턴스에서 삽입의 도메인을 허용 목록에 추가하기

Looker 인스턴스에서 삽입의 도메인을 허용 목록에 추가해야 합니다.

삽입된 Looker 콘텐츠를 호스팅하는 웹페이지의 도메인을 확인합니다. 웹페이지의 URL이 https://mywebsite.com/with/embed이면 웹페이지의 도메인은 https://mywebsite.com입니다.

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

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

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

3. 삽입 빌드

이제 SDK의 삽입 빌더를 만들어 삽입된 Looker 콘텐츠를 '빌드'해 보겠습니다.

SDK 초기화

먼저 Looker 인스턴스의 도메인으로 SDK를 가져온 후 초기화합니다.

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

삽입 빌더 만들기

다음으로, 삽입하려는 Looker 대시보드의 ID를 확인합니다. 대시보드가 instance_name.looker.com/dashboard/12345에 있는 경우 대시보드의 ID는 12345입니다.

대시보드 ID를 사용하여 SDK createDashboardWithId() 메서드를 호출하여 삽입 빌더를 만듭니다. 이 메서드는 삽입 빌더를 반환합니다.

LookerEmbedSDK.createDashboardWithId(12345)

삽입 빌더 구성 및 빌드

이제 삽입된 iframe을 빌드하도록 지시하기 전에 삽입 빌더를 구성해 보겠습니다. 이전 코드 샘플의 createDashboardWithId() 메서드 호출 바로 뒤에 다음 코드 샘플을 추가합니다.

  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

삽입 빌더의 각 메서드는 삽입 빌더 자체를 반환하므로 메서드 호출을 연결합니다. 각 방법을 살펴보겠습니다.

appendTo() 메서드는 iframe의 상위 요소를 결정합니다. 준비 단계에서 이전에 정의한 HTML 요소의 ID를 전달합니다.
withFrameBorder() 메서드는 iframe의 frame-border 속성을 설정합니다. 이는 iframe에서 HTML 속성을 정의하는 여러 방법 중 하나입니다.
build() 메서드는 구성된 HTML 속성으로 iframe을 생성합니다.

최종 확인

이전 단계를 따르면 코드가 다음과 같이 표시됩니다.

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

이제 Embed SDK를 사용하여 Looker 대시보드를 웹페이지에 삽입했습니다.

4. 삽입 메시지 보내고 받기

이제 Embed SDK를 사용하여 삽입된 Looker 콘텐츠로 메시지를 주고받는 방법을 살펴보겠습니다. 애플리케이션이 iframe에 전송하는 메시지를 작업이라고 하고, 애플리케이션이 iframe에서 수신하는 메시지를 이벤트라고 합니다.

이벤트 수신

이전 코드를 사용해 보겠습니다. 이벤트를 수신 대기하려면 build() 메서드를 호출하기 전에 삽입 빌더의 on() 메서드를 호출합니다.

...
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
...

여기서는 iframe이 빌드될 때 iframe에서 발생하는 dashboard:run:complete 이벤트에 이벤트 리스너를 설정하기 위해 on() 메서드를 호출합니다. 이 이벤트를 통해 대시보드 로드가 완료되는 시점을 알 수 있습니다. 수신 대기할 다른 이벤트는 이벤트 참조를 확인하세요.

전송 작업

이전 코드를 계속 사용하겠습니다. iframe에 작업을 전송하기 위해 iframe으로 메시지 전송 및 수신을 초기화하는 build() 메서드를 호출한 후 삽입 빌더의 connect() 메서드를 호출합니다.

...  
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')
...

이 코드 샘플을 살펴보겠습니다.

프로미스를 반환하는 connect() 메서드를 호출합니다. 메시지 전송 및 수신 메커니즘이 초기화된 후 프로미스는 삽입된 iframe을 나타내는 삽입 객체로 확인됩니다.
삽입 객체에서 send() 메서드를 호출하여 dashboard:run 작업을 전송합니다. 전송할 다른 작업은 작업 참조를 확인하세요.
초기화 중에 오류가 발생할 경우를 대비해 catch() 메서드를 추가합니다.

최종 확인

이전 단계에 따라 코드가 다음과 같이 표시됩니다.

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
  .build()
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')

이제 삽입된 Looker 대시보드와 통신할 수 있습니다.

5. 추가 정보

축하합니다. 이제 Embed SDK를 사용하여 Looker 대시보드를 비공개로 삽입하고 iframe에서 메시지를 보내고 받을 수 있습니다. 자세한 내용은 다음 리소스를 참고하세요.

Looker를 삽입하는 방법(특히 Looker 콘텐츠를 SSO 삽입하려는 경우)에 대한 자세한 내용은 Embed SDK 저장소를 참고하세요.
사용 가능한 모든 이벤트 및 속성에 대한 이벤트 참조
사용 가능한 모든 작업과 속성의 작업 참조
Looker 콘텐츠 삽입과 관련된 보안 권장사항