Atlas App Services で認証されたチャートの埋め込み

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

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

チャートを選択します。

ダッシュボードから次をクリックします:埋め込み情報にアクセスするには、チャートの右上にある を参照してください。 ドロップダウン メニューから 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. Nameフィールドに、プロバイダーのわかりやすい名前を入力します。

3. Providerリストから、 Atlas App Servicesを選択します。

4. Atlas Projectリストから、アプリ サービスを含む Cloud プロジェクトを選択します。

5. App IDリストから、認証に使用するアプリサービスを選択します。

データアクセスに Atlas App Services ルールを使用するための切り替えスイッチを設定します。

埋め込みチャートにアクセスするためのユーザーを認証するだけでなく、 アプリサービス ルールを使用して詳細なデータ アクセス制御を実行できます。 ルールの適用を有効にする場合は、トグル スイッチをOnに設定します。

このオプションを有効にすると、コレクションに定義された App Services ルールは、チャート データを検索するときに Charts によって監視されます。 You can use this feature to restrict access to the data shown on your chart, including showing different subsets of data to different users, depending on their role.

サービス名を入力します。

MongoDB からデータを取得するサービスの名前を入力します。 データ サービスの名前を見つけるには、次の手順に従います。

1. アプリ サービスに移動します。

2. サイドバー ナビゲーションで [ Clusters ] をクリックします。

3. サービス名はApp Service Nameの下に表示されます。

[Save] ボタンをクリックします。

テキスト エディターでファイルindex.js を開きます。

ファイルindex.jsはsrcディレクトリにあります。

アプリ ID を入力します

既存のアプリ ID をアプリ ID に置き換えます。アプリ サービス UI の左側に表示されているアプリ ID は、

const client = Stitch.initializeAppClient(
  'authentication-sample-eibkj', // Optional: ~REPLACE~ with your  App ID
{

Charts ベース URL を入力します

既存の Charts base URL を、表示するチャートのベース URL に置き換えます。 Charts ベース URL は埋め込みオプション モーダル ウィンドウに表示されます。 チャートの埋め込みを有効にする方法の詳細な手順については、「 SDK の埋め込み」を参照してください。

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

getRealmUserToken()上記のコードJSON web token Atlas App Servicesスニペットの 関数に注目してください。この関数は、既存の 認証セッションから を返します。サンプルアプリの 2 行目のimportステートメントにあるように、 getRealmUserToken()は埋め込み SDK からインポートする必要があります。

import ChartsEmbedSDK, { getRealmUserToken } from "@mongodb-js/charts-embed-dom";

次のコード スニペットに示すように、埋め込み SDK とインラインJavaScriptを HTML ページに含めることもできます。

<script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.6.0/stitch.js"></script>
<script src="https://unpkg.com/@mongodb-js/charts-embed-dom"></script>

このシナリオでgetRealmUserToken()関数を使用するには、SDK から関数をインポートします。

ChartsEmbedSDK.getRealmUserToken()

チャート ID を入力します

既存のチャート ID を、表示するチャートの ID に置き換えます。 チャート ID は、埋め込みオプションのモーダル ウィンドウに表示されます。 チャートの埋め込みを有効にする方法の詳細な手順については、「 SDK の埋め込み」を参照してください。

const chart = sdk.createChart({
  chartId: "a2e775e6-f267-4c2c-a65d-fbf3fad4a4f2", // Optional: ~REPLACE~ with your Chart ID
});