Docs Menu
Docs Home
/
Atlas Charts
/
임베딩
/
임베딩 SDK

임베딩 SDK 시작하기

임베딩 SDK 를 사용하여 차트 나 대시보드 를 웹 애플리케이션 에 임베드하여 설정 및 렌더링을 보다 유연하게 조정할 수 있습니다.

전제 조건

절차

임베딩 활성화

1

대시보드를 선택합니다.

대시보드 페이지에서 임베드 가능하게 만들 차트가 포함된 대시보드를 선택합니다.

2

차트를 선택합니다.

대시보드에서 다음을 클릭합니다. 을(를) 클릭하여 임베딩 정보에 액세스합니다. 드롭다운 메뉴에서 Embed chart 를 선택합니다.

참고

임베딩이 활성화된 대시보드에 차트가 있는 경우 Embed Chart 옵션이 자동으로 활성화됩니다. 따라서 임베딩이 활성화된 대시보드 내의 차트에 대해서는 Embed chart 옵션을 선택할 수 없습니다.

3

데이터 소스에서 외부 공유를 활성화합니다.

If you have already enabled external sharing on the data source this chart uses, skip this step. 아직 데이터 소스에서 임베딩을 활성화하지 않은 경우 지금 활성화할 수 있습니다. Configure external sharing 링크를 클릭합니다.

4

Unauthenticated 대화 상자 창 에서 탭 을 선택합니다.

인증되지 않은 차트 임베드
클릭하여 확대
5

Enable unauthenticated access 을 로 On 전환합니다.

6

(선택 사항) 차트 에 대해 필터링 가능한 필드를지정합니다.

차트 뷰어에서 데이터를 필터링할 수 있는 필드를 지정합니다. 기본적으로 필드는 지정되지 않으므로, 하나 이상의 필드를 명시적으로 허용할 때까지 차트를 필터링할 수 없습니다.

또는 Allow all fields in the data source used in this chart 을 선택하여 차트의 모든 필드를 지정할 수 있습니다.

필터링 가능한 필드에 대해 자세히 알아보려면 필터링 가능한 필드 지정을 참조하세요.

7

Javascript SDK 패널을 선택합니다.

8

및 을(를)Charts Base URL Chart ID복사합니다.

웹 애플리케이션 코드에는 Atlas Charts 기본 URL 및 ID 값이 필요합니다.

1

대시보드를 선택합니다.

대시보드 페이지에서 임베드하려는 차트가 포함된 대시보드를 선택합니다.

2

차트를 선택합니다.

대시보드에서 다음을 클릭합니다. 을(를) 클릭하여 임베딩 정보에 액세스합니다. 드롭다운 메뉴에서 Embed chart 를 선택합니다.

참고

임베딩이 활성화된 대시보드에 차트가 있는 경우 Embed Chart 옵션이 자동으로 활성화됩니다. 따라서 임베딩이 활성화된 대시보드 내의 차트에 대해서는 Embed chart 옵션을 선택할 수 없습니다.

3

데이터 소스에서 외부 공유 활성화

If you have already enabled external sharing on the data source this chart uses, skip this step. 아직 데이터 소스에서 임베딩을 활성화하지 않은 경우 지금 활성화할 수 있습니다. Configure external sharing 링크를 클릭합니다.

4

Authenticated 대화 상자 창 에서 탭 을 선택합니다.

인증 차트 임베드
클릭하여 확대
5

Enable authenticated access 을 로 On 전환합니다.

6

(선택 사항) 사용자별로 삽입할 필터하다 함수를 지정합니다.

차트를 보는 각 사용자에게 MongoDB 필터 문서를 삽입하는 함수를 지정할 수 있습니다. 이는 사용자별 Atlas Charts를 렌더링할 때 유용합니다.

예시

다음 필터 함수는 문서의 ownerId 필드가 임베딩 인증 제공자의 토큰의 sub 필드 값과 일치하는 데이터만 렌더링합니다.

function getFilter(context) {
  return { ownerId: context.token.sub };
}

팁

사용자별 필터를 삽입하는 방법에 대해 자세히 알아보려면 사용자별 필터 삽입을 참조하세요.

7

(선택 사항) 차트 에 대해 필터링 가능한 필드를지정합니다.

차트 뷰어에서 데이터를 필터링할 수 있는 필드를 지정합니다. 기본적으로 필드는 지정되지 않으므로, 하나 이상의 필드를 명시적으로 허용할 때까지 차트를 필터링할 수 없습니다.

팁

필터링 가능한 필드에 대해 자세히 알아보려면 필터링 가능한 필드 지정을 참조하세요.

8

및 복사 Chart Base URL Chart ID

애플리케이션 코드에서 이러한 값을 내장된 인증 제공자 속성과 함께 사용하여 차트를 임베드하세요.

임베딩 인증 제공자 구성하기

1
로 고 (Go)Charts 합니다.

경고

탐색 기능 개선 작업 진행 중

현재 새롭고 향상된 탐색 환경을 출시하고 있습니다. 다음 단계가 Charts UI 의 보기와 일치하지 않는 경우 미리보기 문서를 참조하세요.

Atlas Charts가 아직 표시되지 않은 경우 Atlas UI에서 Charts 탭을 클릭합니다.

Atlas가 프로젝트에 연결된 Charts의 인스턴스를 시작합니다.

2
Embedding 페이지로 이동합니다.

경고

탐색 기능 개선 작업 진행 중

현재 새롭고 향상된 탐색 환경을 출시하고 있습니다. 다음 단계가 Charts UI 의 보기와 일치하지 않는 경우 미리 보기 설명서를 참조하세요.

사이드바의 Development 제목 아래에 있는 Embedding 을 클릭합니다.

임베딩 페이지가 표시됩니다.

3
보기로 Authentication Settings 고 (Go) 합니다.

경고

탐색 기능 개선 작업 진행 중

현재 새롭고 향상된 탐색 환경을 출시하고 있습니다. 다음 단계가 Charts UI 의 보기와 일치하지 않는 경우 미리 보기 설명서를 참조하세요.

참고

Authentication Settings 페이지에 액세스 하려면 프로젝트 소유자 여야 합니다. 관리자가 아닌 사용자는 포함된 차트를 계속 사용할 수 있지만 프로젝트 소유자로부터 키를 받아야 합니다.

Authentication Settings 탭을 클릭합니다.

인증 설정 탭 이 표시됩니다.

4
인증 제공자를 추가합니다.

  1. Authentication providers 섹션에서 Add 을 클릭합니다.

  2. Name 필드에 제공자를 설명하는 이름을 입력합니다.

  3. Provider 목록에서 추가하려는 제공자 유형을 선택합니다.

  4. Charts를 구성하여 제공자의 토큰을 확인합니다.

    입력해야 하는 값은 선택한 제공자에 따라 다릅니다.

    • Google

      Client ID 필드 에 애플리케이션의 Google API 클라이언트 ID 다음 형식으로 입력합니다.

      <prefix>.apps.googleusercontent.com

    • 사용자 지정 JWT

      다음 값을 입력합니다.

      필드
      값

      서명 알고리즘

      JWT 서명을 인코딩하는 데 사용되는 암호화 알고리즘 입니다.

      다음 중 하나여야 합니다.

      서명 키

      JSON web token 서명의 유효성을 검사하는 데 사용되는 비밀 또는 키입니다. 토큰에 서명되지 않은 경우 Charts는 유효하지 않은 것으로 간주합니다. 잘못된 키를 제공하면 Charts는 토큰 서명을 확인할 수 없으며 유효하지 않은 것으로 간주합니다.

      제공해야 하는 값은 Signing Algorithm 에 따라 달라집니다.

      • HS256: JSON web token 서명에 사용되는 비밀 키를 입력합니다.

      • RS256: JWK or JWKS URL 또는 PEM Public Key 을 선택합니다.

        JWK or JWKS URL을 선택하면 Charts 는 JWK 에서 키를 검색합니다. 또는 지정된 URL 에 JWKS 파일 을 추가합니다. 그런 다음 Charts 는 이 키를 사용하여 JSON web token 의 유효성을 검사합니다. 파일 에 여러 개의 키가 있는 경우 Charts 는 일치하는 키를 찾을 때까지 각 키를 시도합니다. JWK 또는 JWKS 파일 이 포함된 URL 을 입력합니다.

        PEM Public Key 을 선택하면 Charts 는 지정된 공개 키를 사용하여 JSON web token 을 확인합니다. JSON web token 에 서명하는 데 사용된 키 쌍의 공개 키를 입력합니다. 공개 키는 PEM 형식 이어야 합니다. , 다음 예시 와 같습니다.

         -----BEGIN CERTIFICATE-----
         MIIDfjCCAmagAwIBAgIBBzANBgkqhkiG9w0BAQUFADB0MRcwFQYDVQQDEw5LZXJu
         ZWwgVGVzdCBDQTEPMA0GA1UECxMGS2VybmVsMRAwDgYDVQQKEwdNb25nb0RCMRYw
         FAYDVQQHEw1OZXcgWW9yayBDaXR5MREwDwYDVQQIEwhOZXcgWW9yazELMAkGA1UE
         BhMCVVMwHhcNMTQwNzE3MTYwMDAwWhcNMjAwNzE3MTYwMDAwWjBsMQ8wDQYDVQQD
         EwZzZXJ2ZXIxDzANBgNVBAsTBktlcm5lbDEQMA4GA1UEChMHTW9uZ29EQjEWMBQG
         A1UEBxMNTmV3IFlvcmsgQ2l0eTERMA8GA1UECBMITmV3IFlvcmsxCzAJBgNVBAYT
         AlVTMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAp76KJeDczBqjSPJj
         5f8DHdtrWpQDK9AWNDlslWpi6+pL8hMqwbX0D7hC2r3kAgccMyFoNIudPqIXfXVd
         1LOh6vyY+jveRvqjKW/UZVzZeiL4Gy4bhke6R8JRC3O5aMKIAbaiQUAI1Nd8LxIt
         LGvH+ia/DFza1whgB8ym/uzVQB6igOifJ1qHWJbTtIhDKaW8gvjOhv5R3jzjfLEb
         R9r5Q0ZyE0lrO27kTkqgBnHKPmu54GSzU/r0HM3B+Sc/6UN+xNhNbuR+LZ+EvJHm
         r4de8jhW8wivmjTIvte33jlLibQ5nYIHrlpDLEwlzvDGaIio+OfWcgs2WuPk98MU
         tht0IQIDAQABoyMwITAfBgNVHREEGDAWgglsb2NhbGhvc3SCCTEyNy4wLjAuMTAN
         BgkqhkiG9w0BAQUFAAOCAQEANoYxvVFsIol09BQA0fwryAye/Z4dYItvKhmwB9VS
         t99DsmJcyx0P5meB3Ed8SnwkD0NGCm5TkUY/YLacPP9uJ4SkbPkNZ1fRISyShCCn
         SGgQUJWHbCbcIEj+vssFb91c5RFJbvnenDkQokRvD2VJWspwioeLzuwtARUoMH3Y
         qg0k0Mn7Bx1bW1Y6xQJHeVlnZtzxfeueoFO55ZRkZ0ceAD/q7q1ohTXi0vMydYgu
         1CB6VkDuibGlv56NdjbttPJm2iQoPaez8tZGpBo76N/Z1ydan0ow2pVjDXVOR84Y
         2HSZgbHOGBiycNw2W3vfw7uK0OmiPRTFpJCmewDjYwZ/6w==
         -----END CERTIFICATE-----

      오디언스(선택 사항)

      오디언스 클레임 JSON web token Charts 가 유효한 것으로 간주하려면 에 있어야 합니다.

  5. Save를 클릭합니다.

1

대시보드를 선택합니다.

대시보드 페이지에서 임베드할 대시보드를 선택합니다.

2

Embed를 선택합니다.

대시보드에서 다음을 클릭합니다. 을(를) 클릭하여 임베딩 정보에 액세스할 수 있습니다. 드롭다운 메뉴에서 Embed 를 선택합니다.

3

데이터 소스에서 외부 공유를 활성화합니다.

이 대시보드가 사용하는 데이터 소스에서 외부 공유를 이미 활성화한 경우 이 단계를 건너뜁니다. 아직 데이터 소스에서 임베딩을 활성화하지 않은 경우 지금 활성화할 수 있습니다. Configure 링크를 클릭합니다.

4

Unauthenticated 대화 상자 창 에서 탭 을 선택합니다.

5

Enable unauthenticated access 을 로 On 전환합니다.

6

(선택 사항) 대시보드 에 대해 필터링 가능한 필드를지정합니다.

대시보드 뷰어가 데이터를 필터링할 수 있는 필드를 지정합니다. 기본적으로 필드는 지정되지 않으므로, 하나 이상의 필드를 명시적으로 허용할 때까지 대시보드를 필터링할 수 없습니다.

또는 Allow all fields in the data source used in this dashboard 를 선택하여 대시보드의 모든 필드를 지정할 수 있습니다.

필터링 가능한 필드에 대해 자세히 알아보려면 필터링 가능한 필드 지정을 참조하세요.

7

Javascript SDK 패널을 선택합니다.

8

기본 URL 을 복사하여 저장합니다.

9

대시보드 ID 를 복사하여 저장합니다.

1

대시보드를 선택합니다.

대시보드 페이지에서 임베드할 대시보드를 선택합니다.

2

Embed를 선택합니다.

대시보드에서 다음을 클릭합니다. 을(를) 클릭하여 임베딩 정보에 액세스할 수 있습니다. 드롭다운 메뉴에서 Embed 를 선택합니다.

3

데이터 소스에서 외부 공유를 활성화합니다.

이 대시보드가 사용하는 데이터 소스에서 외부 공유를 이미 활성화한 경우 이 단계를 건너뜁니다. 아직 데이터 소스에서 임베딩을 활성화하지 않은 경우 지금 활성화할 수 있습니다. Configure 링크를 클릭합니다.

4

Authenticated 대화 상자 창 에서 탭 을 선택합니다.

5

Enable authenticated access 을 로 On 전환합니다.

6

인증 제공자를 추가합니다.

이미 인증 제공자를 설정하다 한 경우 이 단계를 건너뛰세요. 아직 인증 제공자를 설정하다 하지 않았다면 지금 설정하면 됩니다.

학습 내용은 임베딩 인증 제공자 구성을 참조하세요.

  1. Add를 클릭합니다.

  2. 인증 통합의 이름을 지정합니다.

  3. 제공자 제공자 을 지정합니다.

  4. Save를 클릭합니다.

  5. Back to Embed Dashboard를 클릭합니다.

7

(선택 사항) 사용자별로 삽입할 필터하다 함수를 지정합니다.

대시보드 를 보는 각 사용자에 대해 MongoDB 필터하다 문서 를 삽입하는 함수를 지정할 수 있습니다. 이는 사용자별 대시보드를 렌더링하는 데 유용합니다.

예시

다음 필터 함수는 문서의 ownerId 필드가 임베딩 인증 제공자의 토큰의 sub 필드 값과 일치하는 데이터만 렌더링합니다.

function getFilter(context) {
  return { ownerId: context.token.sub };
}

팁

사용자별 필터를 삽입하는 방법에 대해 자세히 알아보려면 사용자별 필터 삽입을 참조하세요.

8

(선택 사항) 대시보드 에 대해 필터링 가능한 필드를지정합니다.

대시보드 뷰어가 데이터를 필터링할 수 있는 필드를 지정합니다. 기본적으로 필드는 지정되지 않으므로, 하나 이상의 필드를 명시적으로 허용할 때까지 대시보드를 필터링할 수 없습니다.

또는 Allow all fields in the data source used in this dashboard 를 선택하여 대시보드의 모든 필드를 지정할 수 있습니다.

필터링 가능한 필드에 대해 자세히 알아보려면 필터링 가능한 필드 지정을 참조하세요.

9

기본 URL 을 복사하여 저장합니다.

10

대시보드 ID 를 복사하여 저장합니다.

웹 앱 만들기

나머지 단계를 진행하여 차트를 표시할 새 앱을 만듭니다.

참고

MongoDB 는 리포지토리 에서 사전 Github 빌드된 예제 앱을 제공합니다. 임베딩 SDK를 사용하여 인증되지 않은 임베딩된 차트를 표시하는 방법을 보여줍니다.

나머지 단계를 진행하여 차트를 표시할 새 앱을 만듭니다.

참고

MongoDB 는 Github 리포지토리 에서 사전 구축된 예시 를 제공합니다. 임베딩 SDK를 사용하여 인증 제공자 를 통해 임베딩된 차트 를 인증하는 방법을 보여줍니다.

나머지 단계를 진행하여 대시보드 를 표시할 새 앱 을 만듭니다.

참고

MongoDB 는 인증되지 않은 임베디드 대시보드 의 사전 구축된 예시 Github 를 제공합니다. 리포지토리에 있습니다. 이 예시 에서는 임베딩 SDK를 사용하여 인증되지 않은 임베디드 대시보드 를 표시하는 방법을 보여줍니다.

나머지 단계를 진행하여 대시보드를 표시할 새 앱 을 만듭니다.

참고

MongoDB GitHub 리포지토리에서 인증된 임베디드 대시보드의 예제를 제공합니다. 이 예제에서는 Embedding SDK를 사용하여 Google 또는 JWT 인증 제공자를 통해 내장된 대시 대시보드 인증하는 방법을 보여줍니다.

앱에 임베딩 코드 추가

앱에 임베딩 SDK를 설치하는 방법을 알아보려면 임베딩 SDK 설치를 참조하세요.

웹 앱에 다음 코드를 추가하여 차트를 렌더링할 위치에서 실행하세요.

참고

기존 차트 기본 URL 및 차트 ID를 표시하려는 차트의 값으로 바꿉니다. 차트 기본 URL과 차트 ID는 임베딩 옵션 모달 창에서 볼 수 있습니다.

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Chart dialog.
});
const chart = sdk.createChart({
  chartId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // ~REPLACE~ with the Chart ID from your Embed Chart dialog.
  height: "700px",
  // Additional options go here
});
chart.render(document.getElementById("chart"));

웹 앱 에 다음 코드를 추가하여 차트 를 렌더링할 위치에서 실행합니다. 다음 예시 Google 토큰으로 인증합니다.

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const id_token = googleUser.getAuthResponse().id_token;
const ChartsEmbedSDK = window.ChartsEmbedSDK;
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // Optional: replace with your Charts URL
   getUserToken: () => id_token,
});
const chart = sdk.createChart({
   chartId: "8d4dff93-e7ca-4ccd-a622-e20e8a100197", // Optional: replace with your Chart ID
});
document.body.classList.toggle("logged-in", true);
chart.render(document.getElementById("chart"));

웹 앱 에 다음 코드를 추가하여 대시보드 를 렌더링할 위치에서 실행합니다.

참고

기존 Dashboards Base URL 및 대시보드 ID 를 표시하려는 대시보드 의 값으로 바꿉니다. 임베딩 옵션 모달 창 에서 Dashboards Base URL 및 대시보드 ID 를 볼 수 있습니다.

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Dashboard dialog.
});
const dashboard = sdk.createDashboard({
   dashboardId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // ~REPLACE~ with the Dashboard ID from your Embed Dashboard dialog.
   height: "700px",
   widthMode: "scale",
   heightMode: "fixed"
   // Additional options go here
});
dashboard.render(document.getElementById("dashboard"));

웹 앱 에 다음 코드를 추가하여 대시보드 렌더링할 위치에서 실행 . 다음 예시 Google 토큰으로 인증합니다.

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const id_token = googleUser.getAuthResponse().id_token;
const ChartsEmbedSDK = window.ChartsEmbedSDK;
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // Optional: ~REPLACE~ with your Base URL
   getUserToken: () => id_token,
});
// Read https://dochub.mongodb.org/core/charts-dashboards-embedded-dashboard-options for more options
const dashboard = sdk.createDashboard({
   // Optional: ~REPLACE~ with your Dashboard ID
   dashboardId: "620c9847-fc5c-4199-865d-27b2ae20db07",
   theme: "dark",
   widthMode: "scale",
});
document.body.classList.toggle("logged-in", true);
dashboard.render(document.getElementById("dashboard"));

돌아가기

임베딩 SDK

다음

인증 제공자 구성

이 페이지의 내용