문서 홈 → 보기 & 데이터 분석 → Atlas Charts
Atlas App Services에서 인증된 차트 임베드
이 페이지의 내용
Atlas App Services 는 개발자가 서버 인프라를 설정할 필요 없이 애플리케이션을 빠르게 구축할 수 있는 서버리스 플랫폼입니다. App Services는 Google OAuth 를 포함한 여러 인증 옵션을 제공합니다. , Facebook 로그인, 이메일/비밀번호를 입력합니다. App Services의 인증 메커니즘을 사용하여 임베딩된 차트에 대한 데이터 액세스를 제어할 수 있습니다.
이 튜토리얼에서는 다음을 수행하는 방법을 보여줍니다.
차트에 대해 인증된 임베딩을 활성화합니다.
Embedding SDK를 사용하여 사용자 지정 Atlas App Services 제공자가 인증한 차트를 임베드할 수 있습니다.
앱 서비스를 사용하여 임베딩된 차트의 데이터를 제어할 수 있습니다.
참고
이 튜토리얼에서는 인증을 사용하여 App Services를 만드는 방법을 다루지 않습니다. 앱 생성 튜토리얼은 Atlas App Services 설명서 를 참조하세요.
전제 조건
절차
차트에 인증된 임베딩 활성화
인증된 임베딩을 활성화하여 Atlas Charts 기본 URL과 차트 ID를 생성합니다. 웹 페이지에 차트를 표시하려면 차트 기본 URL과 차트 ID가 필요합니다.
(선택 사항) 사용자별로 삽입할 필터 함수를 지정합니다.
차트를 보는 각 사용자에게 MongoDB 필터 문서를 삽입하는 함수를 지정할 수 있습니다. 이는 사용자별 Atlas Charts를 렌더링할 때 유용합니다.
예제
다음 필터 함수는 문서의 ownerId
필드가 임베딩 인증 제공자의 토큰의 sub
필드 값과 일치하는 데이터만 렌더링합니다.
function getFilter(context) { return { ownerId: context.token.sub }; }
팁
다음도 참조하세요.
사용자별 필터를 삽입하는 방법에 대해 자세히 알아보려면 사용자별 필터 삽입을 참조하세요.
(선택 사항) 차트에서 필터링 가능한 필드를 지정합니다.
차트 뷰어에서 데이터를 필터링할 수 있는 필드를 지정합니다. 기본적으로 필드는 지정되지 않으므로, 하나 이상의 필드를 명시적으로 허용할 때까지 차트를 필터링할 수 없습니다.
팁
다음도 참조하세요.
필터링 가능한 필드에 대해 자세히 알아보려면 필터링 가능한 필드 지정을 참조하세요.
사용자 지정 Atlas App Services 제공자를 사용하도록 차트 구성
데이터 액세스에 Atlas App Services 규칙을 사용하도록 토글 스위치를 설정합니다.
포함된 차트 액세스를 위해 사용자를 인증하는 것 외에도 App Service 서비스 규칙 을 사용하여 세분화된 데이터 액세스 제어를 수행할 수 있습니다. 규칙 적용을 활성화하려면 토글 스위치를 On 으로 설정합니다.
이 옵션을 사용하도록 설정하면 Atlas Charts에서 차트 데이터를 검색할 때 collection에 정의된 모든 App Services 규칙을 준수합니다. 이 기능을 사용하여 역할에 따라 다양한 사용자에게 다양한 데이터 하위 집합을 표시하는 것을 포함하여 차트에 표시되는 데이터에 대한 액세스를 제한할 수 있습니다.
참고
이 옵션은 이 차트의 데이터 소스 가 앱 서비스와 동일한 MongoDB database 및 collection을 사용한다고 가정합니다.
이 옵션을 사용하면 성능에 영향을 미칠 수 있으므로 App Services 규칙에 따라 데이터 액세스를 제한할 필요가 없는 경우 생략해야 합니다.
차트를 표시하는 웹 앱 만들기
차트를 표시할 수 있는 앱이 이미 있는 경우 포함된 차트 를 추가할 준비가 된 것입니다. 그렇지 않은 경우 나머지 단계를 진행하여 새 앱을 만듭니다.
MongoDB는 Embedding SDK로 App Services 인증을 통해 임베디드 차트를 표시하는 방법을 보여주는 사전 빌드된 예제 앱을 제공합니다.
GitHub 리포지토리 복제 을 클릭하고 파일의 지침에 따라 Readme
앱 사용을 시작합니다. 앱을 그대로 실행하거나 이전에 만든 차트를 사용하도록 사용자 지정할 수 있습니다.
참고
예제 앱에서는 앱 서비스가 이메일/비밀번호 인증을 사용한다고 가정합니다. 앱 서비스에서 다른 인증 메커니즘을 사용하는 경우 예제 앱에는 추가 사용자 지정이 필요합니다.
Node.js 앱 사용자 지정
편집해야 하는 모든 줄은 ~REPLACE~
이 포함된 주석으로 표시되어 있습니다.
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 });
앱 사용자 지정이 완료되면 앱을 실행할 준비가 된 것입니다.