Google ログインで認証されたチャートの埋め込み

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

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

チャートを選択します。

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

4. Google Client Idフィールドに、作成した Google クライアント ID を入力します。

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

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

ファイルindex.htmlはauthenticated-googleプロジェクトのルート ディレクトリにあります。

Google クライアント ID を入力します

既存の Google クライアント ID を Google クライアント ID に置き換えます。

<!-- Optional: ~REPLACE~ content with your Google Client ID -->
<meta
  name="google-signin-client_id"
  content="012345678910-ifpoccch8js9srh9obfdn683h1iss2ag.apps.googleusercontent.com"
/>

Google クライアント ID は、Google API コンソール プロジェクトを作成すると表示されます。 Google クライアント ID の作成手順については、「 Google クライアント ID の作成」を参照してください。

Charts ベース URL を入力します

既存のbaseUrlを、表示するチャートのベース URL に置き換えます。

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

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

チャート ID を入力します

既存のchartIdを、表示するチャートの ID に置き換えます。

const chart = sdk.createChart({
  chartId: "example-acaf-4af0-8320-5099bfebd1bd", // Optional: ~REPLACE~ with your Chart ID
});

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