Incorporamento di pannelli di controllo QuickSight per utenti anonimi (non registrati) - Amazon QuickSight

Incorporamento di pannelli di controllo QuickSight per utenti anonimi (non registrati)

Importante

Amazon QuickSight dispone di nuove operazioni API per l'integrazione dell'analisi: GenerateEmbedUrlForAnonymousUser e GenerateEmbedUrlForRegisteredUser.

Puoi comunque utilizzare le operazioni API GetDashboardEmbedUrl e GetSessionEmbedUrl per incorporare i pannelli di controllo e la console QuickSight, ma non contengono le funzionalità di incorporamento più recenti. Per ulteriori informazioni sull'incorporamento tramite le vecchie operazioni API, consulta Incorporamento dell'analisi utilizzando le operazioni API GetDashboardEmbedURL e GetSessionEmbedURL.

 Si applica a: Enterprise Edition 
   Destinatari: sviluppatori di Amazon QuickSight 

Nelle sezioni seguenti sono disponibili informazioni dettagliate su come configurare i pannelli di controllo Amazon QuickSight incorporati per gli utenti anonimi (non registrati).

Fase 1: Configurazione delle autorizzazioni

 Si applica a: Enterprise Edition 
   Destinatari: sviluppatori di Amazon QuickSight 

Nella sezione seguente viene descritto come configurare le autorizzazioni per l'applicazione di back-end o il server Web. Questa operazione richiede l'accesso amministrativo a IAM.

Ogni utente che accede a un pannello di controllo assume un ruolo che concede l'accesso ad Amazon QuickSight e le autorizzazioni per il pannello di controllo. Per far ciò, crea un ruolo IAM nell'Account AWS. Associa una policy IAM al ruolo per fornire le autorizzazioni a qualsiasi utente che lo assume.

Puoi creare una condizione nella tua policy IAM che limiti i domini che gli sviluppatori possono elencare nel parametro AllowedDomains di un'operazione API GenerateEmbedUrlForAnonymousUser. Il parametro AllowedDomains è un parametro facoltativo. In qualità di sviluppatore, ti offre la possibilità di sovrascrivere i domini statici configurati nel menu Gestisci QuickSight. Puoi invece elencare fino a tre domini o sottodomini che possono accedere a un URL generato. Questo URL viene quindi incorporato nel sito Web che crei. Solo i domini elencati nel parametro possono accedere al pannello di controllo incorporato. Senza questa condizione, nel parametro AllowedDomains puoi elencare qualsiasi dominio su Internet.

Per limitare i domini che gli sviluppatori possono utilizzare con questo parametro, aggiungi una condizione AllowedEmbeddingDomains alla tua policy IAM. Per ulteriori informazioni sul parametro AllowedDomains, consulta GenerateEmbedUrlForAnonymousUser nella Documentazione di riferimento delle API di Amazon QuickSight.

La seguente policy di esempio fornisce le autorizzazioni da utilizzare con GenerateEmbedUrlForAnonymousUser. Affinché questo approccio funzioni, hai anche bisogno di un session pack, o tariffazione della capacità della sessione, per il tuo Account AWS. Altrimenti, quando un utente prova ad accedere al pannello di controllo, viene restituito l'errore UnsupportedPricingPlanException.

È necessario che all'identità IAM dell'applicazione sia associata una policy di attendibilità per consentire l'accesso al ruolo appena creato. Ciò significa che, quando un utente accede all'applicazione, l'applicazione può assumere quel ruolo per conto dell'utente per aprire il pannello di controllo. Di seguito è mostrata una policy di attendibilità di esempio.

JSON
{ "Version":"2012-10-17", "Statement": [ { "Sid": "AllowLambdaFunctionsToAssumeThisRole", "Effect": "Allow", "Principal": { "Service": "lambda.amazonaws.com" }, "Action": "sts:AssumeRole" }, { "Sid": "AllowEC2InstancesToAssumeThisRole", "Effect": "Allow", "Principal": { "Service": "ec2.amazonaws.com" }, "Action": "sts:AssumeRole" } ] }

Per ulteriori informazioni sulle policy di attendibilità, consulta Credenziali di sicurezza provvisorie in IAM nella Guida per l'utente di IAM.

Fase 2: Generazione dell'URL con il codice di autenticazione allegato

 Si applica a: Enterprise Edition 
   Destinatari: sviluppatori di Amazon QuickSight 

Nella sezione seguente, è possibile scoprire come eseguire l'autenticazione per conto del visitatore anonimo e ottenere l'URL del pannello di controllo incorporabile nel server delle applicazioni.

Quando un utente accede all'applicazione, l'applicazione assume il ruolo IAM per conto dell'utente. Quindi aggiunge l'utente a QuickSight, se tale utente non esiste già. In seguito, sarà necessario passare un identificatore come l'ID della sessione del ruolo univoco.

Gli esempi seguenti eseguono l'autenticazione IAM per conto dell'utente. Passa un identificatore come l'ID della sessione del ruolo univoco. Questo codice viene eseguito sul server delle applicazioni.

import java.util.List; import com.amazonaws.auth.AWSCredentials; import com.amazonaws.auth.AWSCredentialsProvider; import com.amazonaws.auth.BasicAWSCredentials; import com.amazonaws.regions.Regions; import com.amazonaws.services.quicksight.AmazonQuickSight; import com.amazonaws.services.quicksight.AmazonQuickSightClientBuilder; import com.amazonaws.services.quicksight.model.RegisteredUserDashboardEmbeddingConfiguration; import com.amazonaws.services.quicksight.model.AnonymousUserEmbeddingExperienceConfiguration; import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserRequest; import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForAnonymousUserResult; import com.amazonaws.services.quicksight.model.SessionTag; /** * Class to call QuickSight AWS SDK to generate embed url for anonymous user. */ public class GenerateEmbedUrlForAnonymousUserExample { private final AmazonQuickSight quickSightClient; public GenerateEmbedUrlForAnonymousUserExample() { quickSightClient = AmazonQuickSightClientBuilder .standard() .withRegion(Regions.US_EAST_1.getName()) .withCredentials(new AWSCredentialsProvider() { @Override public AWSCredentials getCredentials() { // provide actual IAM access key and secret key here return new BasicAWSCredentials("access-key", "secret-key"); } @Override public void refresh() { } } ) .build(); } public String GenerateEmbedUrlForAnonymousUser( final String accountId, // YOUR AWS ACCOUNT ID final String initialDashboardId, // DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS. final String namespace, // ANONYMOUS EMBEDDING REQUIRES SPECIFYING A VALID NAMESPACE FOR WHICH YOU WANT THE EMBEDDING URL final List<String> authorizedResourceArns, // DASHBOARD ARN LIST TO EMBED final List<String> allowedDomains, // RUNTIME ALLOWED DOMAINS FOR EMBEDDING final List<SessionTag> sessionTags // SESSION TAGS USED FOR ROW-LEVEL SECURITY ) throws Exception { AnonymousUserEmbeddingExperienceConfiguration experienceConfiguration = new AnonymousUserEmbeddingExperienceConfiguration(); AnonymousUserDashboardEmbeddingConfiguration dashboardConfiguration = new AnonymousUserDashboardEmbeddingConfiguration(); dashboardConfiguration.setInitialDashboardId(initialDashboardId); experienceConfiguration.setDashboard(dashboardConfiguration); GenerateEmbedUrlForAnonymousUserRequest generateEmbedUrlForAnonymousUserRequest = new GenerateEmbedUrlForAnonymousUserRequest() .withAwsAccountId(accountId) .withNamespace(namespace) .withAuthorizedResourceArns(authorizedResourceArns) .withExperienceConfiguration(experienceConfiguration) .withSessionTags(sessionTags) .withSessionLifetimeInMinutes(600L); // OPTIONAL: VALUE CAN BE [15-600]. DEFAULT: 600 .withAllowedDomains(allowedDomains); GenerateEmbedUrlForAnonymousUserResult dashboardEmbedUrl = quickSightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserRequest); return dashboardEmbedUrl.getEmbedUrl(); } }
global.fetch = require('node-fetch'); const AWS = require('aws-sdk'); function generateEmbedUrlForAnonymousUser( accountId, // YOUR AWS ACCOUNT ID initialDashboardId, // DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS quicksightNamespace, // VALID NAMESPACE WHERE YOU WANT TO DO NOAUTH EMBEDDING authorizedResourceArns, // DASHBOARD ARN LIST TO EMBED allowedDomains, // RUNTIME ALLOWED DOMAINS FOR EMBEDDING sessionTags, // SESSION TAGS USED FOR ROW-LEVEL SECURITY generateEmbedUrlForAnonymousUserCallback, // GENERATEEMBEDURLFORANONYMOUSUSER SUCCESS CALLBACK METHOD errorCallback // GENERATEEMBEDURLFORANONYMOUSUSER ERROR CALLBACK METHOD ) { const experienceConfiguration = { "DashboardVisual": { "InitialDashboardVisualId": { "DashboardId": "dashboard_id", "SheetId": "sheet_id", "VisualId": "visual_id" } } }; const generateEmbedUrlForAnonymousUserParams = { "AwsAccountId": accountId, "Namespace": quicksightNamespace, "AuthorizedResourceArns": authorizedResourceArns, "AllowedDomains": allowedDomains, "ExperienceConfiguration": experienceConfiguration, "SessionTags": sessionTags, "SessionLifetimeInMinutes": 600 }; const quicksightClient = new AWS.QuickSight({ region: process.env.AWS_REGION, credentials: { accessKeyId: AccessKeyId, secretAccessKey: SecretAccessKey, sessionToken: SessionToken, expiration: Expiration } }); quicksightClient.generateEmbedUrlForAnonymousUser(generateEmbedUrlForAnonymousUserParams, function(err, data) { if (err) { console.log(err, err.stack); errorCallback(err); } else { const result = { "statusCode": 200, "headers": { "Access-Control-Allow-Origin": "*", // USE YOUR WEBSITE DOMAIN TO SECURE ACCESS TO THIS API "Access-Control-Allow-Headers": "Content-Type" }, "body": JSON.stringify(data), "isBase64Encoded": false } generateEmbedUrlForAnonymousUserCallback(result); } }); }
import json import boto3 from botocore.exceptions import ClientError import time # Create QuickSight and STS clients quicksightClient = boto3.client('quicksight',region_name='us-west-2') sts = boto3.client('sts') # Function to generate embedded URL for anonymous user # accountId: YOUR AWS ACCOUNT ID # quicksightNamespace: VALID NAMESPACE WHERE YOU WANT TO DO NOAUTH EMBEDDING # authorizedResourceArns: DASHBOARD ARN LIST TO EMBED # allowedDomains: RUNTIME ALLOWED DOMAINS FOR EMBEDDING # dashboardId: DASHBOARD ID TO WHICH THE CONSTRUCTED URL POINTS # sessionTags: SESSION TAGS USED FOR ROW-LEVEL SECURITY def generateEmbedUrlForAnonymousUser(accountId, quicksightNamespace, authorizedResourceArns, allowedDomains, dashboardId, sessionTags): try: response = quicksightClient.generate_embed_url_for_anonymous_user( AwsAccountId = accountId, Namespace = quicksightNamespace, AuthorizedResourceArns = authorizedResourceArns, AllowedDomains = allowedDomains, ExperienceConfiguration = { "Dashboard": { "InitialDashboardId": dashboardId } }, SessionTags = sessionTags, SessionLifetimeInMinutes = 600 ) return { 'statusCode': 200, 'headers': {"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Content-Type"}, 'body': json.dumps(response), 'isBase64Encoded': bool('false') } except ClientError as e: print(e) return "Error generating embeddedURL: " + str(e)

L'esempio seguente mostra il codice JavaScript (Node.js) che è possibile utilizzare nel server delle applicazioni per generare l'URL per il pannello di controllo incorporato. È possibile utilizzare questo URL nel sito Web o nell'applicazione per visualizzare il pannello di controllo.

const AWS = require('aws-sdk'); const https = require('https'); var quicksightClient = new AWS.Service({ apiConfig: require('./quicksight-2018-04-01.min.json'), region: 'us-east-1', }); quicksightClient.generateEmbedUrlForAnonymousUser({ 'AwsAccountId': '111122223333', 'Namespace' : 'default', 'AuthorizedResourceArns': authorizedResourceArns, 'AllowedDomains': allowedDomains, 'ExperienceConfiguration': experienceConfiguration, 'SessionTags': sessionTags, 'SessionLifetimeInMinutes': 600 }, function(err, data) { console.log('Errors: '); console.log(err); console.log('Response: '); console.log(data); });
//The URL returned is over 900 characters. For this example, we've shortened the string for //readability and added ellipsis to indicate that it's incomplete. { Status: 200, EmbedUrl: 'https://quicksightdomain/embed/12345/dashboards/67890..', RequestId: '7bee030e-f191-45c4-97fe-d9faf0e03713' }

L'esempio seguente mostra il codice .NET/C# che è possibile utilizzare nel server delle applicazioni per ottenere l'URL per il pannello di controllo incorporato. È possibile utilizzare questo URL nel sito Web o nell'applicazione per visualizzare il pannello di controllo.

using System; using Amazon.QuickSight; using Amazon.QuickSight.Model; var quicksightClient = new AmazonQuickSightClient( AccessKey, SecretAccessKey, sessionToken, Amazon.RegionEndpoint.USEast1); try { Console.WriteLine( quicksightClient.GenerateEmbedUrlForAnonymousUserAsync(new GenerateEmbedUrlForAnonymousUserRequest { AwsAccountId = "111122223333", Namespace = default, AuthorizedResourceArns = authorizedResourceArns, AllowedDomains = allowedDomains, ExperienceConfiguration = experienceConfiguration, SessionTags = sessionTags, SessionLifetimeInMinutes = 600, }).Result.EmbedUrl ); } catch (Exception ex) { Console.WriteLine(ex.Message); }

Per assumere quel ruolo, scegli una delle seguenti operazioni API di AWS Security Token Service (AWS STS):

  • AssumeRole: utilizza questa operazione quando usi un'identità IAM per assumere il ruolo.

  • AssumeRoleWithWebIdentity: utilizza questa operazione quando usi un gestore delle identità Web per autenticare l'utente.

  • AssumeRoleWithSaml: utilizza questa operazione quando utilizzi Security Assertion Markup Language (SAML) per autenticare gli utenti.

L'esempio seguente mostra il comando dell'interfaccia a riga di comando per impostare il ruolo IAM. Il ruolo deve avere le autorizzazioni abilitate per quicksight:GenerateEmbedUrlForAnonymousUser.

aws sts assume-role \ --role-arn "arn:aws:iam::11112222333:role/QuickSightEmbeddingAnonymousPolicy" \ --role-session-name anonymous caller

L'operazione assume-role restituisce tre parametri di output: la chiave di accesso, la chiave segreta e il token della sessione.

Nota

Se si verifica un errore ExpiredToken durante la chiamata all'operazione AssumeRole, vuol dire che il SESSION TOKEN precedente è ancora presente nelle variabili di ambiente. Cancellala impostando le seguenti variabili:

  • AWS_ACCESS_KEY_ID

  • AWS_SECRET_ACCESS_KEY

  • AWS_SESSION_TOKEN

L'esempio seguente mostra come impostare questi tre parametri nell'interfaccia a riga di comando. Se usi un computer Microsoft Windows, utilizza set invece di export.

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"

L'esecuzione di questi comandi imposta l'ID della sessione del ruolo dell'utente che visita la pagina del tuo sito Web suembedding_quicksight_dashboard_role/QuickSightEmbeddingAnonymousPolicy. L'ID della sessione del ruolo è costituito dal nome del ruolo di role-arn e dal valore role-session-name. L'utilizzo dell'ID della sessione del ruolo univoco per ciascun utente garantisce che le autorizzazioni appropriate siano impostate per ogni utente visitatore. Inoltre, mantiene ogni sessione separata e distinta. Se utilizzi una serie di server Web, ad esempio per il bilanciamento del carico, e una sessione viene ricollegata a un server diverso, viene avviata una nuova sessione.

Per ottenere un URL firmato per il pannello di controllo, chiama generate-embed-url-for-anynymous-user dal server delle applicazioni. Questo restituisce l'URL del pannello di controllo incorporato. L'esempio seguente mostra come generare l'URL per un pannello di controllo incorporato utilizzando una chiamata lato server per gli utenti che effettuano visite anonime al portale Web o all'applicazione.

aws quicksight generate-embed-url-for-anonymous-user \ --aws-account-id 111122223333 \ --namespace default-or-something-else \ --session-lifetime-in-minutes 15 \ --authorized-resource-arns '["dashboard-arn-1","dashboard-arn-2"]' \ --allowed-domains '["domain1","domain2"]' \ --session-tags '["Key": tag-key-1,"Value": tag-value-1,{"Key": tag-key-1,"Value": tag-value-1}]' \ --experience-configuration 'DashboardVisual={InitialDashboardVisualId={DashboardId=dashboard_id,SheetId=sheet_id,VisualId=visual_id}}'

Per ulteriori informazioni sull'utilizzo di questa operazione, consulta GenerateEmbedUrlForAnonymousUser. Puoi utilizzare questa API e altre operazioni nel tuo codice.

Fase 3: Incorporamento dell'URL del pannello di controllo

 Si applica a: Enterprise Edition 
   Destinatari: sviluppatori di Amazon QuickSight 

Nella sezione seguente, sono riportate le informazioni su come è possibile utilizzare l'SDK di incorporamento QuickSight (JavaScript) per incorporare l'URL del pannello di controllo dalla fase 2 nel sito Web o nella pagina dell'applicazione. Con il kit SDK, puoi procedere come segue:

  • Posiziona il pannello di controllo in una pagina HTML.

  • Passare i parametri nel pannello di controllo.

  • Gestisci stati di errore con messaggi personalizzati per l'applicazione.

Chiama l'operazione API GenerateEmbedUrlForAnynymousUser per generare l'URL da incorporare nella tua app. Questo URL è valido per 5 minuti, mentre la sessione risultante è valida per 10 ore. L'operazione API fornisce l'URL con un auth_code che consente una sessione di single sign-on.

Di seguito viene mostrata una risposta di esempio da generate-embed-url-for-anynymous-user.

//The URL returned is over 900 characters. For this example, we've shortened the string for //readability and added ellipsis to indicate that it's incomplete. { "Status": "200", "EmbedUrl": "https://quicksightdomain/embed/12345/dashboards/67890..", "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713" }

Incorpora questo pannello di controllo nella pagina Web utilizzando l'SDK di incorporamento QuickSight o aggiungendo questo URL in un iframe. Se imposti un'altezza e una larghezza fisse (in pixel), QuickSight utilizza questi valori e non modifica l'elemento visivo mentre la finestra si ridimensiona. Se imposti un'altezza e una larghezza relative in percentuale, QuickSight fornisce un layout reattivo che si modifica quando la finestra si ridimensiona. L'utilizzo dell'SDK di incorporamento QuickSight consente anche di controllare i parametri all'interno del pannello di controllo e ricevere callback in termini di caricamento delle pagine ed errori.

Il dominio che ospiterà i pannelli di controllo integrati deve essere presente nell'allowlist, l'elenco dei domini approvati per la tua sottoscrizione Quick Suite. Questo requisito protegge i tuoi dati impedendo ai domini non approvati di ospitare pannelli di controllo incorporati. Per ulteriori informazioni sull'aggiunta di domini per i pannelli di controllo incorporati, consulta Elenco consentiti di domini al runtime con l'API QuickSight.

Il seguente esempio illustra come utilizzare l'URL generato. Questo codice si trova sul server delle applicazioni.

<!DOCTYPE html> <html> <head> <title>Dashboard Embedding Example</title> <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.0.0/dist/quicksight-embedding-js-sdk.min.js"></script> <script type="text/javascript"> const embedDashboard = async() => { const { createEmbeddingContext, } = QuickSightEmbedding; const embeddingContext = await createEmbeddingContext({ onChange: (changeEvent, metadata) => { console.log('Context received a change', changeEvent, metadata); }, }); const frameOptions = { url: '<YOUR_EMBED_URL>', container: '#experience-container', height: "700px", width: "1000px", onChange: (changeEvent, metadata) => { switch (changeEvent.eventName) { case 'FRAME_MOUNTED': { console.log("Do something when the experience frame is mounted."); break; } case 'FRAME_LOADED': { console.log("Do something when the experience frame is loaded."); break; } } }, }; const contentOptions = { parameters: [ { Name: 'country', Values: [ 'United States' ], }, { Name: 'states', Values: [ 'California', 'Washington' ] } ], locale: "en-US", sheetOptions: { initialSheetId: '<YOUR_SHEETID>', singleSheet: false, emitSizeChangedEventOnSheetChange: false, }, toolbarOptions: { export: false, undoRedo: false, reset: false }, attributionOptions: { overlayContent: false, }, onMessage: async (messageEvent, experienceMetadata) => { switch (messageEvent.eventName) { case 'CONTENT_LOADED': { console.log("All visuals are loaded. The title of the document:", messageEvent.message.title); break; } case 'ERROR_OCCURRED': { console.log("Error occurred while rendering the experience. Error code:", messageEvent.message.errorCode); break; } case 'PARAMETERS_CHANGED': { console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters); break; } case 'SELECTED_SHEET_CHANGED': { console.log("Selected sheet changed. Selected sheet:", messageEvent.message.selectedSheet); break; } case 'SIZE_CHANGED': { console.log("Size changed. New dimensions:", messageEvent.message); break; } case 'MODAL_OPENED': { window.scrollTo({ top: 0 // iframe top position }); break; } } }, }; const embeddedDashboardExperience = await embeddingContext.embedDashboard(frameOptions, contentOptions); const selectCountryElement = document.getElementById('country'); selectCountryElement.addEventListener('change', (event) => { embeddedDashboardExperience.setParameters([ { Name: 'country', Values: event.target.value } ]); }); }; </script> </head> <body onload="embedDashboard()"> <span> <label for="country">Country</label> <select id="country" name="country"> <option value="United States">United States</option> <option value="Mexico">Mexico</option> <option value="Canada">Canada</option> </select> </span> <div id="experience-container"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Basic Embed</title> <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.15/dist/quicksight-embedding-js-sdk.min.js"></script> <script type="text/javascript"> var dashboard function onDashboardLoad(payload) { console.log("Do something when the dashboard is fully loaded."); } function onError(payload) { console.log("Do something when the dashboard fails loading"); } function embedDashboard() { var containerDiv = document.getElementById("embeddingContainer"); var options = { // replace this dummy url with the one generated via embedding API url: "https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/dashboardId?isauthcode=true&identityprovider=quicksight&code=authcode", container: containerDiv, parameters: { country: "United States" }, scrolling: "no", height: "700px", width: "1000px", locale: "en-US", footerPaddingEnabled: true }; dashboard = QuickSightEmbedding.embedDashboard(options); dashboard.on("error", onError); dashboard.on("load", onDashboardLoad); } function onCountryChange(obj) { dashboard.setParameters({country: obj.value}); } </script> </head> <body onload="embedDashboard()"> <span> <label for="country">Country</label> <select id="country" name="country" onchange="onCountryChange(this)"> <option value="United States">United States</option> <option value="Mexico">Mexico</option> <option value="Canada">Canada</option> </select> </span> <div id="embeddingContainer"></div> </body> </html>

Affinché questo esempio funzioni, assicurati di utilizzare l'SDK di incorporamento QuickSight per caricare il pannello di controllo incorporato sul tuo sito Web utilizzando JavaScript. Per ottenere la tua copia, procedi in uno dei seguenti modi: