こんにちは！内藤です！
札幌は一気に冬になりました。雪かきで腰が痛いです。
先日 Tableau Cloud のビューを JWT認証と Web Component を使用してシステムに埋め込む機会があったので、情報をまとめます。
参照URL
必要な情報は、公式のドキュメントに揃っています。
- https://help.tableau.com/current/pro/desktop/ja-jp/embed.htm
- https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_auth.html
- https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_auth.html#pass-the-jwt-to-the-tableau-web-component
- https://help.tableau.com/current/online/en-us/connected_apps_direct.htm
- https://help.tableau.com/current/online/en-us/connected_apps_direct.htm
- https://help.tableau.com/current/api/embedding_api/en-us/index.html
- https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_configure.html
埋込手順
Tableau Cloud 側の設定
JWT認証を使用するために、Tableau Cloud 側で連携アプリの設定を作成する必要があります。
Tableau Cloud の「設定」メニューをクリックして
「連携アプリ」タブをクリックします
「新しい連携アプリ」コンボボックスから「直接信頼」を選択します。
出てきたダイアログで、必要な設定を入れます。
「連携アプリの名前」は管理用の名前です。わかりやすい名前をつけてください。
「適用先」は連携アプリにアクセスを許す範囲です。基本的には「１つのプロジェクトのみ」を指定することになると思います。
「プロジェクト名」は連携アプリにアクセスを許す Tableau Online 上のプロジェクトを選択します。
連携アプリ設定が作成できたら、表示されたクライアントIDをコピーして記録しておきます。
次に、JWTの作成に使用するシークレットを新規作成します。
作成したシークレットのIDと値をコピーして記録しておきます。
作成直後の連携アプリは無効化されています。
ひとつ前の画面に戻って、作成した連携アプリにチェックをつけ、「アクション」で「有効」を選択して有効化します。
埋込側の設定
JWT作成部分
公式にpythonのサンプルコードがあるので、そのまま使用できます。
import jwt
import uuid
connectedAppClientId = "<Tableau Cloud 上でコピーしたクライアントID>"
connectedAppSecretId = "<Tableau Cloud 上でコピーしたシークレットID>"
connectedAppSecretKey = "<Tableau Cloud 上でコピーしたシークレットの値>"
user = "<Tableau Cloud にログインするユーザ名>"
token = jwt.encode(
{
"iss": connectedAppClientId, # クライアントID
"exp": datetime.datetime.utcnow() + datetime.timedelta(minutes=5), # 有効期限
"jti": str(uuid.uuid4()), # ユニークなID
"aud": "tableau",
"sub": user, # Tableau Cloud にログインするユーザ名
"scp": ["tableau:views:embed", "tableau:metrics:embed"]
},
connectedAppSecretKey, # シークレットの値
algorithm = "HS256",
headers = {
'kid': connectedAppSecretId, # シークレットID
'iss': connectedAppClientId # クライアントID
}
)JWTの項目には、次の値を設定します。
| 項目名 | 設定値 |
|---|---|
| iss | Tableau Cloud 上でコピーしたクライアントID |
| exp | 有効期限。UTCで指定します |
| jti | 適当にユニークな文字列を指定します |
| aud | 固定の文字列"tableau"を指定します |
| sub | 連携アプリの設定をした際に Tableau Online にログインしたユーザIDを指定します |
| scp | 埋込で参照するスコープを指定します |
| kid | Tableau Cloud 上でコピーしたシークレットID |
HTML側では、上記のJWTを Tableau Web Component に渡します。
<tableau-viz id="tableauViz"
src='<表示するビューのURL>'
hide-tabs="false"
toolbar="hidden"
token="<作成したJWT>">
</tableau-viz>
<script type="module" src="https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js"></script> 表示するビューのURLは、Tableau Cloud にログインしてビューを表示している際のURLそのものになります。
Web Component には他にもわたせるオプションがあります。
終わりに
思ったよりも簡単に Tableau Clound のビューが埋め込めました。
BIツールとしては Tableau は各段に廉価なので、連携する機会が増えるかもしれません。