Betten Sie ein QuickSight Amazon-Dashboard in eine lokale Angular-Anwendung ein

Erstellen Sie eine EmbedUrl Richtlinie.

Erstellen Sie eine IAM-Richtlinie mit QuicksightGetDashboardEmbedUrldem Namen und den folgenden Eigenschaften.

{
      "Version": "2012-10-17",
      "Statement": [
            {
                  "Effect": "Allow",
                  "Action": [
                        "quicksight:GetDashboardEmbedUrl",
                        "quickSight:GetAnonymousUserEmbedUrl"
                  ],
                  "Resource": "*"
            }
      ]
}

So erstellen Sie die Lambda-Funktion:

1. Öffnen Sie in der Lambda-Konsole die Seite Funktionen.

2. Wählen Sie Create Function.

3. Wählen Sie Von Grund auf neu schreiben aus.

4. Geben Sie für Function name (Funktionsname) get-qs-embed-url ein.

5. Wählen Sie für Runtime (Laufzeit) die Option Python 3.9 aus.

6. Wählen Sie Create Function.

7. Kopieren Sie auf der Registerkarte Code den folgenden Code in die Lambda-Funktion.

import json
import boto3
from botocore.exceptions import ClientError
import time
from os import environ


qs = boto3.client('quicksight',region_name='us-east-1')
sts = boto3.client('sts')

ACCOUNT_ID = boto3.client('sts').get_caller_identity().get('Account')
DASHBOARD_ID = environ['DASHBOARD_ID']

def getDashboardURL(accountId, dashboardId, quicksightNamespace, resetDisabled, undoRedoDisabled):
  try:
    response = qs.get_dashboard_embed_url(
      AwsAccountId = accountId,
      DashboardId = dashboardId,
      Namespace = quicksightNamespace,
      IdentityType = 'ANONYMOUS',
      SessionLifetimeInMinutes = 600,
      UndoRedoDisabled = undoRedoDisabled,
      ResetDisabled = resetDisabled
    )
    return response
          
  except ClientError as e:
    print(e)
    return "Error generating embeddedURL: " + str(e)


def lambda_handler(event, context):
  url = getDashboardURL(ACCOUNT_ID, DASHBOARD_ID, "default", True, True)['EmbedUrl']
  return {
      'statusCode': 200,
      'url': url
  }

8. Wählen Sie Bereitstellen.

Fügen Sie die Dashboard-ID als Umgebungsvariable hinzu.

Fügen Sie Ihrer Lambda-Funktion DASHBOARD_ID als Umgebungsvariable hinzu:

Fügen Sie Berechtigungen für die Lambda-Funktion hinzu.

Ändern Sie die Ausführungsrolle der Lambda-Funktion und fügen Sie ihr die QuicksightGetDashboardEmbedUrlRichtlinie hinzu.

Testen Sie die Lambda-Funktion.

Erstellen Sie ein Testereignis und führen Sie es aus. Sie können die Vorlage „Hello World“ verwenden, da die Funktion keine der Daten des Testereignisses verwendet.

{
  "statusCode": 200,
  "url": "\"https://us-east-1.quicksight.aws.amazon.com/embed/f1acc0786687783b9a4543a05ba929b3a/dashboards/...
}

Erstellen Sie eine API in API Gateway.

Erstellen Sie die Anwendung mit der Angular CLI.

Fügen Sie das QuickSight Embedding SDK hinzu.

Fügen Sie Ihrer Datei dashboard.component.ts Code hinzu.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as QuicksightEmbedding from 'amazon-quicksight-embedding-sdk';
import { environment } from "../../environments/environment";
import { take } from 'rxjs';
import { EmbeddingContext } from 'amazon-quicksight-embedding-sdk/dist/types';
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor(private http: HttpClient) { }

  loadingError = false;
  dashboard: any;

  ngOnInit() {
    this.GetDashboardURL();
  }
 
  public GetDashboardURL() {
    this.http.get(environment.apiUrl)
    .pipe(
      take(1),
    )
    .subscribe((data: any) => this.Dashboard(data.url));
  }

  public async Dashboard(embeddedURL: any) {
    var containerDiv = document.getElementById("dashboardContainer") || '';
    const frameOptions = {
      url: embeddedURL,
      container: containerDiv,
      height: "850px",
      width: "100%",
      resizeHeightOnSizeChangedEvent: true,
  }
    const embeddingContext: EmbeddingContext = await createEmbeddingContext();
    this.dashboard = embeddingContext.embedDashboard(frameOptions);
  }
}

Fügen Sie Code zu Ihrer Datei dashboard.component.html hinzu.

Fügen Sie nun folgenden Code in die Datei src/app/dashboard/dashboard.component.html ein:

<div id="dashboardContainer"></div>

Ändern Sie Ihre app.component.html-Datei, um Ihre Dashboard-Komponente zu laden.

Importieren Sie HttpClientModule in Ihre app.module.ts-Datei.

Konfigurieren Sie mkcert.

Konfigurieren Sie QuickSight es so, dass Ihre Domain zugelassen wird.

Testen Sie die Lösung.

Starten Sie einen lokalen Angular-Entwicklungsserver, indem Sie den folgenden Befehl ausführen.

ng serve --host my-qs-app.net --port 4200 --ssl --ssl-key "./src/my-qs-app.net-key.pem" --ssl-cert "./src/my-qs-app.net.pem" -o

Dadurch wird Secure Sockets Layer (SSL) mit dem benutzerdefinierten Zertifikat aktiviert, das Sie zuvor erstellt haben.

Wenn der Build abgeschlossen ist, wird ein Browserfenster geöffnet und Sie können Ihr eingebettetes QuickSight Dashboard anzeigen, das lokal in Angular gehostet wird.