Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.
Incorpora i componenti visivi di Amazon Quick Sight nelle applicazioni Web utilizzando Amazon Cognito e l'automazione IAc
Ishita Gupta e Srishti Wadhwa, Amazon Web Services
Riepilogo
Questo modello offre un approccio specializzato per incorporare i componenti visivi di Amazon Quick Sight nelle applicazioni React utilizzando l'incorporamento di utenti registrati con l'autenticazione semplificata di Amazon Cognito. Queste risorse vengono quindi distribuite tramite un modello di infrastruttura come codice (IaC). A differenza del tradizionale incorporamento di dashboard, questa soluzione isola tabelle e grafici specifici per l'integrazione diretta nelle applicazioni React, il che migliora notevolmente sia le prestazioni che l'esperienza utente.
L'architettura stabilisce un flusso di autenticazione efficiente tra la gestione degli utenti di Amazon Cognito e le autorizzazioni Quick Sight: gli utenti si autenticano tramite Amazon Cognito e accedono alle visualizzazioni autorizzate in base alle regole di condivisione del dashboard in Quick Sight. Questo approccio semplificato elimina la necessità di un accesso diretto alla console Quick Sight, pur mantenendo solidi controlli di sicurezza.
L'ambiente completo viene distribuito tramite un unico AWS CloudFormation modello che fornisce tutti i componenti dell'infrastruttura necessari, tra cui:
Un backend serverless che utilizza Amazon API AWS Lambda Gateway
Hosting frontend sicuro tramite Amazon CloudFront, Amazon Simple Storage Service (Amazon S3) e AWS WAF
Gestione delle identità tramite Amazon Cognito
Tutti i componenti sono configurati seguendo le migliori pratiche di sicurezza con politiche, protezione e crittografia dei privilegi minimi AWS Identity and Access Management (IAM). AWS WAF end-to-end
Questa soluzione è ideale per i team di sviluppo e le organizzazioni che desiderano integrare analisi sicure e interattive nelle proprie applicazioni, mantenendo al contempo un controllo granulare sull'accesso degli utenti. La soluzione utilizza servizi AWS gestiti e automazione per semplificare il processo di integrazione, migliorare la sicurezza e garantire la scalabilità per soddisfare le esigenze aziendali in evoluzione.
Destinatari e casi d'uso:
Sviluppatori di frontend che desiderano incorporare l'analisi nelle app React
Team di prodotto Software as a Service (SaaS) che desiderano offrire visualizzazioni dei dati per utente o basate sui ruoli
Architetti di soluzioni interessati a integrare l'analisi in portali personalizzati AWS
Sviluppatori di business intelligence (BI) che desiderano esporre le immagini agli utenti autenticati senza richiedere l'accesso completo alla dashboard
Team aziendali che desiderano incorporare grafici Quick Sight interattivi negli strumenti interni
Prerequisiti e limitazioni
Prerequisiti
Per implementare con successo questo modello, assicurati che siano presenti le seguenti condizioni:
Attivo Account AWS: Account AWS con autorizzazioni per distribuire CloudFormation stack e creare risorse Lambda, API Gateway, Amazon Cognito e Amazon S3 CloudFront.
Account Amazon Quick Sight: un account Quick Sight attivo con almeno una dashboard contenente immagini. Per istruzioni di configurazione, consulta Tutorial: Creazione di un pannello di controllo Amazon Quick Sight utilizzando dati di esempio nella documentazione di Amazon Quick Suite.
Un ambiente di sviluppo composto da:
Node.js (versione 16 o successiva)
npm o yarn installato
Vite come strumento di compilazione di React
React (versione 19.1.1)
Condivisione della dashboard: le dashboard devono essere condivise in Quick Sight e l'implementatore deve effettuare il login per accedere alle immagini o ai dashboard incorporati.
Limitazioni
Questo modello utilizza il metodo di incorporamento degli utenti registrati, che richiede agli implementatori di disporre di un account Quick Sight attivo.
L'accesso è limitato ai dashboard e agli elementi visivi che vengono condivisi esplicitamente con l'utente Quick Sight autenticato che implementa questo modello. Se l'implementatore non dispone dei diritti di accesso corretti, la generazione dell'URL di incorporamento avrà esito negativo e gli elementi visivi non verranno caricati.
Lo CloudFormation stack deve essere distribuito in un ambiente in Regione AWS cui siano supportati Quick Sight, API Gateway e Amazon Cognito. Per la disponibilità per regione, consulta Servizi AWS per regione.
Versioni del prodotto
Architecture
Architettura Target
Il diagramma seguente mostra l'architettura e il flusso di lavoro per questo modello.

In questo flusso di lavoro:
L'utente accede all'applicazione. L'utente apre l'applicazione web React utilizzando un browser. La richiesta viene indirizzata a una CloudFront distribuzione, che funge da rete di distribuzione dei contenuti per l'applicazione.
AWS WAF filtra le richieste dannose. Prima che la richiesta arrivi CloudFront, passa AWS WAF. AWS WAF ispeziona il traffico e blocca eventuali richieste dannose o sospette in base alle regole di sicurezza.
Amazon S3 serve file statici. Se la richiesta è pulita, CloudFront recupera le risorse statiche del frontend (HTML, JS, CSS) da un bucket S3 privato utilizzando Origin Access Control (OAC) e le invia al browser.
L'utente accede. Dopo il caricamento dell'applicazione, l'utente accede tramite Amazon Cognito, che autentica l'utente e restituisce un token web JSON (JWT) sicuro per l'accesso all'API autorizzato.
L'applicazione effettua una richiesta API. Dopo il login, l'applicazione React effettua una chiamata sicura all'
/get-embed-urlendpoint su API Gateway e passa il token JWT nell'intestazione della richiesta per l'autenticazione.Il token è convalidato. API Gateway convalida il token utilizzando un autorizzatore Amazon Cognito. Se il token è valido, la richiesta procede; in caso contrario, viene rifiutata con una risposta 401 (non autorizzata).
La richiesta viene indirizzata a Lambda per l'elaborazione. La richiesta convalidata viene quindi inoltrata a una funzione Lambda di backend. Questa funzione è responsabile della generazione dell'URL di incorporamento per l'immagine Quick Sight richiesta.
Lambda genera l'URL di incorporamento da Quick Sight. IAM utilizza un ruolo IAM con le autorizzazioni appropriate per chiamare l'
GenerateEmbedUrlForRegisteredUserAPI Quick Sight e generare un URL visivo sicuro e con ambito utente.Lambda restituisce l'URL di incorporamento ad API Gateway. Lambda invia l'URL di incorporamento generato ad API Gateway come parte di una risposta JSON. Questa risposta viene quindi preparata per essere inviata al frontend.
L'URL di incorporamento viene inviato al browser. L'URL di incorporamento viene restituito al browser come risposta API.
L'immagine viene mostrata all'utente. L'applicazione React riceve la risposta e utilizza l'SDK Quick Sight Embedding per rendere l'immagine specifica all'utente.
Automazione e scalabilità
Le implementazioni di backend e frontend sono completamente automatizzate utilizzando CloudFormation, che fornisce tutte le AWS risorse richieste, tra cui Amazon Cognito, Lambda, API Gateway, Amazon S3,, ruoli IAM e Amazon in un' AWS WAF unica implementazione. CloudFront CloudWatch
Questa automazione garantisce un'infrastruttura coerente e ripetibile in tutti gli ambienti. Tutti i componenti si scalano automaticamente: Lambda si adatta alle chiamate di funzione, CloudFront fornisce i contenuti memorizzati nella cache a livello globale e API Gateway si adatta alle richieste in arrivo.
Tools (Strumenti)
Servizi AWS
Amazon Quick Sight
è un servizio di business intelligence nativo per il cloud che ti aiuta a creare, gestire e incorporare dashboard e immagini interattive. I gestori di Amazon API Gateway
APIs fungono da ponte tra l'applicazione React e i servizi di backend. AWS Lambda
è un servizio di elaborazione serverless che questo modello utilizza per generare un incorporamento sicuro di Quick Sight in URLs modo dinamico e scalabile automaticamente in base alle richieste. Amazon Cognito
fornisce l'autenticazione e l'autorizzazione per gli utenti ed emette token sicuri per l'accesso alle API. Amazon S3
ospita risorse frontend statiche per questo modello e le fornisce in modo sicuro. CloudFront Amazon CloudFront
distribuisce contenuti frontend a livello globale con bassa latenza e si integra con AWS WAF il filtraggio del traffico. AWS WAF
protegge l'applicazione Web dal traffico dannoso applicando regole di sicurezza e limitando la velocità. AWS CloudFormationautomatizza il provisioning e la configurazione di tutte le risorse delle applicazioni in un'unica implementazione.
Amazon CloudWatch
raccoglie log e parametri da Lambda, API Gateway e per il monitoraggio AWS WAF e la risoluzione dei problemi.
Strumenti di sviluppo
React JS
è un framework di frontend che questo modello utilizza per creare l'applicazione web e integrare elementi visivi Quick Sight incorporati. Vite
è uno strumento di compilazione utilizzato per lo sviluppo rapido e le build di produzione ottimizzate dell'applicazione React. Quick Sight Embedding SDK
facilita l'incorporamento di elementi visivi Quick Sight nell'applicazione React e consente un'interazione perfetta tra l'applicazione e le immagini.
Archivio di codice
Il codice per questo pattern è disponibile nel repository GitHub Amazon Quick Sight Visual Embedding in React
Best practice
Questo modello implementa automaticamente le seguenti best practice di sicurezza:
Utilizza i pool di utenti di Amazon Cognito per l'autenticazione basata su JWT, con autenticazione a più fattori (MFA) opzionale.
Protegge APIs con gli autorizzatori di Amazon Cognito e applica le politiche IAM con privilegi minimi su tutti i servizi.
Implementa l'incorporamento degli utenti registrati Quick Sight e assegna automaticamente agli utenti il ruolo di lettore.
Applica la crittografia in transito che supporta TLS 1.2 e versioni successive tramite HTTPS. CloudFront
Crittografa i dati inattivi utilizzando AES-256 per Amazon S3 con controllo delle versioni e OAC.
Configura i piani di utilizzo di API Gateway con throttling e quote.
Protegge Lambda con concorrenza riservata e protezione delle variabili d'ambiente.
Abilita la registrazione per Amazon S3 CloudFront, Lambda e API Gateway; monitora i servizi utilizzando. CloudWatch
Crittografa i log, applica i controlli di accesso e applica politiche di negazione per i caricamenti non HTTPS o non crittografati.
Inoltre, consigliamo quanto segue:
Utilizzalo CloudFormation per automatizzare le implementazioni e mantenere configurazioni coerenti tra gli ambienti.
Assicurati che ogni utente disponga delle autorizzazioni Quick Sight corrette per accedere alle immagini incorporate.
Proteggi gli endpoint API Gateway con gli autorizzatori di Amazon Cognito e applica il principio del privilegio minimo per tutti i ruoli IAM.
Archivia informazioni sensibili come Amazon Resource Names (ARNs) e IDs in variabili di ambiente anziché codificarle.
Ottimizza le funzioni Lambda riducendo le dipendenze e migliorando le prestazioni di avviamento a freddo. Per ulteriori informazioni, consulta il post AWS sul blog Ottimizzazione delle prestazioni di avviamento a freddo dell' AWS Lambda utilizzo di strategie di innesco avanzate con
. SnapStart Aggiungi il tuo CloudFront dominio all'elenco delle autorizzazioni di Quick Sight per abilitare l'incorporamento visivo sicuro.
Monitora le prestazioni e la sicurezza utilizzando CloudWatch e AWS WAF per la registrazione, gli avvisi e la protezione del traffico.
Altre best practice consigliate
Utilizza domini personalizzati con certificati SSL AWS Certificate Manager per fornire un'esperienza utente sicura e personalizzata.
Crittografa i dati CloudWatch e i log di Amazon S3 utilizzando chiavi AWS Key Management Service gestite dal cliente AWS KMS() per un maggiore controllo sulla crittografia.
Estendi AWS WAF le regole con geo-blocking, SQL injection (SQLi), protezione Cross-Site Scripting (XSS) e filtri personalizzati per una maggiore prevenzione delle minacce.
Attivate gli CloudWatch allarmi e garantite il monitoraggio AWS Config, il controllo e AWS CloudTrail la conformità della configurazione in tempo reale.
Applica politiche IAM granulari, applica la rotazione delle chiavi API e consenti l'accesso tra account solo quando assolutamente necessario.
Esegui valutazioni di sicurezza regolari per garantire l'allineamento con i framework di conformità come System and Organization Controls 2 (SOC 2), il Regolamento generale sulla protezione dei dati (GDPR) e l'Health Insurance Portability and Accountability Act (HIPAA).
Epiche
| Operazione | Description | Competenze richieste |
|---|---|---|
Clonare il repository. | Clona il GitHub repository di questa soluzione sul tuo sistema locale e vai alla directory del progetto:
Questo repository contiene il CloudFormation modello e il codice sorgente React necessari per distribuire la soluzione. | Sviluppatore di app |
| Operazione | Description | Competenze richieste |
|---|---|---|
Implementa il modello. |
Per ulteriori informazioni, consulta Creazione e gestione degli stack nella CloudFormation documentazione. | Amministratore AWS |
Monitora la creazione di stack. | Monitora lo stack nella scheda Eventi fino a quando il suo stato non è CREATE_COMPLETE. | Amministratore AWS |
Recupera gli output dello stack. |
| Amministratore AWS |
| Operazione | Description | Competenze richieste |
|---|---|---|
Recupera gli identificatori visivi Quick Sight. |
| Amministratore Quick Sight |
Configura il tuo ambiente React locale. | Per configurare il tuo ambiente React locale e collegarlo alle AWS risorse, crea un
Ecco un
| Sviluppatore di app |
| Operazione | Description | Competenze richieste |
|---|---|---|
Creare o gestire utenti in Cognito | Per consentire l'accesso degli utenti autenticati agli elementi visivi Quick Sight incorporati, devi prima creare utenti in Amazon Cognito:
| Amministratore AWS |
Fornisci l'accesso Quick Sight alla dashboard | Per consentire l'accesso agli elementi visivi di Quick Sight, concedi l'autorizzazione Viewer agli utenti autenticati:
Ogni utente riceverà un'email con un link alla dashboard. Puoi modificare le autorizzazioni in qualsiasi momento tramite il menu Condividi. Per ulteriori informazioni, consulta Concessione dell'accesso a singoli utenti e gruppi Amazon Quick Sight a una dashboard in Amazon Quick Sight nella documentazione di Amazon Quick Suite. | Amministratore Quick Sight |
| Operazione | Description | Competenze richieste |
|---|---|---|
Installa le dipendenze e crea il progetto. | Nella directory dell'applicazione React, esegui i seguenti comandi per generare file di produzione ottimizzati:
| Sviluppatore di app |
Carica i file di build su Amazon S3. | Carica tutti i file dalla | Sviluppatore di app |
Crea un'invalidazione. CloudFront | Sulla CloudFront console | Amministratore AWS |
| Operazione | Description | Competenze richieste |
|---|---|---|
Aggiungi il CloudFront dominio all'elenco delle autorizzazioni di Quick Sight. | Per consentire al tuo CloudFront dominio di incorporare in modo sicuro gli elementi visivi Quick Sight:
| Amministratore Quick Sight |
| Operazione | Description | Competenze richieste |
|---|---|---|
Apri l'applicazione React. | Usa il CloudFront dominio (dagli CloudFormation output) per aprire l'applicazione web React distribuita in un browser. | Proprietario dell'app |
Verifica l'autenticazione. | Accedi all'applicazione utilizzando le credenziali di Amazon Cognito per verificare il flusso di autenticazione e la convalida JWT tramite API Gateway. | Proprietario dell'app |
Verifica gli elementi visivi incorporati. | Verifica che le immagini Quick Sight vengano caricate correttamente all'interno dell'applicazione in base alle autorizzazioni di accesso specifiche dell'utente. | Proprietario dell'app |
Convalida la connettività API e Lambda. | Verifica che l'applicazione sia in grado di chiamare correttamente l' | Proprietario dell'app |
| Operazione | Description | Competenze richieste |
|---|---|---|
Monitora utilizzando CloudWatch. | È possibile utilizzare strumenti AWS di osservabilità per monitorare l'applicazione e mantenere prestazioni sicure e scalabili in produzione. Controlla i log Lambda, le metriche di API Gateway e gli eventi di autenticazione di Amazon Cognito CloudWatch per garantire lo stato delle applicazioni e rilevare anomalie. | Amministratore AWS |
Monitora AWS WAF e CloudFront registra. | Controlla AWS WAF i log per verificare la presenza di richieste bloccate o sospette e i log di CloudFront accesso per verificare le prestazioni e le metriche di memorizzazione nella cache. | Amministratore AWS |
risoluzione dei problemi
| Problema | Soluzione |
|---|---|
Errore «Dominio non consentito» |
|
Errori di autenticazione | Possibili cause:
Soluzioni:
|
Errori dell'API Gateway | Possibili cause:
Soluzioni:
|
Le immagini di Quick Sight non si caricano | Possibili cause:
Soluzioni:
|
Errore «L'utente non ha accesso» | Possibili cause:
Soluzione::
|
Risorse correlate
AWS documentazione
Tutorial e video