埋め込みアプリケーション

動作確認用Webアプリケーション

Webアプリケーションの動作に必要な設定はCloudFormationの実行によってすでにプロビジョニングされています。
それぞれAWSマネージメントコンソールで各リソースを確認します。

  • CloudFront
    • S3バケットをオリジンとするCloudFrontディストリビューション
  • API Gateway
    • GetDashboardEmbedURL
      • 埋め込みダッシュボード用API-GW
    • GetSessionEmbedURL
      • 埋め込みコンソール用API-GW
  • Lambda
    • GetDashboardEmbedURL
      • 埋め込みダッシュボード用Lambda
    • GetSessionEmbedURL
      • 埋め込みコンソール用Lambda
  • IAM > ロール
    • QSLambdaEmbededDashboardExecutionRole
      • 埋め込みダッシュボードLambda用Role
    • QSLambdaEmbededConsoleExecutionRole
      • 埋め込みコンソールLambda用Role
  • S3
    • qse<アカウントID>
      • デモデータ+Webアプリケーションのトップページ格納バケット

Alt text

ダッシュボード埋め込みWebアプリケーションの動作イメージ

Webアプリケーション(qsembedded.html)は、CloudFrontで保護されたS3にデプロイされます。 API Gatewayは、Webアプリケーションによって呼び出されるAPIを公開するために使用されています。LambdaはこのAPIのメソッドとしてアプリケーションを動かします。

WebアプリケーションはCloudFrontのドメインに対し、埋め込みURLのメソッド呼び出しに必要なパラメータを付与したリクエストを発行します。WebアプリケーションがAPI GatewayのAPIを呼び出すと、API Gatewayはこれらのパラメータをそのまま後続のLambdaに渡し、Lambda関数をトリガーします。Lambda関数はこれらのパラメータを使用してQuickSightのGetDashboardEmbedUrlおよびGetSessionEmbedUrl APIを呼び出し、埋め込みURLを取得します。取得した結果はAPI Gatewayを経由してレスポンスとしてWebアプリケーションに返却されます。Webアプリケーション(qsembedded.html)は、該当のレスポンスに含まれる埋め込みURLを読み取り、画面上に表示しています。

Alt text

今回は、IdentityTypeをQUICKSIGHTにすることでQuickSightのユーザーを指定してQuickSightで認証を行っています。QuickSightでは他にもOpenIDやSAMLを利用した認証にも対応しており、事業者のもつ認証技術スタックを活かした構築が可能です。

Lambda実行ロールには、QuickSightのユーザーで認証するためにquicksight:GetAuthCodeを実行する許可と、指定したダッシュボードのEmbedURLを取得するためにquicksight:GetDashboardEmbedURLを実行する許可が付与されています。

ダッシュボード埋め込みWebアプリケーションのセットアップ

以下の作業はハンズオンの最初でログインに使用したIAMユーザーで行います。

CloudFormationのスタック画面から[出力]を開くと3つの値が表示されます。

Alt text

WebアプリケーションHTMLの編集

API GATEWAY ID の変数設定

環境変数を設定します。

  • APIGWID :CloudFormationのAPI-GW ID
$ APIGWID="<CloudFormationのAPI-GW ID>"

API GATEWAY ID の変数確認

設定した環境変数が設定されていることを確認します。

echo $APIGWID

デモ用ページファイル編集

アプリケーションHTML内の API-GW ID を置換します。

aws s3 cp s3://qse$AWSACCOUNTID/qsembedded.html ./
sed -i ./qsembedded.html -e "s/<api-gateway-id>/$APIGWID/g"
aws s3 cp ./qsembedded.html s3://qse$AWSACCOUNTID/qsembedded.html

QuickSight埋め込みホワイトリストの登録

  • CloudFormationの出力の値からCloudFrontUrlを書き留めます。 (例:xxxxxxxxxxx.cloudfront.net)
  • AWSマネージメントコンソールからQuickSightを開き、右上の人型アイコンをクリックし、[QuickSightの管理]をクリックします。
  • ドメインと埋め込みセクションでドメインを追加しホワイトリストに登録します。ドメインは"https://“を付けて登録します。
    (ホワイトリスト入力の例:https://xxxxxxxxxxx.cloudfront.net)

Alt text

埋め込みデモページへのアクセス

埋め込みデモページへのアクセスURLはCloudFormationの出力QSSampleEmbedUrlに表示されています。該当のURLを開くことで埋め込みデモページが開きます。

(具体例) https://xxxxxxxxxx.cloudfront.net/qsembedded.html

初期画面

初期画面では埋め込みダッシュボード、埋め込みコンソールを選択するプルダウンが表示されます。 Alt text

埋め込みダッシュボード

左プルダウンメニューを選択することで埋め込みダッシュボードを表示します。

Alt text

埋め込みコンソール

右プルダウンメニューを選択することで埋め込みコンソールを表示します。 Alt text

参考情報

Lambdaコード

以下は、今回のLambdaのコードです。

ダッシュボード埋め込み - QSGetDashboardEmbedUrl

def lambda_handler(event, context):
  #Implementation

  import urllib, json, sys, os, base64, boto3, botocore

  #Read in environment variables
  awsAccountId = os.environ["AwsAccountId"]
  domainName = os.environ["DomainName"]

  #Read in the values passed to Lambda function
  QSuserName = event['queryStringParameters']['QSuserName']
  QSnameSpace = event['queryStringParameters']['QSnameSpace']
  identityRegion = event['queryStringParameters']['identityRegion']
  dashboardId = event['queryStringParameters']['dashboardId']
  dashboardRegion = event['queryStringParameters']['dashboardRegion']
  resetDisabled = bool(event['queryStringParameters']['resetDisabled'])
  undoRedoDisabled = bool(event['queryStringParameters']['undoRedoDisabled'])

  userName = QSuserName
  namespace = QSnameSpace

  UserArn = "arn:aws:quicksight:"+identityRegion+":"+awsAccountId+":user/"+namespace+"/"+userName
  
  print(UserArn)

  quickSight = boto3.client('quicksight')

  #Generate Embed url
  response = quickSight.get_dashboard_embed_url(
                  AwsAccountId = awsAccountId,
                  DashboardId = dashboardId,
                  IdentityType = 'QUICKSIGHT',
                  UserArn = "arn:aws:quicksight:"+identityRegion+":"+awsAccountId+":user/"+namespace+"/"+userName,
                  SessionLifetimeInMinutes = 600,
                  UndoRedoDisabled = undoRedoDisabled,
                  ResetDisabled = resetDisabled
              )

  return {
          'statusCode': 200,
          'headers': {"Access-Control-Allow-Origin": domainName},
          'body': json.dumps(response)
        }

コンソール埋め込み - QSGetSessionEmbedUrl

def lambda_handler(event, context):
  #Implementation

  import urllib, json, sys, os, base64, boto3, botocore

  #Read in environment variables
  awsAccountId = os.environ["AwsAccountId"]
  domainName = os.environ["DomainName"]

  #Read in the values passed to Lambda function
  QSuserName = event['queryStringParameters']['QSuserName']
  QSnameSpace = event['queryStringParameters']['QSnameSpace']
  identityRegion = event['queryStringParameters']['identityRegion']
  dashboardId = event['queryStringParameters']['dashboardId']
  dashboardRegion = event['queryStringParameters']['dashboardRegion']
  resetDisabled = bool(event['queryStringParameters']['resetDisabled'])
  undoRedoDisabled = bool(event['queryStringParameters']['undoRedoDisabled'])

  userName = QSuserName
  namespace = QSnameSpace

  entryPoint = '/start/favorites'

  UserArn = "arn:aws:quicksight:"+identityRegion+":"+awsAccountId+":user/"+namespace+"/"+userName
  
  print(UserArn)

  quickSight = boto3.client('quicksight-cstm')

  #Generate Session Embed url
  response = quickSight.get_session_embed_url(
                        AwsAccountId = awsAccountId,
                        UserArn = "arn:aws:quicksight:"+identityRegion+":"+awsAccountId+":user/"+namespace+"/"+userName,
                        SessionLifetimeInMinutes = 15,
                        EntryPoint = entryPoint
                    )

  return {
        'statusCode': 200,
        'headers': {"Access-Control-Allow-Origin": domainName},
        'body': json.dumps(response)
        }

任意のアプリケーションでの認証からQuickSightのEmbed URL取得の例

Alt text