Verwendung eingebetteter Analysen von Amazon QuickSight kann den Prozess der Ausstattung Ihrer Anwendung mit funktionalen Visualisierungen ohne komplexe Entwicklung vereinfachen. Es gibt mehrere Möglichkeiten, QuickSight-Dashboards in Anwendungen einzubetten. In diesem Beitrag schauen wir uns an, wie es mit React und dem gemacht werden kann Amazon QuickSight-Einbettungs-SDK.

Dashboard-Konsumenten haben häufig keinen Benutzer, der ihrem AWS-Konto zugewiesen ist, und haben daher keinen Zugriff auf das Dashboard. Damit sie Daten nutzen können, muss das Dashboard für anonyme Benutzer zugänglich sein. Schauen wir uns die Schritte an, die erforderlich sind, um einem nicht authentifizierten Benutzer die Anzeige Ihres QuickSight-Dashboards in Ihrer React-Anwendung zu ermöglichen.

Lösungsüberblick

Unsere Lösung nutzt die folgenden Schlüsseldienste:

Nachdem die Webseite im Browser geladen wurde, ruft der Browser API Gateway auf, das eine Lambda-Funktion aufruft, die die QuickSight-API aufruft, um eine Dashboard-URL für einen anonymen Benutzer zu generieren. Die Lambda-Funktion muss eine IAM-Rolle mit den erforderlichen Berechtigungen übernehmen. Das folgende Diagramm zeigt einen Überblick über die Architektur.

Voraussetzungen:

Folgende Voraussetzungen müssen Sie mitbringen:

Richten Sie Berechtigungen für nicht authentifizierte Zuschauer ein

Erstellen Sie in Ihrem Konto eine IAM-Richtlinie, die Ihre Anwendung im Namen des Betrachters übernimmt:

1. Wählen Sie in der IAM-Konsole Richtlinien im Navigationsbereich.
2. Auswählen Richtlinie erstellen.
3. Auf dem JSON Geben Sie auf der Registerkarte den folgenden Richtliniencode ein:

{ "Version": "2012-10-17", "Statement": [ { "Action": [ "quicksight:GenerateEmbedUrlForAnonymousUser" ], "Resource": [ "arn:aws:quicksight:*:*:namespace/default", "arn:aws:quicksight:*:*:dashboard/<YOUR_DASHBOARD_ID1>", "arn:aws:quicksight:*:*:dashboard/<YOUR_DASHBOARD_ID2>" ], "Effect": "Allow" }, { "Action": [ "logs:CreateLogGroup", "logs:CreateLogStream", "logs:PutLogEvents" ], "Resource": "*", "Effect": "Allow" } ]
}

Stellen Sie sicher, dass Sie den Wert von ändern auf den Wert der Dashboard-ID. Notieren Sie sich diese ID, um sie auch in einem späteren Schritt zu verwenden.

Für das zweite Anweisungsobjekt mit Protokollen gelten folgende Berechtigungen: optional. Sie können damit eine Protokollgruppe mit dem angegebenen Namen erstellen, einen Protokollstream für die angegebene Protokollgruppe erstellen und einen Stapel von Protokollereignissen in den angegebenen Protokollstream hochladen.

In dieser Richtlinie gestatten wir dem Benutzer, Folgendes auszuführen GenerateEmbedUrlForAnonymousUser Aktion für die Dashboard-ID in der Liste der im Platzhalter eingefügten Dashboard-IDs.

4. Geben Sie einen Namen für Ihre Richtlinie ein (z. B. AnonymousEmbedPolicy) und wähle Richtlinie erstellen.

Als Nächstes erstellen wir eine Rolle und hängen diese Richtlinie an die Rolle an.

5. Auswählen Rollen im Navigationsbereich und wählen Sie dann aus Rolle erstellen.

6. Auswählen Lambda für die vertrauenswürdige Instanz.
7. Suchen und auswählen AnonymousEmbedPolicy, Dann wählen Weiter.
8. Geben Sie einen Namen für Ihre Rolle ein, z AnonymousEmbedRole.
9. Stellen Sie sicher, dass der Richtlinienname im enthalten ist Berechtigungen hinzufügen .
10. Schließen Sie die Erstellung Ihrer Rolle ab.

Sie haben gerade das erstellt AnonymousEmbedRole Ausführungsrolle. Sie können nun mit dem nächsten Schritt fortfahren.

Generieren Sie eine anonyme Einbettungs-URL-Lambda-Funktion

In diesem Schritt erstellen wir eine Lambda-Funktion, die mit QuickSight interagiert, um eine Einbettungs-URL für einen anonymen Benutzer zu generieren. Unsere Domain muss zugelassen werden. Es gibt zwei Möglichkeiten, die Integration von Amazon QuickSight zu erreichen:

1. Durch Hinzufügen der URL zur Liste der zulässigen Domänen in der Amazon QuickSight-Administratorkonsole (wird später erläutert). [Optional] Fügen Sie Ihre Domain in QuickSight hinzu Sektion).
2. [Empfohlen] Durch Hinzufügen der Einbettungs-URL-Anfrage zur Laufzeit im API-Aufruf. Option 1 wird empfohlen, wenn Sie die zulässigen Domänen beibehalten müssen. Andernfalls werden die Domains nach 30 Minuten, was der Sitzungsdauer entspricht, entfernt. Für andere Anwendungsfälle wird empfohlen, die zweite Option zu verwenden (unten beschrieben und implementiert).

Erstellen Sie auf der Lambda-Konsole eine neue Funktion.

1. Auswählen Autor von Grund auf neu.
2. Aussichten für FunktionsnameGeben Sie einen Namen ein, z AnonymousEmbedFunction.
3. Aussichten für Laufzeitwählen Python 3.9.
4. Aussichten für Ausführungsrollewählen Verwenden Sie eine vorhandene Rolle.
5. Wählen Sie die Rolle AnonymousEmbedRole.
6. Auswählen Funktion erstellen.
7. Navigieren Sie auf der Seite mit den Funktionsdetails zu Code Tab und geben Sie den folgenden Code ein:

import json, boto3, os, re, base64 def lambda_handler(event, context):
print(event)
try:
def getQuickSightDashboardUrl(awsAccountId, dashboardIdList, dashboardRegion, event):
#Create QuickSight client
quickSight = boto3.client('quicksight', region_name=dashboardRegion); #Construct dashboardArnList from dashboardIdList
dashboardArnList=[ 'arn:aws:quicksight:'+dashboardRegion+':'+awsAccountId+':dashboard/'+dashboardId for dashboardId in dashboardIdList]
#Generate Anonymous Embed url
response = quickSight.generate_embed_url_for_anonymous_user(
AwsAccountId = awsAccountId,
Namespace = 'default',
ExperienceConfiguration = {'Dashboard':{'InitialDashboardId': dashboardIdList[0]}},
AuthorizedResourceArns = dashboardArnList,
SessionLifetimeInMinutes = 60,
AllowedDomains = ['http://localhost:3000']
)
return response #Get AWS Account Id
awsAccountId = context.invoked_function_arn.split(':')[4] #Read in the environment variables
dashboardIdList = re.sub(' ','',os.environ['DashboardIdList']).split(',')
dashboardNameList = os.environ['DashboardNameList'].split(',')
dashboardRegion = os.environ['DashboardRegion'] response={} response = getQuickSightDashboardUrl(awsAccountId, dashboardIdList, dashboardRegion, event) return {'statusCode':200, 'headers': {"Access-Control-Allow-Origin": "http://localhost:3000", "Content-Type":"text/plain"}, 'body':json.dumps(response)
} except Exception as e: #catch all
return {'statusCode':400, 'headers': {"Access-Control-Allow-Origin": "http://localhost:3000", "Content-Type":"text/plain"}, 'body':json.dumps('Error: ' + str(e))
}

Wenn Sie localhost nicht verwenden, ersetzen Sie es http://localhost:3000 in den Rückgaben mit dem Hostnamen Ihrer Anwendung. Vergessen Sie beim Übergang zur Produktion nicht, den Austausch durchzuführen http://localhost:3000 mit Ihrer Domäne.

9. Auf dem Konfiguration Registerkarte unter Allgemeine Konfiguration, wählen Bearbeiten.
10. Erhöhen Sie das Timeout von 3 Sekunden auf 30 Sekunden und wählen Sie dann aus Speichern.
11. Der Umgebungsvariablen, wählen Bearbeiten.
12. Fügen Sie die folgenden Variablen hinzu:
    1. Speichern DashboardIdList und listen Sie Ihre Dashboard-IDs auf.
    2. Speichern DashboardRegion und geben Sie die Region Ihres Dashboards ein.
13. Auswählen Speichern.

Ihre Konfiguration sollte dem folgenden Screenshot ähneln.

14. Auf dem Code Tab, wählen Sie Deploy um die Funktion bereitzustellen.

Richten Sie API Gateway ein, um die Lambda-Funktion aufzurufen

Führen Sie die folgenden Schritte aus, um API Gateway zum Aufrufen der von Ihnen erstellten Funktion einzurichten:

1. Navigieren Sie in der API Gateway-Konsole zu REST API Abschnitt und wählen Sie Bauen.
2. Der Erstellen Sie eine neue APIWählen Neue API.
3. Aussichten für API-NameGeben Sie einen Namen ein (z. B. QuicksightAnonymousEmbed).
4. Auswählen API erstellen.

5. Auf dem Aktionen Menü, wählen Sie Ressource erstellen.
6. Aussichten für RessourcennameGeben Sie einen Namen ein (z. B. anonymous-embed).

Lassen Sie uns nun eine Methode erstellen.

7. Wähle die anonymous-embed Ressource und auf der Aktionen Menü, wählen Sie Methode erstellen.
8. Auswählen BESTELLE unter dem Ressourcennamen.
9. Aussichten für IntegrationstypWählen Lambda.
10. Auswählen Verwenden Sie die Lambda-Proxy-Integration.
11. Aussichten für Lambda-FunktionGeben Sie den Namen der von Ihnen erstellten Funktion ein.
12. Auswählen Speichern, Dann wählen OK.

Jetzt können wir die API bereitstellen.

13. Auf dem Aktionen Menü, wählen Sie API bereitstellen.
14. Aussichten für BereitstellungsphaseWählen Neue Bühne.
15. Geben Sie einen Namen für Ihre Bühne ein, z embed.
16. Auswählen Deploy.

[Optional] Fügen Sie Ihre Domain in QuickSight hinzu

Wenn Sie Zulässige Domänen hinzugefügt haben Generieren Sie eine anonyme Einbettungs-URL-Lambda-Funktion Teil, zögern Sie nicht, dorthin zu wechseln Aktivieren Sie die Kapazitätspreise .

Um Ihre Domäne zu den zulässigen Domänen in QuickSight hinzuzufügen, führen Sie die folgenden Schritte aus:

1. Wählen Sie auf der QuickSight-Konsole das Benutzermenü und dann „ QuickSight verwalten.

2. Auswählen Domänen und Einbettung im Navigationsbereich.
3. Aussichten für Domain, geben Sie Ihre Domain ein (http://localhost:).

Stellen Sie sicher, zu ersetzen passend zu Ihrem lokalen Setup.

4. Auswählen Speichern.

Stellen Sie sicher, dass Sie die Domäne „localhost“ durch die Domäne ersetzen, die Sie nach dem Testen verwenden werden.

Aktivieren Sie die Kapazitätspreise

Wenn Sie die Sitzungskapazitätspreise nicht aktiviert haben, befolgen Sie die Schritte in diesem Abschnitt. Um fortfahren zu können, muss diese Funktion unbedingt aktiviert sein.

Dank der Kapazitätspreise können QuickSight-Kunden Lesersitzungen in großen Mengen erwerben, ohne einzelne Leser in QuickSight bereitstellen zu müssen. Die Kapazitätspreisgestaltung ist ideal für eingebettete Anwendungen oder umfangreiche Business Intelligence (BI)-Bereitstellungen. Für weitere Informationen besuchen Sie Amazon QuickSight-Preise.

Um die Kapazitätspreise zu aktivieren, führen Sie die folgenden Schritte aus:

1. Auf dem QuickSight verwalten Seite wählen Ihre Abonnements im Navigationsbereich.
2. Im Kapazitätspreise Abschnitt auswählen Holen Sie sich ein monatliches Abonnement.
3. Auswählen Bestätige Abonnement.

Weitere Informationen zu Kapazitätspreisen finden Sie unter Neu in Amazon QuickSight – Sitzungskapazitätspreise für groß angelegte Bereitstellungen, Einbettung in öffentliche Websites und Entwicklerportal für eingebettete Analysen.

Richten Sie Ihre React-Anwendung ein

Führen Sie die folgenden Schritte aus, um Ihre React-Anwendung einzurichten:

1. Gehen Sie in Ihrem React-Projektordner in Ihr Stammverzeichnis und führen Sie es aus npm i amazon-quicksight-embedding-sdk um das Paket amazon-quicksight-embedding-sdk zu installieren.
2. In Ihrem App.js Datei, ersetzen Sie Folgendes:
   1. Ersetzen YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME mit Ihrer API Gateway-Aufruf-URL und Ihrem Ressourcennamen (z. B. https://xxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/embed/anonymous-embed).
   2. Ersetzen YOUR_DASHBOARD1_ID mit der ersten Dashboard-ID von Ihrem DashboardIdList. Dies ist das Dashboard, das beim ersten Rendern angezeigt wird.
   3. Ersetzen YOUR_DASHBOARD2_ID mit der zweiten Dashboard-ID von Ihrem DashboardIdList.

Der folgende Codeausschnitt zeigt ein Beispiel dafür App.js Datei in Ihrem React-Projekt. Der Code ist eine React-Komponente, die ein QuickSight-Dashboard basierend auf der ausgewählten Dashboard-ID einbettet. Der Code enthält die folgenden Schlüsselkomponenten:

• Staatshaken – Zwei Status-Hooks werden mit definiert useState() Hook von React:
  • Armaturenbrett – Enthält die aktuell ausgewählte Dashboard-ID.
  • QuickSightEmbedding – Enthält das von zurückgegebene QuickSight-Einbettungsobjekt embedDashboard() Funktion.
• Ref. Haken – Ein Ref-Hook wird mit definiert useRef() Haken von React. Es wird verwendet, um einen Verweis auf das DOM-Element zu enthalten, in das das QuickSight-Dashboard eingebettet wird.
• useEffect()-Hook – Der useEffect()-Hook wird verwendet, um die Einbettung des QuickSight-Dashboards auszulösen, wenn sich die ausgewählte Dashboard-ID ändert. Zunächst wird mithilfe der fetch()-Methode die Dashboard-URL für die ausgewählte ID von der QuickSight-API abgerufen. Nachdem die URL abgerufen wurde, ruft sie die Funktion „embed()“ mit der URL als Argument auf.
• Handler ändern - Die changeDashboard() Die Funktion ist ein einfacher Ereignishandler, der den Dashboard-Status aktualisiert, wenn der Benutzer ein anderes Dashboard aus dem Dropdown-Menü auswählt. Sobald eine neue Dashboard-ID festgelegt wird, wird der useEffect-Hook ausgelöst.
• 10-Millisekunden-Timeout – Der Zweck der Verwendung des Timeouts besteht darin, eine kleine Verzögerung von 10 Millisekunden einzuführen, bevor der API-Aufruf durchgeführt wird. Diese Verzögerung kann in Szenarien nützlich sein, in denen Sie sofortige API-Aufrufe vermeiden oder übermäßige Anforderungen verhindern möchten, wenn die Komponente häufig gerendert wird. Durch die Zeitüberschreitung hat die Komponente etwas Zeit, sich zu beruhigen, bevor die API-Anfrage initiiert wird. Da wir die Anwendung im Entwicklungsmodus erstellen, hilft das Timeout dabei, Fehler zu vermeiden, die durch die doppelte Ausführung von verursacht werden useEffect . StrictMode. Weitere Informationen finden Sie unter Aktualisierungen des strengen Modus.

Siehe folgenden Code:

import './App.css';
import * as React from 'react';
import { useEffect, useRef, useState } from 'react';
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk'; function App() { const dashboardRef = useRef([]); const [dashboardId, setDashboardId] = useState('YOUR_DASHBOARD1_ID'); const [embeddedDashboard, setEmbeddedDashboard] = useState(null); const [dashboardUrl, setDashboardUrl] = useState(null); const [embeddingContext, setEmbeddingContext] = useState(null); useEffect(() => { const timeout = setTimeout(() => { fetch("YOUR_API_GATEWAY_INVOKE_URL/RESOURCE_NAME" ).then((response) => response.json() ).then((response) => { setDashboardUrl(response.EmbedUrl) }) }, 10); return () => clearTimeout(timeout); }, []); const createContext = async () => { const context = await createEmbeddingContext(); setEmbeddingContext(context); } useEffect(() => { if (dashboardUrl) { createContext() } }, [dashboardUrl]) useEffect(() => { if (embeddingContext) { embed(); } }, [embeddingContext]) const embed = async () => { const options = { url: dashboardUrl, container: dashboardRef.current, height: "500px", width: "600px", }; const newEmbeddedDashboard = await embeddingContext.embedDashboard(options); setEmbeddedDashboard(newEmbeddedDashboard); }; useEffect(() => { if (embeddedDashboard) { embeddedDashboard.navigateToDashboard(dashboardId, {}) } }, [dashboardId]) const changeDashboard = async (e) => { const dashboardId = e.target.value setDashboardId(dashboardId) } return ( <> <header> <h1>Embedded <i>QuickSight</i>: Build Powerful Dashboards in React</h1> </header> <main> <p>Welcome to the QuickSight dashboard embedding sample page</p> <p>Please pick a dashboard you want to render</p> <select id='dashboard' value={dashboardId} onChange={changeDashboard}> <option value="YOUR_DASHBOARD1_ID">YOUR_DASHBOARD1_NAME</option> <option value="YOUR_DASHBOARD2_ID">YOUR_DASHBOARD2_NAME</option> </select> <div ref={dashboardRef} /> </main> </> );
}; export default App

Ersetzen Sie als Nächstes den Inhalt Ihres App.css Datei, die zum Stylen und Layouten Ihrer Webseite verwendet wird, mit dem Inhalt aus dem folgenden Codeausschnitt:

body { background-color: #ffffff; font-family: Arial, sans-serif; margin: 0; padding: 0;
} header { background-color: #f1f1f1; padding: 20px; text-align: center;
} h1 { margin: 0;
} main { margin: 20px; text-align: center;
} p { margin-bottom: 20px;
} a { color: #000000; text-decoration: none;
} a:hover { text-decoration: underline;
} i { color: orange; font-style: normal;
}

Jetzt ist es an der Zeit, Ihre App zu testen. Starten Sie Ihre Anwendung, indem Sie sie ausführen npm start in Ihrem Terminal. Die folgenden Screenshots zeigen Beispiele Ihrer App sowie die Dashboards, die sie anzeigen kann.

Zusammenfassung

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mithilfe des AWS SDK ein QuickSight-Dashboard in eine React-Anwendung einbetten. Wenn Sie Ihr Dashboard für anonyme Benutzer freigeben, können diese auf Ihr Dashboard zugreifen, ohne ihnen Zugriff auf Ihr AWS-Konto zu gewähren. Es gibt auch andere Möglichkeiten, Ihr Dashboard anonym zu teilen, z. B. über 1-Klick öffentliche Einbettung.

TRETEN SIE DEM Quicksight-Community um zu fragen, zu antworten und mit anderen zu lernen und zusätzliche Ressourcen zu erkunden.

Über den Autor

Adrianna ist Lösungsarchitekt bei AWS Global Financial Services. Da sie seit August 2018 Teil von Amazon ist, hatte sie die Chance, sowohl in den Betrieb als auch in das Cloud-Geschäft des Unternehmens eingebunden zu werden. Derzeit erstellt sie Software-Assets, die den innovativen Einsatz von AWS-Services demonstrieren und auf spezifische Kundenanwendungsfälle zugeschnitten sind. Sie beschäftigt sich täglich aktiv mit verschiedenen Aspekten der Technologie, ihre wahre Leidenschaft liegt jedoch in der Kombination von Webentwicklung und Analyse.

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• PlatoData.Network Vertikale generative KI. Motiviere dich selbst. Hier zugreifen.
• PlatoAiStream. Web3-Intelligenz. Wissen verstärkt. Hier zugreifen.
• PlatoESG. Automobil / Elektrofahrzeuge, Kohlenstoff, CleanTech, Energie, Umwelt, Solar, Abfallwirtschaft. Hier zugreifen.
• BlockOffsets. Modernisierung des Eigentums an Umweltkompensationen. Hier zugreifen.
• Quelle: https://aws.amazon.com/blogs/big-data/level-up-your-react-app-with-amazon-quicksight-how-to-embed-your-dashboard-for-anonymous-access/