/ /

/ /

埋め込み SDK を使い始める

埋め込み SDKを使用してチャートやダッシュボードをウェブアプリケーションに埋め込むと、設定とレンダリングをより柔軟に調整できるようになります。

前提条件

チャートの埋め込みを有効にするには、ダッシュボード作成者である必要があります。
新しいダッシュボードの作成
チャートの作成

手順

埋め込みを有効にする

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

Dashboardsページから、埋め込み可能にするチャートを含むダッシュボードを選択します。ダッシュボードに移動する手順については、「ダッシュボード」を参照してください。

チャートを選択します。

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

注意

埋め込みが有効になっているダッシュボード上のグラフは、 Embed Chartオプションが自動的に有効になります。したがって、埋め込みが有効になっているダッシュボード内のグラフに対してEmbed chartオプションを選択することはできません。

データソースで外部共有を有効にします。

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

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

クリックして拡大します

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

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

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

または、 Allow all fields in the data source used in this chartを選択して、グラフ内のすべてのフィールドを指定することもできます。

フィルタ可能なフィールドの詳細については、「フィルタ可能なフィールドの指定」を参照してください。

Javascript SDKパネルを選択します。

Charts Base URLとChart ID をコピーします。

Web アプリケーションコードでは、Charts base URL と Charts ID の値が必要です。

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

Dashboardsページから、埋め込むチャートを含むダッシュボードを選択します。ダッシュボードに移動する手順については、「ダッシュボード」を参照してください。

チャートを選択します。

注意

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

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

クリックして拡大します

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

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

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

例

次のフィルター関数は、ドキュメントの ownerIdフィールドが埋め込み認証プロバイダのトークンのsubフィールドの値と一致するデータのみをレンダリングします。

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

Tip

ユーザーごとにフィルターを挿入する方法の詳細については、「ユーザー固有のフィルターを挿入」を参照してください。

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

Tip

フィルタ可能なフィールドの詳細については、「フィルタ可能なフィールドの指定」を参照してください。

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

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

埋め込み認証プロバイダの設定

ChartsにGoします。

Atlas Charts がまだ表示されていない場合は、Atlas UIのサイドバーにある Services 見出しの下の Visualization をクリックします。

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

Embedded Visualizations ページに移動します。

Visualization サイドバーの Services 見出しの下にある Embedded Visualizations をクリックします。

[ 埋め込み可視化] ページが表示されます。

Authentication SettingsビューにGoします。

注意

Authentication Settingsページにアクセスするには、プロジェクトオーナーである必要があります。管理者以外のユーザーでも埋め込みチャートは引き続き使用できますが、プロジェクトオーナーからキーを取得する必要があります。

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

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

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

Authentication providersセクションから [ Add ] をクリックします。
Nameフィールドに、プロバイダーのわかりやすい名前を入力します。
Providerリストから、追加するプロバイダーのタイプを選択します。

プロバイダーからのトークンを検証するために Charts を設定します。

入力する必要がある値は、選択したプロバイダーによって異なります。

Google
Client IDフィールドに、アプリケーションの Google APIクライアントIDを次の形式で入力します。
```
<prefix>.apps.googleusercontent.com
```

カスタム JWT

次の値を指定します。

フィールド

値

署名アルゴリズム

JSON web トークン署名がエンコードされる暗号化アルゴリズム。

次のいずれかである必要があります。

署名キー

JSON web token署名を検証するために使用される秘密キーまたはキー。トークンが署名されていない場合、Charts はそれらを無効と見なします。誤ったキーを指定すると、Charts はトークン署名を検証できず、それらが無効であると見なします。

指定する必要がある値は、 Signing Algorithmによって異なります。

HS256: JSON web tokenの署名に使用した秘密キーを入力します。

RS256: JWK or JWKS URLまたはPEM Public Keyのいずれかを選択します。

JWK or JWKS URL を選択すると、Charts は指定されたURLの JWK または JWKSファイルからキーを検索します。次に、Charts はそのキーを使用してJSON web token を検証します。ファイルに複数のキーがある場合、Charts は一致するまで各キーを試行します。JWK または JWKSファイルを含むURLを入力します。

PEM Public Key を選択した場合、Charts は指定された公開キーを使用してJSON web トークンを検証します。 JSON web token の署名に使用されたキーペアの公開キーを入力します。次の例に示すように、公開キーはPEM形式である必要があります。

オーディエンス（任意）

Charts が有効と見なすためにJSON web token に存在する必要があるオーディエンスクレーム。

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

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

Dashboardsページから、埋め込みを作成するダッシュボードを選択します。ダッシュボードに移動する手順については、「ダッシュボード」を参照してください。

Embed を選択します。

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

データソースで外部共有を有効にします。

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

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

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

（任意）ダッシュボードのフィルタ可能なフィールドを指定します。

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

または、 Allow all fields in the data source used in this dashboardを選択して、ダッシュボード内のすべてのフィールドを指定することもできます。

フィルタ可能なフィールドの詳細については、「フィルタ可能なフィールドの指定」を参照してください。

Javascript SDKパネルを選択します。

ベース URL をコピーして保存します。

ダッシュボード ID をコピーして保存します。

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

Embed を選択します。

データソースで外部共有を有効にします。

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

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

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

すでに認証プロバイダを設定している場合は、この手順をスキップします。認証プロバイダをまだ設定していない場合は、ここで設定できます。

詳細については、「埋め込み認証プロバイダの構成」を参照してください。

[Add] をクリックします。
認証統合の名前を指定します。
プロバイダーを選択し、プロバイダー設定を指定します。
[Save] をクリックします。
[Back to Embed Dashboard] をクリックします。

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

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

例

次のフィルター関数は、ドキュメントのownerIdフィールドが埋め込み認証プロバイダのトークンのsubフィールドの値と一致するデータのみをレンダリングします。

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

Tip

ユーザーごとにフィルターを挿入する方法の詳細については、「ユーザー固有のフィルターを挿入」を参照してください。

（任意）ダッシュボードのフィルタ可能なフィールドを指定します。

または、 Allow all fields in the data source used in this dashboardを選択して、ダッシュボード内のすべてのフィールドを指定することもできます。

フィルタ可能なフィールドの詳細については、「フィルタ可能なフィールドの指定」を参照してください。

ベース URL をコピーして保存します。

ダッシュボード ID をコピーして保存します。

Web アプリの作成

チャートを表示する新しいアプリを作成するには、残りの手順に進みます。

注意

MongoDB は、埋め込み SDK を使用して非認証の埋め込みチャートを表示する方法を示す事前構築済みの例アプリをGithubリポジトリに提供しています。

チャートを表示する新しいアプリを作成するには、残りの手順に進みます。

注意

MongoDB は、埋め込み SDK を使用して認証プロバイダチャートを認証する方法を示す事前構築済みの例をGithubリポジトリに提供しています。

ダッシュボードを表示する新しいアプリを作成するには、残りの手順に進みます。

注意

MongoDB は、 Githubリポジトリで非認証の埋め込みダッシュボードの事前構築例を提供しています。この例では、埋め込み SDK を使用して非認証の埋め込みダッシュボードを表示する方法を示します。

ダッシュボードを表示する新しいアプリを作成するには、残りの手順に進みます。

注意

MongoDB は、 Githubリポジトリに認証された埋め込みダッシュボードの例を提供します。これらの例では、埋め込み SDK を使用して、Google またはJSONウェブトークン認証プロバイダーを使用して埋め込みダッシュボードを認証する方法を示します。

アプリへの埋め込みコードの追加

アプリに埋め込み SDK をインストールする方法については、「埋め込み SDK のインストール」を参照してください。

次のコードをウェブアプリに追加して、チャートをレンダリングする場所を実行します。

注意

既存の Charts base URL とチャート ID を、表示するチャートの値に置き換えます。 Charts ベース URL とチャート ID は、埋め込みオプションモーダルウィンドウに表示されます。

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Chart dialog.
});
const chart = sdk.createChart({
  chartId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // ~REPLACE~ with the Chart ID from your Embed Chart dialog.
  height: "700px",
  // Additional options go here
});
chart.render(document.getElementById("chart"));

次のコードをウェブアプリに追加して、チャートをレンダリングする場所を実行します。次の例では、Google トークンで認証しています。

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const id_token = googleUser.getAuthResponse().id_token;
const ChartsEmbedSDK = window.ChartsEmbedSDK;
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // Optional: replace with your Charts URL
   getUserToken: () => id_token,
});
const chart = sdk.createChart({
   chartId: "8d4dff93-e7ca-4ccd-a622-e20e8a100197", // Optional: replace with your Chart ID
});
document.body.classList.toggle("logged-in", true);
chart.render(document.getElementById("chart"));

次のコードをウェブアプリに追加して、ダッシュボードをレンダリングする場所を実行します。

注意

既存のDashboards Base URLとダッシュボード ID を、表示するダッシュボードの値に置き換えます。 Dashboards Base URLとダッシュボード ID は埋め込みオプションモーダルウィンドウに表示されます。

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Dashboard dialog.
});
const dashboard = sdk.createDashboard({
   dashboardId: "735cfa75-15b8-483a-bc2e-7c6659511c7c", // ~REPLACE~ with the Dashboard ID from your Embed Dashboard dialog.
   height: "700px",
   widthMode: "scale",
   heightMode: "fixed"
   // Additional options go here
});
dashboard.render(document.getElementById("dashboard"));

次のコードをウェブアプリに追加して、ダッシュボードをレンダリングする場所で実行します。次の例では、Google トークンで認証しています。

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
const id_token = googleUser.getAuthResponse().id_token;
const ChartsEmbedSDK = window.ChartsEmbedSDK;
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // Optional: ~REPLACE~ with your Base URL
   getUserToken: () => id_token,
});
// Read https://dochub.mongodb.org/core/charts-dashboards-embedded-dashboard-options for more options
const dashboard = sdk.createDashboard({
   // Optional: ~REPLACE~ with your Dashboard ID
   dashboardId: "620c9847-fc5c-4199-865d-27b2ae20db07",
   theme: "dark",
   widthMode: "scale",
});
document.body.classList.toggle("logged-in", true);
dashboard.render(document.getElementById("dashboard"));

戻る

埋め込み SDK

認証プロバイダの設定

前提条件

手順

埋め込みを有効にする

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

チャートを選択します。

注意

データソースで外部共有を有効にします。

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

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

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

Javascript SDKパネルを選択します。

Charts Base URLとChart ID をコピーします。

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

チャートを選択します。

注意

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

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

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

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

例

Tip

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

Tip

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

埋め込み認証プロバイダの設定

ChartsにGoします。

Embedded Visualizations ページに移動します。

Authentication SettingsビューにGoします。

注意

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

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

Embed を選択します。

データソースで外部共有を有効にします。

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

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

（ 任意 ）ダッシュボードのフィルタ可能なフィールドを指定します。

Javascript SDKパネルを選択します。

ベース URL をコピーして保存します。

ダッシュボード ID をコピーして保存します。

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

Embed を選択します。

データソースで外部共有を有効にします。

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

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

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

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

例

Tip

（ 任意 ）ダッシュボードのフィルタ可能なフィールドを指定します。

ベース URL をコピーして保存します。

ダッシュボード ID をコピーして保存します。

Web アプリの作成

注意

注意

注意

注意

アプリへの埋め込みコードの追加

注意

注意

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

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

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

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

（任意）ダッシュボードのフィルタ可能なフィールドを指定します。

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

（任意）ダッシュボードのフィルタ可能なフィールドを指定します。