Intégrez des tableaux de bord interactifs dans votre application avec Amazon QuickSight

Amazon QuickSight vous permet d’enrichir rapidement et efficacement vos applications en embarquant facilement des tableaux de bord interactifs. Vous pouvez ainsi ajouter à vos applications des éléments de visualisation de données plus interactifs et plus riches mais également des fonctionnalités d’analyse de données sans avoir recours à des développements spécifiques. En effet, vous n’aurez ainsi pas besoin d’une expertise spécialisée au sein de votre équipe pour développer, maintenir et faire évoluer les composants analytiques de vos applications, ni de gérer et de mettre à l’échelle vos serveurs d’analyse ou d’un pipeline et une infrastructure de data engineering au fur et à mesure que les besoins de vos applications augmentent. Cela vous permet d’économiser du temps et de l’argent et de vous concentrer sur les fonctionnalités de votre application.

Les tableaux de bord Amazon QuickSight intégrés ou embarqués vous permettent d’utiliser l’architecture sans serveur d’Amazon QuickSight et d’adapter facilement votre configuration selon les besoins de vos utilisateurs, tout en vous assurant de payer à l’usage grâce au modèle de paiement par session. Les applications peuvent authentifier les utilisateurs des tableaux de bord au travers de n’importe quel fournisseur d’identité (par exemple, Active Directory, Cognito ou tout autre fournisseur d’identité fédérée basé sur SAML et utilisé par votre organisation) et ce, afin de leur donner accès au tableau de bord Amazon QuickSight. De cette manière, chaque utilisateur accède à un tableau de bord sécurisé et personnalisé sans qu’il ait à s’authentifier spécifiquement à QuickSight. L’intégration de tableaux de bord est disponible dans la version Amazon QuickSight Enterprise Edition dans toutes les régions où Amazon Quicksight est disponible.

Pour faciliter cette intégration, nous mettons à disposition l’Amazon QuickSight SDK ainsi qu’un riche ensemble d’APIs Amazon QuickSight. Le kit Amazon QuickSight SDK pour JavaScript vous permet ainsi d’intégrer efficacement des tableaux de bord Amazon QuickSight dans les pages HTML de vos applications, de définir les paramètres par défaut, de capturer et de gérer les erreurs. Les API User et Group vous permettent de gérer programmatiquement les utilisateurs et les groupes. Cela vous permet de déployer plus rapidement Amazon QuickSight auprès de vos utilisateurs finaux et facilite la gestion des ressources Amazon QuickSight à l’aide de groupes. Les API User sont disponibles pour les éditions Standard et Enterprise, tandis que les API Group sont uniquement disponibles dans l’ édition Enterprise.

Voyons maintenant comment vous pouvez intégrer un tableau de bord dans votre application en suivant les quatre étapes ci-dessous.

Étape 1 : Créez vos tableaux de bord et mettez vos domaines en liste autorisée

Dans cette étape, vous aller créer vos tableaux de bord dans Amazon QuickSight, puis les partager avec les utilisateurs avec accès en lecture seule qui peuvent y accéder sous leur forme embarquée. Tout utilisateur en lecture seule du tableau de bord embarqué doit être membre du compte Amazon QuickSight. Il peut être provisionné à l’avance dans le compte ou au moment de l’accès à l’aide de l’API User. Pour faciliter l’accès en lecture de plusieurs utilisateurs à un tableau de bord, vous pouvez le partager avec un groupe puis ajouter les utilisateurs à ce groupe une fois qu’ils sont provisionnés dans le compte Amazon QuickSight.

Avant de publier le tableau de bord, créons en premier lieu un groupe Amazon QuickSight pour les utilisateurs ‘Finance’ par exemple. Les groupes Amazon QuickSight peuvent être créés via l’API create-group. La commande AWS CLI suivante montre comment y parvenir :

aws quicksight create-group --aws-account-id <id de votre compte> --namespace=default --group-name=financeusers

Modifier le paramètre <id de votre compte> par l’id de votre compte AWS.

Lorsque vous publiez un tableau de bord, vous avez la possibilité d’activer ou de désactiver le filtrage avancé et le téléchargement CSV afin d’en fournir une expérience simplifiée d’utilisation.

Intégrer des tableaux de board QuickSight - Publication

Partagez le tableau de bord avec le groupe d’utilisateurs financeusers créé ci-dessus. Vous pouvez trouver ce groupe en effectuant une recherche dans le champ « Sélectionner les utilisateurs de ce compte ». Accordez des autorisations ‘Lecteur’ au groupe.

Intégrer des tableaux de bord QuickSight - Partage

Pour éviter l’intégration non-autorisée de tableaux de bord de votre compte, un administrateur de votre compte doit activer explicitement les domaines dans lesquels vos tableaux de bord Amazon QuickSight peuvent être intégrés. Pour ce faire, utilisez l’option Gérer QuickSight disponible pour tous les administrateurs. Tous les domaines en cours d’utilisation (dev/staging/production) doivent être autorisés et doivent utiliser https.

Intégrer des tableaux de bord QuickSight - Autorisation domaines

Étape 2 : Configurez les autorisations pour les utilisateurs des tableaux de bord embarqués

Pour provisionner les utilisateurs de votre application en tant que membres de votre compte Amazon QuickSight, créez un rôle AWS Identity and AccessManagement (AWS IAM) que votre application peut assumer au nom de l’utilisateur. Ce rôle devra accorder aux visiteurs des autorisations pour spécifiquement récupérer un tableau de bord embarqué quicksight:GetDashboardEmbedURL.

Voici un exemple de stratégie AWS IAM intégrant cette autorisation :

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": "quicksight:GetDashboardEmbedUrl",
            "Resource": "<arn du dashboard>",
            "Effect": "Allow"
        }
    ]
}

Modifier le paramètre <arn du dashboard> par l’arn de votre dashboard.

L’identité AWS IAM de votre application doit disposer des autorisations nécessaires pour utiliser le rôle que vous venez de créer. Ainsi, lorsqu’un utilisateur accède à votre application, elle peut assumer le rôle QuickSightEmbed au nom de l’utilisateur et provisionner ce dernier dans le compte Amazon QuickSight. L’exemple suivant montre une instruction qui peut être ajoutée à l’identité AWS IAM de votre application pour lui permettre d’assumer le rôle QuickSightEmbed.

{
    "Version": "2012-10-17",
    "Statement": {
       "Effect": "Allow",
        "Action": "sts:AssumeRole",
       "Resource": "<arn du role précédement crée"
     }
}

Étape 3 : Authentifiez l’utilisateur et obtenez l’URL du tableau de bord embarqué

Lorsqu’un utilisateur accède à votre application, vous pouvez vérifier s’il est déjà inscrit dans Amazon QuickSight ou lui provisionner un accès s’il se connecte pour la première fois. La commande AWS Command Line Interface (AWS CLI) suivante peut être utilisée pour vérifier si l’utilisateur existe déjà dans le système.

aws quicksight describe-user --aws-account-id <id-compte-aws> --namespace default --user-name QuickSightEmbed/tom.smith@example.com

Dans l’exemple ci-dessus, tom.smith@example.com est le nom de session de l’utilisateur qui visite votre application et QuickSightEmbed est le rôle que l’application assume au nom de l’utilisateur. La combinaison du nom du rôle IAM et du nom du rôle de session détermine la façon dont l’utilisateur est enregistré dans Amazon QuickSight. de même id-compte-AWS désigne votre compte AWS dans lequel sont défini vos dashboards Amazon Quicksight.

Si aucun résultat n’est renvoyé, vous pouvez effectuer un enregistrement juste-à-temps de l’utilisateur à l’aide de la commande ci-dessous. Vous pouvez également utiliser ce modèle pour pré-provisionner les utilisateurs dans Amazon QuickSight. Avec le mode de paiement par session, vous pouvez provisionner des milliers d’utilisateurs et vous n’êtes facturé que lorsqu’ils accèdent à Amazon QuickSight.

aws quicksight register-user --aws-account-id <id compte AWS> --namespace default --identity-type IAM --iam-arn "<arn rôle QuickSightEmbed>" --user-role READER --session-name tom.smith@example.com --email tom.smith@example.com

Lors du premier accès, vous pouvez également ajouter cet utilisateur à un groupe Amazon QuickSight sur lequel le tableau de bord a été partagé.

aws quicksight create-group-membership --aws-account-id=<id-compte-aws> --namespace=default --group-name=financeusers --member-name='QuickSightEmbed/tom.smith@example.com'

Ensuite, vous pouvez assumer le rôle IAM créé à l’étape 2, QuickSightEmbed au nom de l’utilisateur en passant son nom de session. Reprenons le nom tom.smith@example.com utilisé pour l’enregistrement de l’utilisateur lors de l’étape précédente.

La commande AWS CLI permettant d’effectuer cette opération est la suivante :

aws sts assume-role --role-arn "<arn rôle QuickSightEmbed>" --role-session-name tom.smith@example.com

L’API assume-role renvoie 3 paramètres : clé d’accès, clé d’accès secrète et jeton de session. Vous devez définir ces trois paramètres dans votre CLI :

export AWS_Access_KEY_ID="Access_KEY_from_assume_role"
export AWS_Secret_Access_key="Secret_KEY_from_assume_role" 
export AWS_session_token="Session_token_from_assume_role”

Si vous utilisez un PC Windows, vous pouvez faire de même en utilisant les commandes ci-dessous :

set AWS_Access_KEY_ID="Access_KEY_from_assume_role"
set AWS_Secret_Access_KEY="SECRT_KEY_From_assume_role" 
set AWS_SESSION_TOKEN="SESSION_TOKEN_From_assume_role"

L’exécution de cette commande positionne l’ID de session de rôle de l’utilisateur accédant à votre site Web à QuickSightEmbed/tom.smith@example.com. Il s’agit également du nom d’utilisateur dans Amazon QuickSight.
L’utilisateur de votre application est désormais un utilisateur Amazon QuickSight ayant accès au tableau de bord. Pour la dernière partie de l’étape 3, appelez get-dashboard-embed-url pour obtenir une URL signée vous permettant d’intégrer le tableau de bord.

aws quicksight get-dashboard-embed-url --aws-account-id <id-compte-aws> --dashboard-id <id-dashboard> --identity-type IAM

Étape 4 : Utilisez Amazon QuickSight JavaScript SDK pour intégrer le tableau de bord

Vous pouvez télécharger le kit SDK JavaScript Amazon QuickSight. Utilisez-le pour placer l’URL signée obtenue à l’étape 3 dans la page de votre application. Le SDK vous permet de placer le tableau de bord dans une page HTML, de passer des paramètres dans le tableau de bord et de gérer également les erreurs avec des messages personnalisés pour votre application.

function embedDashboard() {
                var containerDiv = document.getElementById("dashboardContainer");
                var options = {
                    url: "< URL signee de l’étape 3>",
                    container: containerDiv,
                    parameters: {
                        country: 'United States'
                    },
                    scrolling: "no",
                    height: "700px",
                    width: "1000px"
                };
                dashboard = QuickSightEmbedding.embedDashboard(options);
                dashboard.on('error', onError);
                dashboard.on('load', onDashboardLoad);
            }

Les commandes CLI référencées ci-dessus font partie du kit SDK AWS. Vous pouvez obtenir le même résultat avec tous les langages pris en charge par AWS SDK. Pour plus d’informations, consultez Outils pour Amazon Web Services.

Ces quatre étapes décrivent la séquence d’étapes nécessaires à l’intégration de tableaux de bord Amazon QuickSight dans les pages de vos applications. Lorsque vous intégrez des tableaux de bord Amazon QuickSight, vous devez répéter cette séquence pour chaque utilisateur accédant au système, de sorte que chaque utilisateur puisse avoir une identité unique assurant la sécurisation du tableau de bord grâce à des autorisations appropriées et permettant ainsi d’afficher les données idoines et personnalisées.

Intégrer des tableaux de bord QuickSight - Résultat

Enfin, pour faciliter la mise en œuvre décrite sur ces 4 étapes, nous avons préparé un exemple intégrant un répertoire d’utilisateurs basé sur Cognito. Vous pouvez le trouver à l’adresse suivante : https://github.com/aws-samples/amazon-quicksight-embedding-sample.

Conclusion

Dans cet article, vous avez appris à partager un tableau de bord Amazon QuickSight avec un utilisateur ou un groupe d’utilisateurs d’une façon sécurisée, en définissant des autorisations ainsi que les domaines autorisés. Vous avez également appris comment permettre à votre application d’utiliser le tableau de bord en assumant un rôle AWS IAM au nom d’un utilisateur de votre application. Enfin, vous avez appris à intégrer le tableau de bord dans une page de votre application en utilisant Amazon QuickSight SDK.

L’expérience utilisateur de votre application est ainsi facilitée et enrichie de nouvelles capacités analytiques au travers d’une intégration simple et sécurisée de vos tableaux de bord.

Article orginal contribué par Jose Kunnacka, Product Manager pour Amazon QuickSight, et adapté par Karim Ichallamene, Solutions Architect chez AWS France, LinkedIn.

Le Blog Amazon Web Services