はじめに

QuickSight で作成したダッシュボードを、好きな Web アプリケーションに埋め込むことが出来ます。自分たちで実装する時と比べて、工数が削減でき、他の大事なお仕事に時間を費やすことが出来ます。

QuickSight でワンクリック埋め込み (1-click embedding) 機能が追加されました。今までの埋込機能は、埋め込み用 URL をアクセスのたびに動的に生成する仕組みが必要で、生成するための Lambda や EC2 などのコンピューティングリソースが必須でした。新たに作成されたワンクリック埋め込み (1-click embedding) では、Lambda や EC2 のバックエンドサーバーを準備しなくても埋め込みが出来るようになりました。

詳細は次の Blog で紹介されています。
https://aws.amazon.com/jp/blogs/news/embed-interactive-dashboards-in-your-apps-and-portals-in-minutes-with-amazon-quicksights-new-1-click-embedding-feature/

また、1-click embedding に関する AWS Document です。
https://docs.aws.amazon.com/quicksight/latest/user/embedded-analytics-1-click.html

今回の記事は、このワンクリック埋め込みを検証してみた内容になっています。

わかったこと

この検証を通じてわかったことを冒頭に記載します。ここは読み飛ばしてもらって大丈夫です。

ワンクリック埋め込みについて
- 事前に説明しているとおり、バックエンドサーバーが不要で埋め込みが出来るので、より簡単に埋め込みができるようになりました。
Edition について
- QuickSight の Enterprise Edition で利用できます。Standard Edition では利用できません。
新規ユーザー登録について
- ユーザーやグループの権限を事前に設定するのが、基本的な考え方になっているはずです。権限設定周りを自動化していきたい場合、従来の埋込方法を利用してバックエンドサーバーを用意して自動化していく方法があります。
SaaS 的な複数 IdP について
- ワンクリック埋め込みに限った話ではないですが、QuickSight で SP Initiated SSO をする場合は、1個の IdP しか登録できません。SaaS のように複数の会社に提供するサービスでは、複数の IdP を使う場合があります。この場合、IdP Initiated SSO を使えば利用出来そうな気がしますが未調査です。時間があれば見ていきたいと思います。

前提条件

QuickSight と、Azure AD (SAML を使った Identity Provider) 間で連携済みの環境で行います。もちろん、SAML を使わずに QuickSight のローカルユーザーを使ってワンクリック埋め込みも可能です。

また、QucikSight 側で SP initiated SSO の設定を入れている状態です。この設定をONにすることで、ワンクリック埋め込みでログインする際に、IdP に飛ばされるようになります。

ワンクリック埋め込み用の Code を生成

まず、ワンクリック埋め込み用の Code を生成していきます。埋め込みたい Dashboard を選択します。

右上の Share から Share dashboard を選択します。

この Dashboard の権限設定を行う画面に変わります。この Dashboard は、既に admin-group01 というグループにアクセス権限が付与されている環境です。今回の記事で利用するユーザーは、この admin-group01 に参加しており、適切な権限が付与されています。

画面上にある Copy embed code をクリックします。

すると、自動的にクリップボードに埋め込み用のコードがコピーされます。

iframe 用のコード
width や height が指定されている
src が埋め込み用のダッシュボードが指定されている

    <iframe
        width="960"
        height="720"
        src="https://ap-northeast-1.quicksight.aws.amazon.com/sn/embed/share/accounts/xxxxxxxxxxxx/dashboards/97acc558-1bfc-4e39-93cd-5aca9153fab0">
    </iframe>

HTML を準備して S3 + CloudFront で WebSite Hosting

適当に埋め込み用の Web サイトを準備します。HTML ファイルを準備して、S3 と CloudFront で WebSite Hosting をしていきます。

用意する HTML ファイルはこんな感じです。body に iframe を埋め込んだだけの単純な Web ページです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <title>QS 1 click 埋込</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>
    <h1>QuickSight 1 click 埋込</h1>
    <iframe width="960" height="720"
        src="https://ap-northeast-1.quicksight.aws.amazon.com/sn/embed/share/accounts/xxxxxxxxxxxx/dashboards/97acc558-1bfc-4e39-93cd-5aca9153fab0">
    </iframe>
</body>

</html>

適当に S3 Bucket 作成します。

HTML ファイルをアップロードします。

この S3 を Origin にする CloudFront Distribution を作成します。

Origin に作成した S3 を指定します。

Default root object として、格納した HTML ファイル名を指定して Create を押します。

CloudFront Distribution が Deploy 開始されます。

CloudFront の動作確認

Deploy 完了後、正常に HTML を確認できるか表示してみます。
https://d3hpwbtr9654lk.cloudfront.net/

はい、画像の通り HTML は表示できました。QuickSight の部分は表示されていないので、ここの設定を進めていきます。

QuickSight でドメイン許可設定

QuickSight の設定の中で、どのドメインからの埋込を許可するか指定できます。今回は、CloudFront のドメインになるので、次の設定をしていきます。

末尾のスラッシュがあるとエラーになるので、末尾にスラッシュは入れない

https://d3hpwbtr9654lk.cloudfront.net

追加された状態です。

ワンクリック埋め込みの動作確認

再び、CloudFront のページを表示します。
https://d3hpwbtr9654lk.cloudfront.net/

ポップアップがブロックされた旨が表示されるので、許可します。

もう一度アクセスすると、ポップアップが表示されます。ここで、アクセスしたい QuickSight のアカウント名を入力します。

Azure AD と連携しているため、自動的に Azure AD によるログイン画面に切り替わります。Azure AD 上のユーザー名を入力します。

パスワードを入力します。

表示されました！

その他検証

既に Azure AD ログイン済みの場合

既に Azure AD にログイン済みの場合、ユーザーID/パスワードの入力がスキップされ、自動的に埋め込みが表示されます。便利ですね。

ユーザーに権限がない場合

Azure AD でログインしたユーザーに、該当のダッシュボードを表示する権限がない場合、表示されません。事前に適切な権限設定が必要です。

全ユーザーにアクセス許可

Dashboard を Share する際に、左下の Everyone in this account を ON にすると、全ユーザーにアクセス権を付与できます。

自己プロビジョニング

QuickSight では、IAM を使った自己プロビジョニングが出来ます。今回の検証した環境だと、ワンクリック埋め込みでは自己プロビジョニングが正常に動作しませんでした。このあたりはまた時間があるときに見ていきます。

SSO を OFF

QuickSight の設定で、SSO に関する設定を OFF にしてみると

ポップアップが表示されますが

ローカルユーザーの認証に切り替わります。

参考URL