Atlas App Services에서 인증된 차트 임베드

대시보드를 선택합니다.

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

차트를 선택합니다.

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

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

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

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

클릭하여 확대

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

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

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

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

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

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

및 복사 Chart Base URL Chart ID

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

로 고 (Go)Charts 합니다.

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

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

Embedding 페이지로 이동합니다.

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

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

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

Authentication Settings 탭을 클릭합니다.

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

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

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

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

3. Provider 목록에서 Atlas App Services 을(를) 선택합니다.

4. Atlas Project 목록에서 App Services가 포함된 클라우드 프로젝트를 선택합니다.

5. App ID 목록에서 인증에 사용할 App Services를 선택합니다.

데이터 액세스에 Atlas App Services 규칙을 사용하도록 토글 스위치를 설정합니다.

임베딩된 차트 액세스를 위해 사용자를 인증하는 것 외에도 앱 서비스 서비스 규칙을 사용하여 세분화된 데이터 액세스 제어를 수행할 수 있습니다. 규칙 적용을 활성화하려면 토글 스위치를 On으로 설정합니다.

이 옵션을 활성화하면 차트 데이터를 검색할 때 컬렉션에 정의된 모든 App Services 규칙이 Charts에서 준수됩니다. 이 기능을 사용하여 역할에 따라 사용자마다 다른 데이터 하위 집합을 표시하는 등 차트에 표시된 데이터에 대한 액세스를 제한할 수 있습니다.

서비스 이름을 입력합니다.

MongoDB에서 데이터를 가져오는 서비스의 이름을 입력합니다. 데이터 서비스의 이름을 찾으려면 다음을 수행합니다.

1. 앱 서비스로 이동합니다.

2. 사이드바 탐색에서 Clusters 을(를) 클릭합니다.

3. 서비스 이름은 App Service Name 아래에 나열됩니다.

Save 버튼을 클릭합니다.

index.js 텍스트 편집기에서 파일 을 엽니다.

index.js 파일은 src 디렉토리에 있습니다.

애플리케이션 ID 입력

기존 애플리케이션 ID를 앱 서비스 UI 왼쪽에서 찾을 수 있는 애플리케이션 ID로 바꿉니다.

const client = Stitch.initializeAppClient(
  'authentication-sample-eibkj', // Optional: ~REPLACE~ with your  App ID
{

Charts 기본 URL 입력

기존 Charts 기본 URL을 표시하려는 Charts의 기본 URL로 바꿉니다. Your Charts 기본 URL은 임베딩 옵션 모달 창에서 볼 수 있습니다. 차트 임베딩을 활성화하는 방법에 대한 자세한 지침은 임베딩 SDK 를 참조하세요.

const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts-dev.mongodb.com/charts-test2-pebbp", // Optional: ~REPLACE~ with your Charts URL
  getUserToken: () => getRealmUserToken(client),
});

위 코드 스니펫에서 getRealmUserToken() 함수에 유의하세요. 이 함수는 기존 Atlas App Services 인증 세션에서 JSON web token 를 반환합니다. 예시 앱의 2번째 줄에 있는 import 성명서에서 볼 수 있듯이 getRealmUserToken() 를 임베딩 SDK에서 가져와야 합니다.

import ChartsEmbedSDK, { getRealmUserToken } from "@mongodb-js/charts-embed-dom";

다음 코드 스니펫과 같이 HTML 페이지에 인라인 Javascript와 함께 Embedding SDK를 포함할 수도 있습니다.

<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.6.0/stitch.js"></script>
<script src="https://unpkg.com/@mongodb-js/charts-embed-dom"></script>

이 시나리오에서 getRealmUserToken() 함수를 사용하려면 SDK에서 함수를 가져옵니다.

ChartsEmbedSDK.getRealmUserToken()

차트 ID 입력

기존 차트 ID를 표시하려는 차트의 ID로 바꿉니다. 차트 ID는 임베딩 옵션 모달 창에서 볼 수 있습니다. 차트 임베딩을 활성화하는 방법에 대한 자세한 지침은 임베딩 SDK 를 참조하세요.

const chart = sdk.createChart({
  chartId: "a2e775e6-f267-4c2c-a65d-fbf3fad4a4f2", // Optional: ~REPLACE~ with your Chart ID
});