Docs Menu
Docs Home
/
Atlas Charts
/
埋め込み
/
埋め込み SDK

埋め込み SDK を使い始める

項目一覧

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

前提条件

手順

埋め込みを有効にする

1

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

ダッシュボード ページから、埋め込み可能にするチャートを含むダッシュボードを選択します。

2

チャートを選択します。

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

注意

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

3

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

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

4

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

Embed unauthenticated chart
クリックして拡大します
5

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

6

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

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

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

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

7

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

8

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

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

1

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

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

2

チャートを選択します。

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

注意

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

3

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

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

4

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

Embed authenticated chart
クリックして拡大します
5

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

6

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

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

例

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

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

Tip

以下も参照してください。

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

7

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

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

Tip

以下も参照してください。

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

8

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

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

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

1
Charts に進みGo 。

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

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

2
Embedding ページに移動します。

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

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

3
Authentication Settings ビューにGoします。

注意

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

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

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

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

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

  2. Nameフィールドに、プロバイダーのわかりやすい名前を入力します。

  3. Providerリストから、追加するプロバイダーのタイプを選択します。

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

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

    プロバイダー
    フィールド

    カスタムJSON web token

    次の値を指定します。

    フィールド
    値

    署名アルゴリズム

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

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

    署名キー

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

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

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

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

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

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

       -----BEGIN CERTIFICATE-----
       MIIDfjCCAmagAwIBAgIBBzANBgkqhkiG9w0BAQUFADB0MRcwFQYDVQQDEw5LZXJu
       ZWwgVGVzdCBDQTEPMA0GA1UECxMGS2VybmVsMRAwDgYDVQQKEwdNb25nb0RCMRYw
       FAYDVQQHEw1OZXcgWW9yayBDaXR5MREwDwYDVQQIEwhOZXcgWW9yazELMAkGA1UE
       BhMCVVMwHhcNMTQwNzE3MTYwMDAwWhcNMjAwNzE3MTYwMDAwWjBsMQ8wDQYDVQQD
       EwZzZXJ2ZXIxDzANBgNVBAsTBktlcm5lbDEQMA4GA1UEChMHTW9uZ29EQjEWMBQG
       A1UEBxMNTmV3IFlvcmsgQ2l0eTERMA8GA1UECBMITmV3IFlvcmsxCzAJBgNVBAYT
       AlVTMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAp76KJeDczBqjSPJj
       5f8DHdtrWpQDK9AWNDlslWpi6+pL8hMqwbX0D7hC2r3kAgccMyFoNIudPqIXfXVd
       1LOh6vyY+jveRvqjKW/UZVzZeiL4Gy4bhke6R8JRC3O5aMKIAbaiQUAI1Nd8LxIt
       LGvH+ia/DFza1whgB8ym/uzVQB6igOifJ1qHWJbTtIhDKaW8gvjOhv5R3jzjfLEb
       R9r5Q0ZyE0lrO27kTkqgBnHKPmu54GSzU/r0HM3B+Sc/6UN+xNhNbuR+LZ+EvJHm
       r4de8jhW8wivmjTIvte33jlLibQ5nYIHrlpDLEwlzvDGaIio+OfWcgs2WuPk98MU
       tht0IQIDAQABoyMwITAfBgNVHREEGDAWgglsb2NhbGhvc3SCCTEyNy4wLjAuMTAN
       BgkqhkiG9w0BAQUFAAOCAQEANoYxvVFsIol09BQA0fwryAye/Z4dYItvKhmwB9VS
       t99DsmJcyx0P5meB3Ed8SnwkD0NGCm5TkUY/YLacPP9uJ4SkbPkNZ1fRISyShCCn
       SGgQUJWHbCbcIEj+vssFb91c5RFJbvnenDkQokRvD2VJWspwioeLzuwtARUoMH3Y
       qg0k0Mn7Bx1bW1Y6xQJHeVlnZtzxfeueoFO55ZRkZ0ceAD/q7q1ohTXi0vMydYgu
       1CB6VkDuibGlv56NdjbttPJm2iQoPaez8tZGpBo76N/Z1ydan0ow2pVjDXVOR84Y
       2HSZgbHOGBiycNw2W3vfw7uK0OmiPRTFpJCmewDjYwZ/6w==
       -----END CERTIFICATE-----

    オーディエンス（任意）

    オーディエンス クレーム JSON web tokenChartsAtlas が有効と見なすには、 に含める必要があります。

    Google

    [ Client IDフィールドに、アプリケーションの Google クライアント ID を次の形式で入力します。

    <prefix>.apps.googleusercontent.com

    Atlas App Services

    次の値を指定します。

    フィールド
    値

    プロジェクト

    アプリ サービスを含む プロジェクト 。

    App Service

    ユーザー トークンを発行している App Services

    Atlas App Services を使用してデータを取得する（任意）

    を切り替えて、Charts が App Services からユーザー データとルールを取得できるようにします。

    有効にすると、Charts はApp Service Nameフィールドで指定したサービスからデータを取得します。

    このオプションを有効にすると、特定のコレクションまたはユーザーに対して Atlas App Services で Charts が表示するデータを制御するためのルールを定義できます。

    詳細については、App Services ドキュメントの「受信クエリのフィルタリング」を参照してください。

    アプリ サービス名

    Charts がチャートのデータを取得するために使用するアプリ サービス内のサービスの名前。 たとえば、 mongodb-atlas 。

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

1

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

ダッシュボード ページから、埋め込むダッシュボードを選択します。

2

Embed を選択します。

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

3

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

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

4

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

5

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

6

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

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

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

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

7

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

8

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

9

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

1

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

ダッシュボード ページから、埋め込むダッシュボードを選択します。

2

Embed を選択します。

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

3

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

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

4

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

5

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

6

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

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

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

  1. [Add] をクリックします。

  2. 認証統合の名前を指定します。

  3. プロバイダーを選択し、プロバイダー設定を指定します。

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

  5. [Back to Embed Dashboard] をクリックします。

7

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

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

例

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

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

Tip

以下も参照してください。

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

8

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

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

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

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

9

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

10

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

Web アプリの作成

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

注意

MongoDBは、事前に構築されたサンプル アプリを リポジトリ で提供しています。 埋め込み SDKGithub を使用して非認証の埋め込みチャートを表示する方法を示します。

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

注意

MongoDBはGithub リポジトリ で事前に構築された例を提供しています は、埋め込み SDK を使用して埋め込みチャートを認証する方法を示します。

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

注意

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

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

注意

MongoDBは 認証された埋め込みダッシュボードの例を 提供しますGithub リポジトリ内。これらの例は、埋め込み SDK を使用して、 Atlas App Services 、Google、またはJSON web token認証プロバイダーを使用して埋め込みダッシュボードを認証する方法を示しています。

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

アプリに埋め込み 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"));

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

注意

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

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
// Needed only if you are using the Atlas App Services authentication provider
const client = Stitch.initializeAppClient(
  'authentication-sample-eibkj', // ~REPLACE~ with your App ID
});
const sdk = new ChartsEmbedSDK({
  baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Chart dialog.
  getUserToken: () => getRealmUserToken(client),
  // getUserToken is a callback to provide the auth token to the SDK.
  // Use the getRealmUserToken helper when using the Atlas App Services auth provider.
  // If using Custom JWT or Google providers, provide your own code to retrieve the JWT
});
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"));

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

注意

既存の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"));

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

注意

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

import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
// Needed only if you are using the Atlas App Services authentication provider
const client = Stitch.initializeAppClient(
   'authentication-sample-eibkj', // ~REPLACE~ with your App ID
});
const sdk = new ChartsEmbedSDK({
   baseUrl: "https://charts.mongodb.com/charts-embedding-examples-wgffp", // ~REPLACE~ with the Base URL from your Embed Dashboard dialog.
   getUserToken: () => getRealmUserToken(client),
   // getUserToken is a callback to provide the auth token to the SDK.
   // Use the getRealmUserToken helper when using the Atlas App Services auth provider.
   // If using Custom JWT or Google providers, provide your own code to retrieve the JWT
});
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"));

戻る

埋め込み SDK

次へ

認証プロバイダの設定