QuickSight Dashboard のワンクリック埋め込み(1-click embedding)をやってみた : ユーザー認証あり

Last updated at 2024-01-19Posted at 2022-01-03

はじめに

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>