Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra. # Intégrez des composants visuels Amazon Quick Sight dans des applications Web à l'aide d'Amazon Cognito et de l'automatisation iAc *Ishita Gupta, Saurabh Singh et Srishti Wadhwa, Amazon Web Services* ## Résumé Ce modèle propose une approche spécialisée pour intégrer les composants visuels Amazon Quick Sight dans les applications React en utilisant l'intégration des utilisateurs enregistrés avec une authentification Amazon Cognito rationalisée. Ces ressources sont ensuite déployées via un modèle d'infrastructure en tant que code (IaC). Contrairement à l'intégration traditionnelle de tableaux de bord, cette solution isole des tableaux et des graphiques spécifiques pour une intégration directe dans les applications React, ce qui améliore considérablement les performances et l'expérience utilisateur. L'architecture établit un flux d'authentification efficace entre la gestion des utilisateurs d'Amazon Cognito et les autorisations de Quick Sight : les utilisateurs s'authentifient via Amazon Cognito et accèdent à leurs visualisations autorisées conformément aux règles de partage du tableau de bord de Quick Sight. Cette approche rationalisée élimine le besoin d'un accès direct à la console Quick Sight tout en maintenant des contrôles de sécurité robustes. L'environnement complet est déployé via un AWS CloudFormation modèle unique qui fournit tous les composants d'infrastructure nécessaires, notamment : + Un backend sans serveur qui utilise Amazon AWS Lambda API Gateway + Hébergement frontal sécurisé via Amazon CloudFront, Amazon Simple Storage Service (Amazon S3), et AWS WAF + Gestion des identités à l'aide d'Amazon Cognito Tous les composants sont configurés conformément aux meilleures pratiques de sécurité en matière de politiques de moindre privilège Gestion des identités et des accès AWS (IAM), de AWS WAF protection et de chiffrement. end-to-end Cette solution est idéale pour les équipes de développement et les organisations qui souhaitent intégrer des analyses sécurisées et interactives dans leurs applications tout en maintenant un contrôle précis de l'accès des utilisateurs. La solution utilise des services AWS gérés et l'automatisation pour simplifier le processus d'intégration, améliorer la sécurité et garantir l'évolutivité afin de répondre aux besoins évolutifs de l'entreprise. Public cible et cas d'utilisation : + **Développeurs frontaux** qui souhaitent intégrer des analyses dans les applications React + Les **équipes de production de logiciels en tant que service (SaaS)** qui souhaitent proposer des visualisations de données par utilisateur ou basées sur les rôles + **Architectes de solutions** intéressés par l'intégration de l' AWS analytique dans des portails personnalisés + **Développeurs de business intelligence (BI)** qui souhaitent exposer des visuels à des utilisateurs authentifiés sans avoir besoin d'un accès complet au tableau de bord + **Les équipes d'entreprise** qui souhaitent intégrer des graphiques Quick Sight interactifs dans les outils internes ## Conditions préalables et limitations **Conditions préalables** Pour implémenter ce modèle avec succès, assurez-vous que les éléments suivants sont en place : + **Active Compte AWS** : Compte AWS avec les autorisations nécessaires pour déployer des CloudFormation piles et créer des ressources Lambda, API Gateway, Amazon Cognito CloudFront et Amazon S3. + Compte **Amazon Quick Sight : compte** Quick Sight actif avec au moins un tableau de bord contenant des visuels. Pour les instructions de configuration, consultez [Tutoriel : Création d'un tableau de bord Amazon Quick Sight à l'aide d'exemples de données](https://docs.aws.amazon.com/quicksuite/latest/userguide/example-analysis.html) figurant dans la documentation Amazon Quick. + **Un environnement de développement** composé des éléments suivants : + Node.js (version 16 ou ultérieure) + npm ou fil installé + Vite en tant qu'outil de construction de React + React (version 19.1.1) + **Partage de** tableaux de bord — Les tableaux de bord doivent être partagés dans Quick Sight et l'implémenteur doit se connecter pour accéder aux visuels ou aux tableaux de bord intégrés. **Limites** + Ce modèle utilise la méthode d'intégration des utilisateurs enregistrés, qui nécessite que les implémenteurs disposent d'un compte Quick Sight actif. + L'accès est limité aux tableaux de bord et aux visuels qui sont explicitement partagés avec l'utilisateur authentifié de Quick Sight qui implémente ce modèle. Si l'implémenteur ne dispose pas des droits d'accès appropriés, la génération de l'URL d'intégration échouera et les visuels ne se chargeront pas. + La CloudFormation pile doit être déployée dans un environnement Région AWS où Quick Sight, API Gateway et Amazon Cognito sont pris en charge. Pour connaître la disponibilité par région, voir [Services AWS par région](https://aws.amazon.com/about-aws/global-infrastructure/regional-product-services/). **Versions du produit** + SDK d'[intégration Quick Sight](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk) version 2.10.1 + Version 19.1.1 de [React](https://www.npmjs.com/package/react) + [Node.js](https://nodejs.org/en/download) version 16 ou ultérieure pour garantir la compatibilité avec les dernières versions de React et Vite utilisées dans cette solution ## Architecture **Architecture cible** Le schéma suivant montre l'architecture et le flux de travail de ce modèle. ![Architecture et flux de travail pour intégrer des visuels Quick Sight dans une application React.](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/images/pattern-img/75ad12b1-caaa-4532-b709-8f3eaf3f9cc0/images/d0905f61-9055-49cf-887d-f46f5ca6c871.png) Dans ce flux de travail : 1. **L'utilisateur accède à l'application**. L'utilisateur ouvre l'application Web React à l'aide d'un navigateur. La demande est acheminée vers une CloudFront distribution qui agit comme un réseau de diffusion de contenu pour l'application. 1. **AWS WAF filtre les requêtes malveillantes**. ****Avant que la demande n'arrive CloudFront, elle est transmise AWS WAF. AWS WAF inspecte le trafic et bloque toute demande malveillante ou suspecte conformément aux règles de sécurité. 1. **Amazon S3 fournit des fichiers statiques**. Si la demande est propre, CloudFront extrait les ressources statiques du frontend (HTML, JS, CSS) d'un compartiment S3 privé à l'aide du contrôle d'accès à l'origine (OAC) et les transmet au navigateur. 1. **L'utilisateur se connecte**. Une fois l'application chargée, l'utilisateur se connecte via Amazon Cognito, qui authentifie l'utilisateur et renvoie un jeton Web JSON sécurisé (JWT) pour un accès autorisé à l'API. 1. **L'application envoie une demande d'API**. Après la connexion, l'application React effectue un appel sécurisé vers le `/get-embed-url` point de terminaison sur API Gateway et transmet le jeton JWT dans l'en-tête de la demande pour authentification. 1. **Le jeton est validé**. API Gateway valide le jeton à l'aide d'un autorisateur Amazon Cognito. Si le jeton est valide, la demande est traitée ; dans le cas contraire, elle est refusée avec une réponse 401 (non autorisée). 1. **La demande est dirigée vers Lambda pour traitement**. La demande validée est ensuite transmise à une fonction Lambda principale. Cette fonction est chargée de générer l'URL d'intégration pour le visuel Quick Sight demandé. 1. **Lambda génère l'URL d'intégration à partir de Quick** Sight. IAM utilise un rôle IAM doté des autorisations appropriées pour appeler l'`GenerateEmbedUrlForRegisteredUser`API Quick Sight afin de générer une URL visuelle sécurisée et adaptée à l'utilisateur. 1. **Lambda renvoie l'URL d'intégration à API Gateway**. Lambda renvoie l'URL d'intégration générée à API Gateway dans le cadre d'une réponse JSON. Cette réponse est ensuite préparée pour être envoyée au frontend. 1. **L'URL d'intégration est envoyée au navigateur.** L'URL d'intégration est renvoyée au navigateur en tant que réponse de l'API. 1. **Le visuel est présenté à l'utilisateur**. ****L'application React reçoit la réponse et utilise le SDK d'intégration Quick Sight pour rendre le visuel spécifique à l'utilisateur. **Automatisation et mise à l'échelle** Les déploiements du backend et du frontend sont entièrement automatisés à l'aide CloudFormation de ce qui fournit toutes les AWS ressources requises, notamment Amazon Cognito, Lambda, API Gateway, Amazon S3,,,, les rôles IAM et Amazon en un seul déploiement. CloudFront AWS WAF CloudWatch Cette automatisation garantit une infrastructure cohérente et reproductible dans tous les environnements. Tous les composants évoluent automatiquement : Lambda s'adapte aux appels de fonctions, CloudFront diffuse le contenu mis en cache dans le monde entier et API Gateway s'adapte aux demandes entrantes. ## Outils **Services AWS** + [Amazon Quick Sight](https://aws.amazon.com/quicksuite/quicksight/) est un service de business intelligence natif dans le cloud qui vous aide à créer, gérer et intégrer des tableaux de bord et des visuels interactifs. + [Amazon API Gateway](https://aws.amazon.com/api-gateway/) gère APIs cela en tant que pont entre l'application React et les services principaux. + [AWS Lambda](https://aws.amazon.com/lambda/)est un service de calcul sans serveur que ce modèle utilise pour générer une intégration Quick Sight sécurisée de URLs manière dynamique, et qui évolue automatiquement en fonction des demandes. + [Amazon Cognito](https://aws.amazon.com/cognito/) fournit une authentification et une autorisation aux utilisateurs, et émet des jetons sécurisés pour l'accès aux API. + [Amazon S3](https://aws.amazon.com/s3/) héberge des ressources frontales statiques pour ce modèle et les diffuse en toute sécurité via CloudFront ce modèle. + [Amazon CloudFront ](https://aws.amazon.com/cloudfront/getting-started/) diffuse du contenu frontal dans le monde entier avec une faible latence et s'intègre au AWS WAF filtrage du trafic. + [AWS WAF](https://aws.amazon.com/waf/)protège l'application Web contre le trafic malveillant en appliquant des règles de sécurité et en limitant le débit. + [AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)automatise le provisionnement et la configuration de toutes les ressources de l'application en un seul déploiement. + [Amazon CloudWatch](https://aws.amazon.com/cloudwatch/) collecte des journaux et des métriques auprès de Lambda, d'API Gateway et à des AWS WAF fins de surveillance et de résolution des problèmes. **Outils de développement** + [React JS](https://react.dev/) est un framework frontal que ce modèle utilise pour créer l'application Web et intégrer les visuels Quick Sight intégrés. + [Vite](https://vite.dev/) est un outil de construction utilisé pour le développement rapide et l'optimisation des versions de production de l'application React. + Le [SDK d'intégration Quick Sight](https://www.npmjs.com/package/amazon-quicksight-embedding-sdk/v/2.10.1) facilite l'intégration des visuels Quick Sight dans l'application React et permet une interaction fluide entre l'application et les visuels. **Référentiel de code** Le code de ce modèle est disponible dans le référentiel GitHub [Amazon Quick Sight Visual Embedding in React](https://github.com/aws-samples/sample-quicksight-visual-embedding). ## Bonnes pratiques Ce modèle met automatiquement en œuvre les meilleures pratiques de sécurité suivantes : + Utilise les groupes d'utilisateurs Amazon Cognito pour l'authentification basée sur JWT, avec authentification multifactorielle (MFA) en option. + Sécurise APIs avec les autorisateurs Amazon Cognito et applique les politiques IAM du moindre privilège dans tous les services. + Implémente l'intégration des utilisateurs enregistrés dans Quick Sight et attribue automatiquement le rôle de lecteur aux utilisateurs. + Applique un chiffrement en transit compatible avec le protocole TLS 1.2 et les versions CloudFront ultérieures, ainsi que le protocole HTTPS. + Chiffre les données au repos en utilisant AES-256 pour Amazon S3 avec gestion des versions et OAC. + Configure les plans d'utilisation d'API Gateway avec régulation et quotas. + Sécurise Lambda grâce à la simultanéité réservée et à la protection des variables d'environnement. + Active la journalisation pour Amazon S3 CloudFront, Lambda et API Gateway ; surveille les services en utilisant. CloudWatch + Chiffre les journaux, applique des contrôles d'accès et applique des politiques de refus pour les téléchargements non HTTPS ou non chiffrés. En outre, nous recommandons ce qui suit : + Utilisez-le CloudFormation pour automatiser les déploiements et maintenir des configurations cohérentes dans tous les environnements. + Assurez-vous que chaque utilisateur dispose des autorisations Quick Sight appropriées pour accéder aux visuels intégrés. + Protégez les points de terminaison d'API Gateway avec les autorisateurs Amazon Cognito et appliquez le principe du moindre privilège pour tous les rôles IAM. + Stockez des informations sensibles telles que Amazon Resource Names (ARNs) et IDs dans des variables d'environnement au lieu de les coder en dur. + Optimisez les fonctions Lambda en réduisant les dépendances et en améliorant les performances de démarrage à froid. Pour plus d'informations, consultez le billet de AWS blog [Optimisation des performances de démarrage à froid AWS Lambda en utilisant des stratégies d'amorçage avancées avec SnapStart](https://aws.amazon.com/blogs/compute/optimizing-cold-start-performance-of-aws-lambda-using-advanced-priming-strategies-with-snapstart/). + Ajoutez votre CloudFront domaine à la liste d'autorisation de Quick Sight pour permettre une intégration visuelle sécurisée. + Surveillez les performances et la sécurité en utilisant CloudWatch et AWS WAF pour la journalisation, les alertes et la protection du trafic. **Autres bonnes pratiques recommandées** + Utilisez des domaines personnalisés dotés de certificats SSL AWS Certificate Manager pour offrir une expérience utilisateur sécurisée et personnalisée. + Chiffrez les données et les CloudWatch journaux Amazon S3 à l'aide de clés gérées par le client AWS Key Management Service (AWS KMS) pour un meilleur contrôle du chiffrement. + AWS WAF Élargissez les règles grâce au blocage géographique, à l'injection SQL (SQLi), à la protection par script intersite (XSS) et à des filtres personnalisés pour une meilleure prévention des menaces. + Activez CloudWatch les alarmes et AWS Config bénéficiez d' AWS CloudTrail une surveillance, d'un audit et d'une conformité de configuration en temps réel. + Appliquez des politiques IAM granulaires, appliquez la rotation des clés d'API et autorisez l'accès entre comptes uniquement lorsque cela est absolument nécessaire. + Réalisez des évaluations de sécurité régulières pour garantir l'alignement avec les cadres de conformité tels que System and Organization Controls 2 (SOC 2), le règlement général sur la protection des données (RGPD) et la loi HIPAA (Health Insurance Portability and Accountability Act). ## Épopées ### Préparez l'environnement | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Pour cloner le référentiel. | Clonez le GitHub référentiel de cette solution sur votre système local et accédez au répertoire du projet :
git clone https://github.com/aws-samples/sample-quicksight-visual-embedding.git

cd sample-quicksight-visual-embedding

Ce référentiel contient le CloudFormation modèle et le code source React nécessaires au déploiement de la solution. | Développeur d’applications | ### Déployez la CloudFormation pile | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Déployez le modèle. | 1. Connectez-vous à la [AWS CloudFormation console Console de gestion AWS et ouvrez-la](https://console.aws.amazon.com/cloudformation/).
2. Sur la page **Stacks**, choisissez **Create stack** en haut à droite, puis choisissez **Avec de nouvelles ressources (standard)**.
3. Sur la page **Créer une pile**, pour **Prérequis — Préparer le modèle**, **choisissez Choisir un modèle existant**.
4. Dans **Spécifier le modèle**, sélectionnez **Charger un modèle de fichier**.
5. Téléchargez le `template.yaml` fichier depuis votre GitHub dépôt local, puis choisissez **Next**.
6. Sur la page **Spécifier les détails de la pile**, entrez le nom de la pile (par exemple,`quicksight-embedding-stack`).
7. Sur la page **Configurer les options de pile**, conservez les paramètres par défaut et cochez la case pour confirmer la création des ressources IAM. Choisissez **Suivant**.
8. Sur la page **Réviser et créer**, choisissez **Soumettre**. Pour plus d'informations, consultez [la section Création et gestion des piles](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/stacks.html) dans la CloudFormation documentation. | Administrateur AWS | | Surveillez la création de piles. | Surveillez la pile dans l'onglet **Events** jusqu'à ce que son statut soit **CREATE\_COMPLETE**. | Administrateur AWS | | Récupérez les sorties de la pile. | 1. Lorsque le déploiement est terminé, choisissez l'onglet **Sorties**.
2. Notez les principaux résultats : `ApiGatewayUrl``UserPoolId`,`UserPoolClientId`,`CloudFrontDomainName`, et`S3BucketName`. Vous utiliserez ces informations dans les étapes suivantes. | Administrateur AWS | ### Configuration de l'environnement frontal | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Récupérez les identifiants visuels de Quick Sight. | 1. Ouvrez le tableau de [bord Quick Sight](https://quicksight.aws.amazon.com/).
2. Notez l'ID du tableau de bord, l'ID de feuille et l'ID visuel de chaque visuel que vous prévoyez d'intégrer dans votre application Web. | Administrateur Quick Sight | | Configurez votre environnement React local. | Pour configurer votre environnement React local et le lier aux AWS ressources, créez un `.env` fichier dans le `my-app/` dossier de votre GitHub dépôt local. Remplissez le fichier avec :+ Votre Région AWS
+ Informations sur le pool Amazon Cognito (issues des sorties de la CloudFormation pile)
+ Point de terminaison API Gateway (à partir des sorties de la CloudFormation pile)
+ Visuel Quick Sight IDs (`DashboardId`,`SheetId`,`VisualId`)
Voici un exemple de `.env` fichier :
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
| Développeur d’applications | ### Configurer l'authentification des utilisateurs | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Création ou gestion d'utilisateurs dans Cognito | Pour permettre aux utilisateurs authentifiés d'accéder aux visuels Quick Sight intégrés, vous devez d'abord créer des utilisateurs dans Amazon Cognito :1. Sur la [console Amazon Cognito](https://console.aws.amazon.com/cognito/home), choisissez Groupes **d'utilisateurs**, puis choisissez le pool correspondant `UserPoolId` (à partir des CloudFormation sorties).
2. Ajoutez des utilisateurs au pool. Vous avez le choix entre deux options :[Dans Amazon Cognito, créez des utilisateurs manuellement avec des adresses e-mail et des mots de passe temporaires (pour plus d'informations, consultez la documentation Amazon Cognito)](https://docs.aws.amazon.com/cognito/latest/developerguide/how-to-create-user-accounts.html#creating-a-new-user-using-the-console)
—ou—Activez l'auto-inscription dans l'interface utilisateur `hideSignUp={false}` en configurant le `my-app/src/auth/AuthWrapper.jsx` fichier. | Administrateur AWS | | Fournir un accès au tableau de bord Quick Sight | Pour donner accès aux visuels de Quick Sight, accordez l'autorisation d'accès Viewer aux utilisateurs authentifiés :1. Sur la [console Quick Sight](https://quicksight.aws.amazon.com/), sélectionnez **Tableaux de bord**.
2. Sélectionnez le tableau de bord que vous souhaitez partager en choisissant son nom.
3. **Dans le coin supérieur droit de la page du tableau de bord, choisissez Partager.**
4. Dans le panneau de partage, choisissez **Partager avec des utilisateurs spécifiques**.
5. Pour ajouter de nouveaux utilisateurs, choisissez **Inviter des utilisateurs** ou l'icône plus (\+).
6. Dans le champ e-mail, entrez l'adresse e-mail complète du destinataire. (Cet e-mail doit correspondre exactement à l'identifiant Amazon Cognito de l'utilisateur)
7. Dans le menu **Autorisation** situé à côté du champ e-mail, choisissez **Viewer**.
8. Pour envoyer l'invitation et autoriser l'accès, choisissez **Partager**.
Chaque utilisateur recevra un e-mail contenant un lien vers le tableau de bord. Vous pouvez modifier les autorisations à tout moment via le menu **Partager**.
Pour plus d'informations, consultez la section [Accorder à des utilisateurs individuels et à des groupes d'Amazon Quick Sight l'accès à un tableau de bord dans Amazon Quick Sight](https://docs.aws.amazon.com/quicksuite/latest/userguide/share-a-dashboard-grant-access-users.html) dans la documentation Amazon Quick. | Administrateur Quick Sight | ### Créez et déployez le frontend React | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Installez les dépendances et créez le projet. | Dans le répertoire de l'application React, exécutez les commandes suivantes pour générer des fichiers de production optimisés :
cd my-app
npm install
npm run build
| Développeur d’applications | | Téléchargez les fichiers de compilation sur Amazon S3. | Téléchargez tous les fichiers du `my-app/dist/` répertoire vers le compartiment S3 approvisionné par CloudFormation (ne téléchargez pas le dossier lui-même). | Développeur d’applications | | Créez une CloudFront invalidation. | Sur la [CloudFront console](https://console.aws.amazon.com/cloudfront/v4/home), créez une invalidation pour le chemin `/*` afin d'actualiser le contenu mis en cache après le déploiement. Pour obtenir des instructions, consultez la section [Invalidation de fichiers](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation_Requests.html) dans la CloudFront documentation. | Administrateur AWS | ### Configuration de la liste d'autorisation de Quick Sight | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Ajoutez le CloudFront domaine à la liste d'autorisation de Quick Sight. | Pour permettre à votre CloudFront domaine d'intégrer en toute sécurité des visuels Quick Sight :1. Sur la [console Quick Sight](https://quicksight.aws.amazon.com/), choisissez **Gérer Quick Sight**, **Domains et Embedding.**
2. Ajoutez le CloudFront domaine dans la zone **Domaine** (par exemple,`https://d1234567890abc.cloudfront.net`).
3. Choisissez **Ajouter un domaine**. | Administrateur Quick Sight | ### Accédez à l'application et vérifiez ses fonctionnalités | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Ouvrez l'application React. | Utilisez le **CloudFront domaine** (à partir des CloudFormation sorties) pour ouvrir l'application Web React déployée dans un navigateur. | Propriétaire de l'application | | Vérifiez l'authentification. | Connectez-vous à l'application en utilisant les informations d'identification Amazon Cognito pour vérifier le flux d'authentification et la validation JWT via API Gateway. | Propriétaire de l'application | | Vérifiez les éléments visuels intégrés. | Vérifiez que les visuels de Quick Sight se chargent correctement dans l'application en fonction des autorisations d'accès spécifiques à l'utilisateur. | Propriétaire de l'application | | Validez l'API et la connectivité Lambda. | Vérifiez que l'application peut appeler correctement l'`/get-embed-url`API et récupérer une intégration Quick Sight valide URLs sans erreur. | Propriétaire de l'application | ### Surveillance et maintenance de l'application | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Surveillez en utilisant CloudWatch. | Vous pouvez utiliser des outils AWS d'observabilité pour surveiller l'application et maintenir des performances sécurisées et évolutives en production.
Consultez les journaux Lambda, les métriques d'API Gateway et les événements d'authentification Amazon Cognito afin de garantir l' CloudWatch intégrité des applications et de détecter les anomalies. | Administrateur AWS | | Suivi AWS WAF et CloudFront journaux. | Inspectez les AWS WAF journaux pour détecter les demandes bloquées ou suspectes et les journaux CloudFront d'accès pour connaître les indicateurs de performance et de mise en cache. | Administrateur AWS | ## Résolution des problèmes | Problème | Solution | | --- | --- | | Erreur « Domaine non autorisé » | 1. Sur la [console Quick Sight](https://quicksight.aws.amazon.com/), choisissez **Gérer Quick Sight, Domains et Embedding.**
2. Ajoutez votre CloudFront domaine (par exemple,`https://d1234567890abc.cloudfront.net`).
3. Enregistrez la configuration et rechargez l'application. | | Erreurs d’authentification | Causes possibles :+ L'ID du groupe d'utilisateurs Amazon Cognito ou l'ID du client de l'application sont incorrects dans le `.env` fichier.
+ L'utilisateur n'a pas été confirmé dans le groupe d'utilisateurs Amazon Cognito.
+ Jeton JWT non valide ou manquant dans les demandes d'API.
Solutions :+ Vérifiez les valeurs de configuration d'Amazon Cognito dans le `.env` fichier.
+ Sur la [console Amazon Cognito](https://console.aws.amazon.com/cognito/home), consultez l'onglet **Utilisateurs** pour vérifier que l'utilisateur est actif.
+ Vérifiez que l'en-tête **d'autorisation** contient un jeton JWT valide.
+ Sur la [console API Gateway](https://console.aws.amazon.com/apigateway), cochez **Authorizers** pour vérifier qu'API Gateway utilise l'autorisateur Amazon Cognito pour l'authentification. | | Erreurs d'API Gateway | Causes possibles :+ Autorisateur Amazon Cognito manquant ou mal configuré dans API Gateway.
+ Permissions Lambda insuffisantes pour appeler l'API Quick Sight.
+ Incompatibilité de l'URL de l'API entre `.env` et les CloudFormation sorties.
Solutions :+ Confirmez à nouveau que l'URL d'appel d'API Gateway se trouve dans votre `.env` fichier.
+ Sur la [console API Gateway, sélectionnez](https://console.aws.amazon.com/apigateway) **Authorizers** pour vérifier la configuration d'Amazon Cognito.
+ Associez la politique IAM requise `quicksight:GenerateEmbedUrlForRegisteredUser` au rôle d'exécution Lambda.
+ Consultez CloudWatch les journaux pour détecter les erreurs d'API ou d'autorisation détaillées. Pour plus d'informations, consultez la [documentation d'API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/view-cloudwatch-log-events-in-cloudwatch-console.html). | | Les visuels de Quick Sight ne se chargent pas | Causes possibles :+ ID de tableau de bord Quick Sight, ID de feuille ou ID visuel incorrect dans la configuration de l'environnement.
+ Aucun accès utilisateur de Quick Sight au visuel ou au tableau de bord.
+ Configuration de partage de ressources entre origines (CORS) manquante dans API Gateway.
Solutions :+ Confirmez le Quick Sight dans le IDs menu à trois points situé dans le coin supérieur droit du visuel du tableau de bord.
+ Vérifiez que l'utilisateur de Quick Sight possède le rôle Viewer pour le tableau de bord partagé.
+ Activez CORS dans API Gateway et redéployez l'API. Pour plus d'informations, consultez la [documentation d'API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.html).
+ Vérifiez si la console du navigateur CORS contient des erreurs liées au réseau. | | Erreur « L'utilisateur n'a pas accès » | Causes possibles :+ L'e-mail de l'utilisateur n'a pas été partagé avec le tableau de bord Quick Sight.
+ Rôle ou autorisation d'utilisateur incorrect dans Quick Sight.
Solution :1. Sur la [console Quick Sight](https://quicksight.aws.amazon.com/), ouvrez votre tableau de bord, puis choisissez **Partager, Partager le tableau de bord**.
2. Ajoutez l'adresse e-mail de l'utilisateur (correspondant à l'adresse e-mail de connexion Amazon Cognito).
3. Attribuez le rôle d'autorisation Viewer.
4. Demandez à l'utilisateur de se déconnecter puis de se reconnecter pour actualiser les autorisations. | ## Ressources connexes ** AWS documentation** + [Souscrire à un abonnement Amazon Quick](https://docs.aws.amazon.com/quicksight/latest/user/signing-up.html) + [Analyses intégrées pour Amazon Quick Sight](https://docs.aws.amazon.com/quicksuite/latest/userguide/embedded-analytics.html) + [Référence de l'API Quick Sight — GenerateEmbedUrlForRegisteredUser](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_GenerateEmbedUrlForRegisteredUser.html) + [Groupes d'utilisateurs Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools.html) + [AWS Lambda Manuel du développeur](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html) + [Guide du développeur Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/welcome.html) + [Surveillance de base et surveillance détaillée dans CloudWatch](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/cloudwatch-metrics-basic-detailed.html) + [AWS CloudFormation Guide de l'utilisateur](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html) + [Guide CloudFront du développeur Amazon](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) + [AWS WAF Manuel du développeur](https://docs.aws.amazon.com/waf/latest/developerguide/waf-chapter.html) **Tutoriels et vidéos** + [Analyses intégrées pour Amazon Quick Sight](https://docs.aws.amazon.com/quicksight/latest/user/embedded-analytics.html) + [ YouTube Tutoriels Amazon Quick Sight](https://www.youtube.com/results?search_query=amazon+quicksight+embedding)