Future Tech Blog
フューチャー技術ブログ

SPA + Tableau Online + Auth0 SSO


はじめに

  • プロジェクトでTableauダッシュボードを組み込んだSPAを開発しています。
  • その際にPoCを実施したので、こちらで簡単にお試しできる手順を共有させていただきます。

内容

  • Tableau OnlineダッシュボードのSPA埋め込み with Auth0 SSOを最短でお試しできる手順になります。

前提

  • 事前にTableauアカウントと、Auth0アカウント および テナント作成は行なっているものとします。

手順

1. Auth0 login URL、メタデータ取得

Auth0のSAML Protocol URL(login URL)、メタデータを取得します。
メタデータはDLしておいてください。

2. Tableau設定

  1. サイトでのSAML認証の有効化
  2. TableauへのAuth0メタデータ(手順3で取得済)をインポート
  3. iFrame の埋め込みの有効化
  4. ユーザー追加(auth0 SSO有効)

3. Tableauメタデータ取得

Auth0の設定に使用する値が含まれたメタデータを取得します。

4. Auth0設定

Applicationsを作成します。
Applications → Regular Web Applications → Create

作成したApplicationのAddonsを設定します

Application Callback URL: http://localhost:3000 を設定
Setteingsは下記を設定

1
2
3
4
5
6
7
8
9
10
11
12
{
"audience": 前工程で取得したメタデータのentityIDを設定,
"mappings": {
"user_id": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier",
"email": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
"name": "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name"
},
"logout": {
"callback": 前工程で取得したメタデータのSingleLogoutServiceを設定,
"slo_enabled": true
}
}

5. Tableauの埋め込みコード取得

対象のダッシュボードへ移動 → 共有 → 埋め込みコードのコピー

6. サンプルアプリ組み込み

サンプルアプリへ実際に組み込みます

1
2
3
$ # サンプルアプリを自動生成します
$ # 任意のディレクトリで実行
$ npx create-next-app my-app

手順5で取得した埋め込みコードを整形します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
※ 次の工程でTableauのJSライブラリをロード時に読み込むように切り出す↓↓↓
<script
type="text/javascript"
src="https://us-west-2b.online.tableau.com/javascripts/api/viz_v1.js"
></script>
※ 次の工程でTableauのJSライブラリをロード時に読み込むように切り出す↑↑↑
<div class="tableauPlaceholder" style="width: 1440px; height: 712px;">
<object class="tableauViz" width="1440" height="712" style="display:none;"
><param
name="host_url"
value="https%3A%2F%2Fus-west-2b.online.tableau.com%2F"/>
<param name="embed_code_version" value="3"/>
<param name="site_root" value="&#47;t&#47;samltest3"/><param
name="name"
value="Superstore&#47;Overview"/><param
name="tabs"
value="yes"/><param name="toolbar" value="yes"/><param
name="showAppBanner"
value="false"
/></object>
</div>

上記の埋め込みコードを少し修正して、pages/index.jsに貼り付けます

  1. ロード時にTableauライブラリ読み込み
  2. styleに position: "absolute" を追加
  3. styleに display: "none" を追加
  4. ログインボタンを追加
my-app/pages/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { useEffect } from "react";

const Home = () => {
// ① ロード時にTableauのJSライブラリを読み込み↓↓↓
useEffect(() => {
const script = document.createElement("script");
script.src =
"https://us-west-2b.online.tableau.com/javascripts/api/viz_v1.js";
script.async = true;
document.body.appendChild(script);
}, []);
// ① ロード時にTableauのJSライブラリを読み込み↑↑↑
return (
<>
{/* ④ ログインボタンを追加 */}
<button
onClick={() => {
window.location =
{/* 手順3のSAML Protocol URLを設定 */}
"https://xxxxxx.auth0.com/samlp/xxxxxxxxxxxxxxxxxxxxxx";
}}
>
login
</button>
{/* ② styleにposition: "absolute"を追加 */}
<div
class="tableauPlaceholder"
style={{ width: "100%", height: "100%", position: "absolute" }}
>
{/* ③ style={{ display: "none" }}を追加 */}
<object
class="tableauViz"
width="1440"
height="670"
style={{ display: "none" }}
>
<param
name="host_url"
value="https%3A%2F%2Fus-west-2b.online.tableau.com%2F"
/>
<param name="embed_code_version" value="3" />
<param name="site_root" value="&#47;t&#47;samltest3" />
<param name="name" value="Superstore&#47;Overview" />
<param name="tabs" value="yes" />
<param name="toolbar" value="yes" />
<param name="showAppBanner" value="false" />
</object>
</div>
</>
);
};

export default Home;

7. アクセス

① サンプルアプリ起動

1
2
$ cd my-app
$ npm run dev

② localhost:3000にアクセス
③ ログインボタンを押下
④ Auth0 ログイン画面に遷移するのでログイン

localhostにリダイレクトされ、埋め込みのTableauダッシュボードが表示されました!🎉

終わりに

  • プロジェクトではこの後、cloudfront + S3の環境にデプロイしています。
  • また、SPA自体の認証もAuth0 SSOで行っており、 session、token管理をauth0のライブラリを使用して行っています。
  • こちらに関しては、機会がありましたら別途、紹介させていただけたらと思います。

関連リンク


関連記事: