Skip to content

Commit cc76d59

Browse files
Embedding ia rework (#356)
* DOCSP-10370: [Charts] unauthenticated embedding tutorial, misc. updates (#341) * DOCSP-10310: [Charts] Embed Charts Using iFrame Procedure (#346) * [Charts] Rewrite Embedded Chart Options Page to apply to both iframe + sdk (#350) * [Charts] Rewrite Embedded Chart Options Page to apply to both iframe + sdk * DOCSP-10314: [Charts] Rewrite Embedded Chart Options Page to apply to both iframe + sdk Co-authored-by: Steve Renaker <[email protected]>
1 parent f7b2fd9 commit cc76d59

23 files changed

+879
-508
lines changed

source/embed-chart-anon-auth.txt

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
.. _anon-embedding-charts:
2+
3+
==============================
4+
Embed an Unauthenticated Chart
5+
==============================
6+
7+
.. default-domain:: mongodb
8+
9+
.. contents:: On this page
10+
:local:
11+
:backlinks: none
12+
:depth: 2
13+
:class: singlecol
14+
15+
You can embed a chart in a web application and not require authentication
16+
to view chart data. To restrict access to your embedded chart, see the
17+
:ref:`authenticated embedded chart tutorials <authenticated-embedding-tutorials>`.
18+
19+
Prerequisites
20+
-------------
21+
22+
- You must be a dashboard :ref:`Author <dashboard-permissions>` to enable
23+
unauthenticated embedding for a chart.
24+
- :ref:`add-data-source`
25+
- :ref:`create-new-dashboard`
26+
- :ref:`create-new-chart`
27+
28+
Procedures
29+
----------
30+
31+
.. _anon-embedding-procedure:
32+
33+
Enable Unauthenticated Embedding for a Chart
34+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
35+
36+
Enable unauthenticated embedding to generate a chart ID and |charts-short|
37+
Base URL. You will need your chart ID and |charts-short| Base URL to
38+
display your chart on a web page.
39+
40+
.. include:: /includes/steps/enable-embedding-sdk-anon.rst
41+
42+
Create a Web App to Display Your Chart
43+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
44+
45+
If you already have an app in which to display your chart, you're ready
46+
to add an unauthenticated embedded chart. If not, proceed with the remaining
47+
steps to create a new app.
48+
49+
MongoDB offers a pre-built example app that shows how to use the
50+
Embedding SDK to display an unauthenticated embedded chart.
51+
52+
Clone the :gh:`GitHub repository </mongodb-js/charts-embed-sdk/>`
53+
to get all the example apps. Instructions for running the unauthenticated
54+
example are in the :gh:`Readme
55+
</mongodb-js/charts-embed-sdk/tree/master/examples/unauthenticated>` file
56+
in the ``unauthenticated`` directory. You can run the app as-is, or you can
57+
customize it to use a chart of your own.
58+
59+
Customize the Node.js App
60+
~~~~~~~~~~~~~~~~~~~~~~~~~
61+
62+
All the lines you need to edit are marked with a comment containing
63+
``~REPLACE~``.
64+
65+
.. include:: /includes/steps/customize-anon-auth-app.rst
66+
67+
After you finish customizing the app, it's ready to run.

source/embed-chart-google-auth.txt

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,9 @@ Procedures
3636
Enable Authenticated Embedding for your Chart
3737
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3838

39-
Enable authenticated embedding to generate a chart ID and |charts-short|
40-
Base URL. You will need your chart ID and |charts-short| Base URL to
41-
display your chart on a web page.
39+
.. include:: /includes/enable-embedding-intro.rst
4240

43-
To embed an authenticated chart, see the
44-
**Authenticated Embedding** tab in :ref:`embedding-procedure`.
41+
.. include:: /includes/steps/embed-chart-authenticated.rst
4542

4643
.. _create-google-id:
4744

source/embed-chart-jwt-auth.txt

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,9 @@ Procedures
4747
Enable Authenticated Embedding for a Chart
4848
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
4949

50-
To embed an authenticated chart, see the
51-
**Authenticated Embedding** tab in :ref:`embedding-procedure`.
50+
.. include:: /includes/enable-embedding-intro.rst
51+
52+
.. include:: /includes/steps/embed-chart-authenticated.rst
5253

5354
Configure |charts-short| to use your Custom JWT Provider
5455
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

source/embed-chart-stitch-auth.txt

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,9 @@ Procedures
5757
Enable Authenticated Embedding for a Chart
5858
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5959

60-
To embed an authenticated chart, see the
61-
**Authenticated Embedding** tab in :ref:`embedding-procedure`.
60+
.. include:: /includes/enable-embedding-intro.rst
61+
62+
.. include:: /includes/steps/embed-chart-authenticated.rst
6263

6364
Configure |charts-short| to use your Custom Realm Provider
6465
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

source/embedded-chart-error-codes.txt

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,13 @@ table for more information on each error code.
3737
- Chart not found.
3838

3939
- Check the ``id`` field in the iframe and make sure it
40-
matches the ``id`` in the
41-
:ref:`Embed Chart <embedding-procedure>` dialog.
40+
matches the ``id`` in the :guilabel:`Embed Chart` modal window.
4241

4342
* - ``3``
4443
- Embedding not enabled.
4544

4645
- Check that embedding is enabled in your chart's
47-
:ref:`Embed Chart <embedding-procedure>` dialog.
46+
:guilabel:`Embed Chart` modal window.
4847

4948
* - ``4``
5049
- Embedding not allowed.

0 commit comments

Comments
 (0)