カスタムJSON web tokenプロバイダーを使用した認証済みチャートの埋め込み

ダッシュボードを選択します。

ダッシュボード ページから、埋め込みるグラフを含むダッシュボードを選択します。

チャートを選択します。

ダッシュボードから次をクリックします:埋め込み情報にアクセスするには、チャートの右上にある を参照してください。 ドロップダウン メニューから Embed chartを選択します。

データソースでの外部共有の有効化

このチャートが使用するデータソースで外部共有をすでに有効にしている場合は、この手順をスキップします。 データソースへの埋め込みをまだ有効にしていない場合は、これで有効にできます。 Configure external sharingリンクをクリックします。

Authenticatedダイアログウィンドウで [0} ] タブを選択します。

クリックして拡大します

Enable authenticated accessをOn に切り替えます。

（ 任意 ）ユーザーごとに挿入するフィルター関数を指定します。

チャートを表示する各ユーザーに対して MongoDB フィルター ドキュメントを挿入する関数を指定できます。 これは、ユーザー固有のグラフをレンダリングするのに便利です。

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

（ 任意 ）チャートのフィルタリング可能なフィールドを指定します。

チャート ビューアがデータをフィルタリングできるフィールドを指定します。 デフォルトでは、フィールドは指定されていません。つまり、少なくとも 1 つのフィールドを明示的に許可するまでチャートをフィルタリングできません。

と をコピーしますChart Base URLChart ID

これらの値をアプリケーション コードで 埋め込み認証プロバイダの属性 とともに使用して、チャートを埋め込みます。

ChartsにGoします。

Atlas Charts がまだ表示されていない場合は、Atlas UI の [ Charts ] タブをクリックします。

Atlas がプロジェクトにリンクされた Charts のインスタンスを起動します。

Embeddingページに移動します。

サイドバーの [ Development ] 見出しの下の [ Embeddingをクリックします。

埋め込みページが表示されます。

Authentication SettingsビューにGoします。

[Authentication Settings] タブをクリックします。

[ Authentication Settings（認証設定） ] タブが表示されます。

認証プロバイダを追加します。

1. Authentication providersセクションから [ Add ] をクリックします。

2. Chartsチュートリアルの を検証するようにJSON web token を構成するには、次の値を指定します。

   フィールド	値
   名前	charts-jwt-tutorialと入力します。
   プロバイダー	Custom JSON Web Token を選択します。
   署名アルゴリズム	HS256 を選択します。
   署名キー	topsecretと入力します。

3. [Save] をクリックします。

アプリケーションサーバーコードで、 JSON web tokenJSON web token を生成して返します。実装は認証プロバイダによって異なります。

サンプル アプリケーションの app.js ファイルは、ユーザーが次の認証情報でアプリケーションにログインするときに、単純な Web サービスと 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プロパティの値。 サンプル アプリケーションにチャートの 1 つを埋め込むには、[ 埋め込みチャート ] ダイアログの、この値を :guideline: Base URLに置き換えます。

   • 埋め込みするチャートの一意の識別子を指定するためのchartIdプロパティ。 サンプル アプリケーションにチャートの 1 つを埋め込むには、[ 埋め込みチャート ] ダイアログの、この値を :guideline: Chart IDに置き換えます。

   • 認証プロバイダからJSON web tokenを生成して返す関数を指定する getUserToken プロパティ。

   • 指定するオプションのプロパティ。 SDK を使用してチャートを埋め込むときに使用できるすべてのプロパティのリストについては、 「 SDK オプション リファレンス」 を参照してください。

   サンプル アプリケーションの src/index.js ファイルでは、getUserToken プロパティの login 関数が作成した Web サービスを呼び出してJSON web tokenを生成します。 ログインが成功すると、その関数は有効なJSON web tokenを getUserToken プロパティに返します。

   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メソッドを呼び出します。 To embed one of your charts in the sample application, replace the value of the id property with the :guilabel:Chart ID from your Embed Chart dialog.

   次の例では、サンプル アプリケーションの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 はグラフをレンダリングせず、エラー コードを表示します。

Charts 埋め込みエラーコードの詳細については、「埋め込みエラーコード 」を参照してください。