Integrieren Sie visuelle Komponenten von Amazon Quick Sight mithilfe von Amazon Cognito und IaC-Automatisierung in Webanwendungen - AWS Prescriptive Guidance
ZusammenfassungVoraussetzungen und EinschränkungenArchitekturToolsBest PracticesEpenFehlerbehebungZugehörige Ressourcen

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Integrieren Sie visuelle Komponenten von Amazon Quick Sight mithilfe von Amazon Cognito und IaC-Automatisierung in Webanwendungen

Ishita Gupta und Srishti Wadhwa, Amazon Web Services

Zusammenfassung

Dieses Muster bietet einen speziellen Ansatz für die Einbettung der visuellen Komponenten von Amazon Quick Sight in React-Anwendungen, indem die Einbettung registrierter Benutzer mit optimierter Amazon Cognito Cognito-Authentifizierung verwendet wird. Diese Ressourcen werden dann über eine IaC-Vorlage (Infrastructure as Code) bereitgestellt. Im Gegensatz zur herkömmlichen Dashboard-Einbettung isoliert diese Lösung spezifische Diagramme und Grafiken für die direkte Integration in React-Anwendungen, wodurch sowohl die Leistung als auch die Benutzererfahrung erheblich verbessert werden.

Die Architektur sorgt für einen effizienten Authentifizierungsfluss zwischen der Amazon Cognito-Benutzerverwaltung und den Quick Sight-Berechtigungen: Benutzer authentifizieren sich über Amazon Cognito und greifen auf ihre autorisierten Visualisierungen auf der Grundlage der Dashboard-Freigaberegeln in Quick Sight zu. Dieser optimierte Ansatz macht den direkten Zugriff auf die Quick Sight-Konsole überflüssig und gewährleistet gleichzeitig robuste Sicherheitskontrollen.

Die gesamte Umgebung wird über eine einzige AWS CloudFormation Vorlage bereitgestellt, die alle erforderlichen Infrastrukturkomponenten bereitstellt, darunter:

  • Ein serverloses Backend, das ein Amazon AWS Lambda API Gateway verwendet

  • Sicheres Frontend-Hosting über Amazon CloudFront, Amazon Simple Storage Service (Amazon S3) und AWS WAF

  • Identitätsmanagement mithilfe von Amazon Cognito

Alle Komponenten werden gemäß den bewährten Sicherheitsmethoden mit IAM-Richtlinien AWS Identity and Access Management (Least-Privilege), AWS WAF Schutz und Verschlüsselung konfiguriert. end-to-end

Diese Lösung ist ideal für Entwicklungsteams und Unternehmen, die sichere, interaktive Analysen in ihre Anwendungen integrieren und gleichzeitig die genaue Kontrolle über den Benutzerzugriff behalten möchten. Die Lösung nutzt AWS verwaltete Dienste und Automatisierung, um den Einbettungsprozess zu vereinfachen, die Sicherheit zu erhöhen und Skalierbarkeit zu gewährleisten, um den sich ändernden Geschäftsanforderungen gerecht zu werden.

Zielgruppe und Anwendungsfälle:

  • Frontend-Entwickler, die Analysen in React-Apps einbetten möchten

  • Software-as-a-Service (SaaS) -Produktteams, die benutzerspezifische oder rollenbasierte Datenvisualisierungen anbieten möchten

  • Lösungsarchitekten, die an der Integration von Analysen in benutzerdefinierte Portale interessiert sind AWS

  • Entwickler von Business Intelligence (BI), die authentifizierten Benutzern Grafiken zur Verfügung stellen möchten, ohne vollen Zugriff auf das Dashboard zu benötigen

  • Unternehmensteams, die interaktive Quick Sight-Diagramme in interne Tools einbetten möchten

Voraussetzungen und Einschränkungen

Voraussetzungen

Um dieses Muster erfolgreich zu implementieren, stellen Sie sicher, dass die folgenden Voraussetzungen erfüllt sind:

  • Aktiv AWS-Konto — Ein AWS-Konto mit Berechtigungen zum Bereitstellen von CloudFormation Stacks und zum Erstellen von Lambda-, API Gateway-, Amazon Cognito- und Amazon S3 CloudFront S3-Ressourcen.

  • Amazon Quick Sight-Konto — Ein aktives Quick Sight-Konto mit mindestens einem Dashboard, das Bildmaterial enthält. Anweisungen zur Einrichtung finden Sie unter Tutorial: Erstellen Sie ein Amazon Quick Sight-Dashboard mithilfe von Beispieldaten in der Amazon Quick Suite-Dokumentation.

  • Eine Entwicklungsumgebung, die aus folgenden Komponenten besteht:

    • Node.js (Version 16 oder höher)

    • npm oder yarn installiert

    • Vite als React-Build-Tool

    • React (Version 19.1.1)

  • Teilen von Dashboards — Dashboards müssen in Quick Sight geteilt werden und der Implementierer muss sich anmelden, um auf die eingebetteten Grafiken oder Dashboards zugreifen zu können.

Einschränkungen

  • Dieses Muster verwendet die Methode zur Einbettung registrierter Benutzer, was voraussetzt, dass Implementierer über ein aktives Quick Sight-Konto verfügen.

  • Der Zugriff ist auf die Dashboards und Grafiken beschränkt, die explizit mit dem authentifizierten Quick Sight-Benutzer geteilt werden, der dieses Muster implementiert. Wenn der Implementierer nicht über die richtigen Zugriffsrechte verfügt, schlägt die Generierung der Einbettungs-URL fehl und die Grafiken werden nicht geladen.

  • Der CloudFormation Stack muss in einem System bereitgestellt werden, in AWS-Region dem Quick Sight, API Gateway und Amazon Cognito unterstützt werden. Informationen zur Verfügbarkeit nach Regionen finden Sie unter AWS-Services Nach Regionen.

Versionen der Produkte

Architektur

Zielarchitektur

Das folgende Diagramm zeigt die Architektur und den Arbeitsablauf für dieses Muster.

Architektur und Workflow für die Einbettung von Quick Sight-Grafiken in eine React-Anwendung.

In diesem Workflow:

  1. Der Benutzer greift auf die Anwendung zu. Der Benutzer öffnet die React-Webanwendung mit einem Browser. Die Anfrage wird an eine CloudFront Distribution weitergeleitet, die als Netzwerk zur Bereitstellung von Inhalten für die Anwendung fungiert.

  2. AWS WAF filtert bösartige Anfragen. Bevor die Anfrage eintrifft CloudFront, wird sie weitergeleitet AWS WAF. AWS WAF untersucht den Datenverkehr und blockiert alle böswilligen oder verdächtigen Anfragen auf der Grundlage von Sicherheitsregeln.

  3. Amazon S3 stellt statische Dateien bereit. Wenn die Anfrage sauber ist, CloudFront ruft die statischen Frontend-Assets (HTML, JS, CSS) mithilfe von Origin Access Control (OAC) aus einem privaten S3-Bucket ab und übermittelt sie an den Browser.

  4. Der Benutzer meldet sich an. Nachdem die Anwendung geladen wurde, meldet sich der Benutzer über Amazon Cognito an, das den Benutzer authentifiziert und ein sicheres JSON-Web-Token (JWT) für den autorisierten API-Zugriff zurückgibt.

  5. Die Anwendung stellt eine API-Anfrage. Nach der Anmeldung ruft die React-Anwendung den /get-embed-url Endpunkt auf API Gateway sicher auf und übergibt das JWT-Token im Anforderungsheader zur Authentifizierung.

  6. Das Token ist validiert. API Gateway validiert das Token mithilfe eines Amazon Cognito Cognito-Autorisierers. Wenn das Token gültig ist, wird die Anfrage fortgesetzt; andernfalls wird sie mit einer 401-Antwort (nicht autorisiert) abgelehnt.

  7. Die Anfrage wird zur Bearbeitung an Lambda weitergeleitet. Die validierte Anfrage wird dann an eine Backend-Lambda-Funktion weitergeleitet. Diese Funktion ist für die Generierung der Einbettungs-URL für das angeforderte Quick Sight-Visual verantwortlich.

  8. Lambda generiert die Einbettungs-URL aus Quick Sight. IAM verwendet eine IAM-Rolle mit den entsprechenden Berechtigungen, um die Quick GenerateEmbedUrlForRegisteredUser Sight-API aufzurufen und eine sichere, benutzerspezifische visuelle URL zu generieren.

  9. Lambda gibt die Einbettungs-URL an API Gateway zurück. Lambda sendet die generierte Einbettungs-URL als Teil einer JSON-Antwort zurück an API Gateway. Diese Antwort wird dann für die Übermittlung an das Frontend vorbereitet.

  10. Die Einbettungs-URL wird an den Browser gesendet. Die Einbettungs-URL wird als API-Antwort an den Browser zurückgegeben.

  11. Das Bild wird dem Benutzer angezeigt. Die React-Anwendung empfängt die Antwort und verwendet das Quick Sight Embedding SDK, um das spezifische Bild für den Benutzer zu rendern.

Automatisierung und Skalierung

Backend- und Frontend-Bereitstellungen sind vollständig automatisiert durch die Verwendung CloudFormation, wodurch alle erforderlichen AWS Ressourcen bereitgestellt werden, einschließlich Amazon Cognito, Lambda, API Gateway, Amazon S3,, CloudFront AWS WAF, IAM-Rollen und Amazon in einer einzigen Bereitstellung. CloudWatch

Diese Automatisierung gewährleistet eine konsistente und wiederholbare Infrastruktur in allen Umgebungen. Alle Komponenten werden automatisch skaliert: Lambda passt sich Funktionsaufrufen an, CloudFront stellt zwischengespeicherte Inhalte global bereit und API Gateway skaliert mit eingehenden Anfragen.

Tools

AWS-Services

  • Amazon Quick Sight ist ein Cloud-nativer Business Intelligence-Service, mit dem Sie interaktive Dashboards und Grafiken erstellen, verwalten und einbetten können.

  • Amazon API Gateway verwaltet APIs diese Funktionen als Brücke zwischen der React-Anwendung und den Backend-Services.

  • AWS Lambdaist ein serverloser Rechendienst, den dieses Muster verwendet, um sichere Quick Sight-Einbettungen URLs dynamisch zu generieren, und der automatisch auf der Grundlage von Anfragen skaliert wird.

  • Amazon Cognito bietet Authentifizierung und Autorisierung für Benutzer und stellt sichere Token für den API-Zugriff aus.

  • Amazon S3 hostet statische Frontend-Ressourcen für dieses Muster und stellt sie sicher bereit. CloudFront

  • Amazon CloudFront stellt Frontend-Inhalte weltweit mit geringer Latenz bereit und integriert sie AWS WAF zur Filterung des Datenverkehrs.

  • AWS WAFschützt die Webanwendung vor bösartigem Datenverkehr durch Anwendung von Sicherheitsregeln und Ratenbegrenzung.

  • AWS CloudFormationautomatisiert die Bereitstellung und Konfiguration aller Anwendungsressourcen in einer einzigen Bereitstellung.

  • Amazon CloudWatch sammelt Protokolle und Metriken von Lambda, API Gateway und AWS WAF zur Überwachung und Fehlerbehebung.

Tools für die Entwicklung

  • React JS ist ein Frontend-Framework, das dieses Muster verwendet, um die Webanwendung zu erstellen und eingebettete Quick Sight-Grafiken zu integrieren.

  • Vite ist ein Build-Tool, das für die schnelle Entwicklung und optimierte Produktions-Builds der React-Anwendung verwendet wird.

  • Das Quick Sight Embedding SDK erleichtert das Einbetten von Quick Sight-Grafiken in die React-Anwendung und ermöglicht eine nahtlose Interaktion zwischen der Anwendung und den Grafiken.

Code-Repository

Der Code für dieses Muster ist im GitHub Amazon Quick Sight Visual Embedding in React-Repository verfügbar.

Best Practices

Dieses Muster implementiert automatisch die folgenden bewährten Sicherheitsmethoden:

  • Verwendet Amazon Cognito Cognito-Benutzerpools für die JWT-basierte Authentifizierung mit optionaler Multi-Faktor-Authentifizierung (MFA).

  • Schützt APIs mit Amazon Cognito Cognito-Autorisierern und setzt IAM-Richtlinien mit den geringsten Rechten für alle Services durch.

  • Implementiert die Einbettung registrierter Benutzer in Quick Sight und stellt Benutzern automatisch die Leserrolle zu.

  • Erzwingt eine Verschlüsselung bei der Übertragung, die TLS 1.2 und spätere Versionen über CloudFront HTTPS unterstützt.

  • Verschlüsselt Daten im Ruhezustand mithilfe von AES-256 für Amazon S3 mit Versionierung und OAC.

  • Konfiguriert API Gateway Gateway-Nutzungspläne mit Drosselung und Kontingenten.

  • Schützt Lambda mit reservierter Parallelität und Schutz vor Umgebungsvariablen.

  • Aktiviert die Protokollierung für Amazon S3 CloudFront, Lambda und API Gateway; überwacht Dienste mithilfe CloudWatch von.

  • Verschlüsselt Protokolle, wendet Zugriffskontrollen an und setzt Ablehnungsrichtlinien für Nicht-HTTPS-basierte oder unverschlüsselte Uploads durch.

Darüber hinaus empfehlen wir Folgendes:

  • Wird verwendet CloudFormation , um Bereitstellungen zu automatisieren und konsistente Konfigurationen in allen Umgebungen aufrechtzuerhalten.

  • Stellen Sie sicher, dass jeder Benutzer über die richtigen Quick Sight-Berechtigungen für den Zugriff auf eingebettete Grafiken verfügt.

  • Schützen Sie API Gateway Gateway-Endpunkte mit Amazon Cognito Cognito-Autorisierern und setzen Sie das Prinzip der geringsten Rechte für alle IAM-Rollen durch.

  • Speichern Sie vertrauliche Informationen wie Amazon Resource Names (ARNs) und IDs in Umgebungsvariablen, anstatt sie fest zu codieren.

  • Optimieren Sie Lambda-Funktionen, indem Sie Abhängigkeiten reduzieren und die Kaltstartleistung verbessern. Weitere Informationen finden Sie im AWS Blogbeitrag Optimierung der Kaltstartleistung beim AWS Lambda Einsatz fortschrittlicher Priming-Strategien mit. SnapStart

  • Fügen Sie Ihre CloudFront Domain zur Quick Sight-Zulassungsliste hinzu, um eine sichere visuelle Einbettung zu ermöglichen.

  • Überwachen Sie Leistung und Sicherheit mithilfe CloudWatch von Protokollierung, Warnmeldungen und Datenverkehrsschutz. AWS WAF

Weitere empfohlene bewährte Methoden

  • Verwenden Sie benutzerdefinierte Domains mit SSL-Zertifikaten von AWS Certificate Manager , um ein sicheres und markenspezifisches Benutzererlebnis zu bieten.

  • Verschlüsseln Sie Amazon S3 S3-Daten und CloudWatch -Protokolle mithilfe von vom Kunden verwalteten AWS Key Management Service (AWS KMS) Schlüsseln, um mehr Kontrolle über die Verschlüsselung zu haben.

  • Erweitern Sie die AWS WAF Regeln um Geoblocking, SQL-Injection (SQLi), Cross-Site Scripting (XSS) -Schutz und benutzerdefinierte Filter für eine verbesserte Bedrohungsabwehr.

  • Aktivieren Sie CloudWatch Alarme und sorgen Sie AWS CloudTrail für Überwachung AWS Config, Prüfung und Einhaltung von Konfigurationen in Echtzeit.

  • Wenden Sie detaillierte IAM-Richtlinien an, erzwingen Sie die Rotation von API-Schlüsseln und gewähren Sie kontoübergreifenden Zugriff nur dann, wenn dies unbedingt erforderlich ist.

  • Führen Sie regelmäßige Sicherheitsbewertungen durch, um die Einhaltung von Compliance-Rahmenbedingungen wie System and Organization Controls 2 (SOC 2), General Data Protection Regulation (GDPR) und Health Insurance Portability and Accountability Act (HIPAA) sicherzustellen.

Epen

AufgabeDescriptionErforderliche Fähigkeiten

Klonen Sie das Repository

Klonen Sie das GitHub Repository für diese Lösung auf Ihr lokales System und navigieren Sie zum Projektverzeichnis:

git clone https://github.com/aws-samples/sample-quicksight-visual-embedding.git

cd sample-quicksight-visual-embedding

Dieses Repository enthält die CloudFormation Vorlage und den React-Quellcode, die für die Bereitstellung der Lösung erforderlich sind.

App-Developer
AufgabeDescriptionErforderliche Fähigkeiten

Stellen Sie die Vorlage bereit.

  1. Melden Sie sich bei der an AWS-Managementkonsole und öffnen Sie die AWS CloudFormation Konsole.

  2. Wählen Sie auf der Seite Stacks oben rechts die Option Stapel erstellen und dann Mit neuen Ressourcen (Standard) aus.

  3. Wählen Sie auf der Seite Stack erstellen unter Voraussetzung — Vorlage vorbereiten die Option Vorhandene Vorlage auswählen aus.

  4. Wählen Sie unter Vorlage angeben die Option Vorlagendatei hochladen aus.

  5. Laden Sie die template.yaml Datei aus Ihrem lokalen GitHub Repository hoch und wählen Sie dann Weiter.

  6. Geben Sie auf der Seite „Stack-Details angeben“ den Stack-Namen ein (z. B.quicksight-embedding-stack).

  7. Behalten Sie auf der Seite „Stack-Optionen konfigurieren“ die Standardeinstellungen bei und aktivieren Sie das Kontrollkästchen, um die Erstellung von IAM-Ressourcen zu bestätigen. Wählen Sie Weiter aus.

  8. Wählen Sie auf der Seite Überprüfen und erstellen die Option Senden aus.

 Weitere Informationen finden Sie in der CloudFormation Dokumentation unter Stacks erstellen und verwalten.

AWS-Administrator

Überwachen Sie die Stack-Erstellung.

Überwachen Sie den Stack auf der Registerkarte Ereignisse, bis sein Status CREATE_COMPLETE lautet.

AWS-Administrator

Rufen Sie die Stack-Ausgaben ab.

  1. Wenn die Bereitstellung abgeschlossen ist, wählen Sie die Registerkarte Ausgaben aus.

  2. Notieren Sie sich die wichtigsten Ausgaben: ApiGatewayUrl UserPoolIdUserPoolClientId,CloudFrontDomainName,, undS3BucketName. Sie werden diese Informationen in den nachfolgenden Schritten verwenden.

AWS-Administrator
AufgabeDescriptionErforderliche Fähigkeiten

Rufen Sie die visuellen Kennungen von Quick Sight ab.

  1. Öffnen Sie das Quick Sight-Dashboard.

  2. Notieren Sie sich die Dashboard-ID, die Blatt-ID und die visuelle ID jedes Visuals, das Sie in Ihre Webanwendung einbetten möchten.

Quick Sight-Administrator

Konfigurieren Sie Ihre lokale React-Umgebung.

Um Ihre lokale React-Umgebung einzurichten und sie mit AWS Ressourcen zu verknüpfen, erstellen Sie eine .env Datei im my-app/ Ordner Ihres lokalen GitHub Repositorys. Füllen Sie die Datei mit:

  • Ihr AWS-Region

  • Poolinformationen von Amazon Cognito (aus CloudFormation Stack-Ausgaben)

  • API-Gateway-Endpunkt (aus CloudFormation Stack-Ausgaben)

  • Quick Sight visuell IDs (DashboardId,SheetId,VisualId)

Hier ist eine .env Beispieldatei:

VITE_AWS_REGION=us-east-1

# Cognito Configuration (from CloudFormation outputs)
VITE_USER_POOL_ID=us-east-1_xxxxxxxxx VITE_USER_POOL_WEB_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx

# API Configuration (from CloudFormation outputs)
VITE_API_URL=https:/your-api-id.execute-api.us-east-1.amazonaws.com/prod

# QuickSight Visual Configuration
VITE_DASHBOARD_ID=your-dashboard-id 
VITE_SHEET_ID=your-sheet-id 
VITE_VISUAL_ID=your-visual-id
App-Developer
AufgabeDescriptionErforderliche Fähigkeiten

Benutzer in Cognito erstellen oder verwalten

Um authentifizierten Benutzerzugriff auf eingebettete Quick Sight-Grafiken zu ermöglichen, erstellen Sie zunächst Benutzer in Amazon Cognito:

  1. Wählen Sie auf der Amazon Cognito Cognito-Konsole Benutzerpools und dann den passenden Pool UserPoolId (aus den CloudFormation Ausgaben) aus.

  2. Fügen Sie Benutzer zum Pool hinzu. Sie können aus zwei Optionen wählen:

AWS-Administrator

Bieten Sie Zugriff auf das Quick Sight Dashboard

Um Zugriff auf Quick Sight-Grafiken zu gewähren, gewähren Sie authentifizierten Benutzern Viewer-Zugriffsrechte:

  1. Wählen Sie in der Quick Sight-Konsole Dashboards aus.

  2. Wählen Sie das Dashboard aus, das Sie teilen möchten, indem Sie seinen Namen wählen.

  3. Wählen Sie in der oberen rechten Ecke der Dashboard-Seite die Option Teilen aus.

  4. Wählen Sie im Bereich „Teilen“ die Option „Mit bestimmten Benutzern teilen“ aus.

  5. Um neue Nutzer hinzuzufügen, wähle Nutzer einladen oder das Plussymbol (+) aus.

  6. Geben Sie im E-Mail-Feld die vollständige E-Mail-Adresse des Empfängers ein. (Diese E-Mail muss exakt mit dem Amazon Cognito Cognito-Login des Benutzers übereinstimmen)

  7. Wählen Sie im Menü „Berechtigungen“ neben dem E-Mail-Feld die Option Viewer aus.

  8. Um die Einladung zu versenden und Zugriff zu gewähren, wählen Sie „Teilen“.

Jeder Benutzer erhält eine E-Mail mit einem Link zum Dashboard. Sie können die Berechtigungen jederzeit über das Menü Teilen ändern.

Weitere Informationen finden Sie in der Amazon Quick Suite-Dokumentation unter Gewähren einzelner Amazon Quick Sight-Benutzer und -Gruppen Zugriff auf ein Dashboard in Amazon Quick Sight.

Quick Sight-Administrator
AufgabeDescriptionErforderliche Fähigkeiten

Installieren Sie Abhängigkeiten und erstellen Sie das Projekt.

Führen Sie im React-Anwendungsverzeichnis die folgenden Befehle aus, um optimierte Produktionsdateien zu generieren:

cd my-app
npm install
npm run build
App-Developer

Laden Sie die Build-Dateien auf Amazon S3 hoch.

Laden Sie alle Dateien aus dem my-app/dist/ Verzeichnis in den S3-Bucket hoch, der von bereitgestellt wird CloudFormation (laden Sie nicht den Ordner selbst hoch).

App-Developer

Erstellen Sie eine CloudFront Ungültigerklärung.

Erstellen Sie auf der CloudFront Konsole eine Invalidierung für den Pfad, um den zwischengespeicherten Inhalt /* nach der Bereitstellung zu aktualisieren. Anweisungen finden Sie in der Dokumentation unter Dateien für ungültig erklären. CloudFront

AWS-Administrator
AufgabeDescriptionErforderliche Fähigkeiten

Fügen Sie die CloudFront Domain zur Quick Sight-Zulassungsliste hinzu.

So ermöglichen Sie es Ihrer CloudFront Domain, Quick Sight-Grafiken sicher einzubetten:

  1. Wählen Sie in der Quick Sight-Konsole die Optionen Quick Sight, Domains und Embedding verwalten aus.

  2. Fügen Sie die CloudFront Domain dem Domain-Feld hinzu (z. B.https://d1234567890abc.cloudfront.net).

  3. Wählen Sie Domain hinzufügen.

Quick Sight-Administrator
AufgabeDescriptionErforderliche Fähigkeiten

Öffnen Sie die React-Anwendung.

Verwenden Sie die CloudFront Domain (aus den CloudFormation Ausgaben), um die bereitgestellte React-Webanwendung in einem Browser zu öffnen.

Besitzer der App

Verifizieren Sie die Authentifizierung.

Melden Sie sich mit Amazon Cognito Cognito-Anmeldeinformationen bei der Anwendung an, um den Authentifizierungsablauf und die JWT-Validierung über API Gateway zu überprüfen.

Besitzer der App

Überprüfen Sie die eingebetteten Grafiken.

Stellen Sie sicher, dass die Quick Sight-Grafiken auf der Grundlage benutzerspezifischer Zugriffsberechtigungen ordnungsgemäß in der Anwendung geladen werden.

Besitzer der App

Validieren Sie die API- und Lambda-Konnektivität.

Stellen Sie sicher, dass die Anwendung die /get-embed-url API erfolgreich aufrufen und eine gültige Quick Sight-Einbettung URLs ohne Fehler abrufen kann.

Besitzer der App
AufgabeDescriptionErforderliche Fähigkeiten

Überwachen Sie mithilfe von CloudWatch.

Sie können AWS Observability-Tools verwenden, um die Anwendung zu überwachen und eine sichere, skalierbare Leistung in der Produktion aufrechtzuerhalten.

Überprüfen Sie Lambda-Protokolle, API Gateway Gateway-Metriken und Amazon Cognito Cognito-Authentifizierungsereignisse CloudWatch , um den Zustand der Anwendung sicherzustellen und Anomalien zu erkennen.

AWS-Administrator

Nachverfolgen AWS WAF und CloudFront protokollieren.

Untersuchen Sie die AWS WAF Protokolle auf blockierte oder verdächtige Anfragen und die CloudFront Zugriffsprotokolle auf Leistungs- und Caching-Metriken.

AWS-Administrator

Fehlerbehebung

ProblemLösung

Fehler „Domain nicht erlaubt“

  1. Wählen Sie in der Quick Sight-Konsole Manage Quick Sight, Domains and Embedding aus.

  2. Fügen Sie Ihre CloudFront Domain hinzu (z. B.https://d1234567890abc.cloudfront.net).

  3. Speichern Sie die Konfiguration und laden Sie die Anwendung neu.

Authentifizierungsfehler

Mögliche Ursachen:

  • Falsche Amazon Cognito Cognito-Benutzerpool-ID oder Anwendungsclient-ID in der .env Datei.

  • Der Benutzer wurde im Amazon Cognito Cognito-Benutzerpool nicht bestätigt.

  • Ungültiges oder fehlendes JWT-Token in API-Anfragen.

Lösungen:

  • Überprüfen Sie die Amazon Cognito Cognito-Konfigurationswerte in der .env Datei.

  • Überprüfen Sie auf der Amazon Cognito Cognito-Konsole auf der Registerkarte Benutzer, ob der Benutzer aktiv ist.

  • Vergewissern Sie sich, dass der Authorization-Header ein gültiges JWT-Token enthält.

  • Aktivieren Sie in der API Gateway-Konsole die Option Authorizers, um sicherzustellen, dass API Gateway den Amazon Cognito Authorizer für die Authentifizierung verwendet.

API-Gateway-Fehler

Mögliche Ursachen:

  • Fehlender oder falsch konfigurierter Amazon Cognito Cognito-Autorisierer in API Gateway.

  • Unzureichende Lambda-Berechtigungen für den Aufruf der Quick Sight-API.

  • Die API-URL stimmt nicht zwischen den Ausgaben .env und CloudFormation den Ausgaben überein.

Lösungen:

  • Bestätigen Sie erneut, dass die API Gateway Gateway-Aufruf-URL in Ihrer .env Datei enthalten ist.

  • Klicken Sie in der API Gateway Gateway-Konsole auf Authorizers, um das Amazon Cognito-Setup zu überprüfen.

  • Hängen Sie die erforderliche IAM-Richtlinie quicksight:GenerateEmbedUrlForRegisteredUser an die Lambda-Ausführungsrolle an.

  • Überprüfen Sie die CloudWatch Protokolle auf detaillierte API- oder Berechtigungsfehler. Weitere Informationen finden Sie in der API Gateway Gateway-Dokumentation.

Die Grafiken von Quick Sight werden nicht geladen

Mögliche Ursachen:

  • Falsche Quick Sight-Dashboard-ID, Blatt-ID oder visuelle ID in der Umgebungskonfiguration.

  • Kein Quick Sight-Benutzerzugriff auf die Grafik oder das Dashboard.

  • Fehlende CORS-Konfiguration (Cross-Origin Resource Sharing) im API Gateway.

Lösungen:

  • Bestätigen Sie Quick Sight IDs im Dreipunktmenü in der oberen rechten Ecke des Dashboard-Visuals.

  • Vergewissern Sie sich, dass der Quick Sight-Benutzer die Viewer-Rolle für das geteilte Dashboard hat.

  • Aktivieren Sie CORS in API Gateway und stellen Sie die API erneut bereit. Weitere Informationen finden Sie in der API Gateway Gateway-Dokumentation.

  • Untersuchen Sie die Browserkonsole auf CORS auf Netzwerkfehler.

Fehler „Benutzer hat keinen Zugriff“

Mögliche Ursachen:

  • Die E-Mail-Adresse des Benutzers wurde nicht mit dem Quick Sight-Dashboard geteilt.

  • Falsche Benutzerrolle oder Berechtigung in Quick Sight.

Lösung:

  1. Öffnen Sie in der Quick Sight-Konsole Ihr Dashboard und wählen Sie dann Teilen, Dashboard teilen.

  2. Fügen Sie die E-Mail-Adresse des Benutzers hinzu (entspricht der Amazon Cognito Cognito-Anmelde-E-Mail).

  3. Weisen Sie die Viewer-Berechtigungsrolle zu.

  4. Bitten Sie den Benutzer, sich abzumelden und erneut anzumelden, um die Berechtigungen zu aktualisieren.

Zugehörige Ressourcen

AWS Dokumentation

Tutorials und Videos