Google 로그인으로 인증된 차트 임베드

대시보드를 선택합니다.

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

차트를 선택합니다.

대시보드에서 다음을 클릭합니다. 을(를) 클릭하여 임베딩 정보에 액세스합니다. 드롭다운 메뉴에서 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 목록에서 Google 을(를) 선택합니다.

4. Google Client Id 필드에 생성한 Google 클라이언트 ID를 입력합니다.

5. Save를 클릭합니다.

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

index.html 파일은 authenticated-google 프로젝트의 루트 디렉토리에 있습니다.

Google 클라이언트 ID 입력

기존 Google 클라이언트 ID를 Google 클라이언트 ID로 바꿉니다.

<!-- Optional: ~REPLACE~ content with your Google Client ID -->
<meta
  name="google-signin-client_id"
  content="012345678910-ifpoccch8js9srh9obfdn683h1iss2ag.apps.googleusercontent.com"
/>

Google 클라이언트 ID는 Google API 콘솔 프로젝트를 만든 후에 볼 수 있습니다. Google 클라이언트 ID 만들기에 대한 지침 은 Google 클라이언트 ID 만들기를 참조하세요.

Charts 기본 URL 입력

기존 baseUrl 를 표시하려는 차트의 기본 URL로 바꿉니다.

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

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

차트 ID 입력

기존 chartId 를 표시하려는 차트의 ID로 바꿉니다.

const chart = sdk.createChart({
  chartId: "example-acaf-4af0-8320-5099bfebd1bd", // Optional: ~REPLACE~ with your Chart ID
});

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