사용자 지정 JSON web token 제공자를 사용하여 인증된 차트 임베드

대시보드를 선택합니다.

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

차트를 선택합니다.

대시보드에서 다음을 클릭합니다. 을(를) 클릭하여 임베딩 정보에 액세스합니다. 드롭다운 메뉴에서 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. 다음 값을 Charts 입력하여 튜토리얼에 대한 JSON 웹 토큰 의 유효성을 검사하도록 를 구성합니다.

   필드	값
   이름	charts-jwt-tutorial을(를) 입력합니다.
   제공자	Custom JSON Web Token0}을 선택합니다.
   서명 알고리즘	HS2560}을 선택합니다.
   서명 키	topsecret을(를) 입력합니다.

3. Save를 클릭합니다.

애플리케이션 서버 코드에서 JSON web token JSON web token 을 생성하고 반환합니다. 구현 은 인증 제공자 에 따라 달라집니다.

app.js 샘플 jsonwebtoken 애플리케이션의 파일은 HS256 사용자가 이러한 자격 증명으로 애플리케이션에 로그인할 때 간단한 웹 서비스와 패키지를 사용하여 알고리즘을 사용하여 서명된 JSON web token 를 생성하고 반환합니다.

• 사용자 이름: admin

• 비밀번호: password

1
const express = require("express");
2
const bodyParser = require("body-parser");
3
const cors = require("cors");
4
const jwt = require("jsonwebtoken");
5
const config = require("./config.js");
6
7
const app = express();
8
const port = 8000;
9
10
// Configuring body parser middleware
11
app.use(bodyParser.urlencoded({ extended: false }));
12
app.use(bodyParser.json());
13
app.use(cors());
14
15
app.post("/login", (req, res) => {
16
  const loginDetails = req.body;
17
  // mock a check against the database
18
  let mockedUsername = "admin";
19
  let mockedPassword = "password";
20
21
  if (
22
    loginDetails &&
23
    loginDetails.username === mockedUsername &&
24
    loginDetails.password === mockedPassword
25
  ) {
26
    let token = jwt.sign({ username: loginDetails.username }, config.secret, {
27
      expiresIn: "24h" // expires in 24 hours
28
    });
29
    res.json({ bearerToken: token });
30
  } else {
31
    res.status(401).send(false);
32
  }
33
});
34
35
app.listen(port, () => console.log(`Example app listening on port ${port}!`));

샘플 애플리케이션에서 서명 키 topsecret 는 애플리케이션의 config.js 파일에 정의되어 있습니다.

module.exports = {
  secret: "topsecret"
};

차트를 임베드합니다.

1. ChartsEmbedSDK 클래스에서 새 객체를 만듭니다. 다음을 제공합니다.

   • Charts 인스턴스를 가리키는 URL이 포함된 baseUrl 속성 값입니다. 샘플 애플리케이션에 차트 중 하나를 포함하려면 차트 포함 대화 상자에서 이 값을 :guilabel:Base URL 으로 바꾸세요.

   • chartId 속성을 사용하여 삽입하려는 차트의 고유 식별자를 지정합니다. 샘플 애플리케이션에 Atlas Charts 중 하나를 포함하려면 Atlas Charts 포함 대화 상자에서 이 값을 :guilabel:Chart ID 으로 바꾸세요.

   • getUserToken 속성을 사용하여 인증 제공자로부터 JWT 를 생성하고 반환하는 함수를 지정합니다.

   • 제공하려는 모든 선택적 속성입니다. SDK를 사용하여 차트를 임베드할 때 사용할 수 있는 모든 속성 목록은 SDK 옵션 레퍼런스에서 확인하세요.

   샘플 애플리케이션의 src/index.js 파일에서 getUserToken 속성의 login 함수는 사용자가 생성한 웹 서비스를 호출하여 JSON web token 를 생성합니다. 로그인에 성공하면 해당 함수는 getUserToken 속성에 유효한 JSON web token 를 반환합니다.

   1
   import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
   2
   import "regenerator-runtime/runtime";
   3
   4
   document
   5
     .getElementById("loginButton")
   6
     .addEventListener("click", async () => await tryLogin());
   7
   8
   function getUser() {
   9
   return document.getElementById("username").value;
   10
   }
   11
   12
   function getPass() {
   13
   return document.getElementById("password").value;
   14
   }
   15
   16
   async function tryLogin() {
   17
   if (await login(getUser(), getPass())) {
   18
     document.body.classList.toggle("logged-in", true);
   19
     await renderChart();
   20
   }
   21
   }
   22
   23
   async function login(username, password) {
   24
   const rawResponse = await fetch("http://localhost:8000/login", {
   25
     method: "POST",
   26
     headers: {
   27
       Accept: "application/json",
   28
       "Content-Type": "application/json"
   29
     },
   30
     body: JSON.stringify({ username: username, password: password })
   31
   });
   32
   const content = await rawResponse.json();
   33
   34
   return content.bearerToken;
   35
   }
   36
   37
   async function renderChart() {
   38
   const sdk = new ChartsEmbedSDK({
   39
     baseUrl: "https://localhost/mongodb-charts-iwfxn", // ~REPLACE~ with the Base URL from your Embed Chart dialog
   40
     chartId: "d98f67cf-374b-4823-a2a8-f86e9d480065", // ~REPLACE~ with the Chart ID from your Embed Chart dialog
   41
     getUserToken: async function() {
   42
       return await login(getUser(), getPass());
   43
     }
   44
   });

2. 포함하려는 각 차트에 대해 방금 생성한 객체의 CreateChart 메서드를 호출합니다. 샘플 애플리케이션에 Atlas Charts 중 하나를 포함하려면 차트 포함 대화 상자에서 id 속성의 값을 :guilabel:Chart ID 로 바꿉니다.

   다음 예제에서는 샘플 애플리케이션의 src/index.js 파일에서 CreateChart 메서드를 호출하는 방법을 보여 줍니다.

   const chart = sdk.createChart({ chartId: "d98f67cf-374b-4823-a2a8-f86e9d480065" }); // ~REPLACE~ with the Chart ID from your Embed Chart dialog

차트를 렌더링합니다.

차트 객체의 render 메서드를 사용하여 애플리케이션에서 렌더링합니다.

다음 예제에서는 샘플 애플리케이션의 src/index.js 파일에서 render 메서드를 호출하는 방법을 보여 줍니다.

chart.render(document.getElementById("chart"));

애플리케이션을 배포하고 테스트합니다.

Charts는 차트 렌더링 요청과 함께 수신한 토큰의 유효성을 검사할 수 있는 경우 차트를 렌더링합니다. 토큰이 유효하지 않으면 Charts는 차트를 렌더링하지 않고 오류 코드를 표시합니다.

차트 임베딩 오류 코드에 대한 자세한 내용은 임베딩된 오류 코드를 참조하세요 .