Tableau Lightning Webコンポーネントのシームレスな認証を試してみた(Tableau Server版)

## 前提
・Salesforce246の新機能でリリースされたTableau Lightning Web コンポーネントのシームレスな認証機能
・Tableau Serverの対応バージョンは、確認が必要
・Salesforce管理者権限が必要
・Tableau Serverのhttps通信構成が必要

https://kb.tableau.com/articles/issue/if-a-view-in-the-tableau-lightning-web-component-uses-http-the-view-does-not-appear-and-displays-error-invalid-url-make-sure-the-link-to-the-tableau-view-is-using-https?lang=ja-jp

・Experience Cloud のみ: Tableau サイト名と URL をコンテンツ セキュリティ ポリシー (CSP) 信頼済みサイトとして設定します。詳細については、Salesforce ヘルプの「CSP 信頼済みサイトの管理」を参照してください。

https://help.salesforce.com/s/articleView?language=en_US&id=sf.csp_trusted_sites.htm&type=5&_ga=2.158304761.252605478.1698035934-1606455406.1697114981

## 参考ヘルプ
https://help.tableau.com/current/server/ja-jp/lwc_seamless_auth.htm

https://help.tableau.com/current/server/ja-jp/ssl_config.htm

https://help.tableau.com/current/server/ja-jp/distrib_lb.htm

https://help.tableau.com/current/server/ja-jp/connected_apps_eas.htm

## 手順
### 1.Salesforce側でTableau組み込みを設定
①Salesforceホーム画面の歯車→「設定」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/3d2d33f3-73b6-916a-d3f8-c81050717801.png)
②検索ボックスからTableauと入力し、「Tableau組み込み」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/7868ece8-6ea8-361f-afff-45220a8f0e47.png)
③
トークンベースのシングルサインオン認証を有効化：☑︎
Tableauユーザー ID 項目を選択：Tableauに渡すユーザ識別子を選択(Salesforce と Tableau でユーザー アイデンティティに一致するフィールドを選択)
発行者URL、JWKS URIをメモ帳にコピーしておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/14c619e7-c1d4-fcc5-aff7-f23884d29a5a.png)

### 2.Tableau Server側で連携アプリを設定
①Tableau ServerのTSMから「構成」→「ユーザーIDとアクセス」→「認可サーバー」にアクセスし、以下を設定し、「保留中の変更を保存」をクリック
埋め込みコンテンツのOAuthアクセスを有効にする：☑︎
発行URL：1-③でコピーした発行者URLをペスト
JWKS URI：1-③でコピーしたJWKS URIをペスト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/6f063ae6-7325-c4cd-1c4d-e2a3c3de5b0b.png)
②TSM右上の「保留中の変更」→「変更を適用して再起動」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/7fd3304c-4299-e3ad-1643-81d851eed15d.png)
③「確認」をクリックし、Tableau Serverを再起動する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/4aa5e880-f820-e277-7ea3-de55cecd9e2b.png)
### 3.Tabelau ServerのビューをSalesforceへ埋め込む(Tableau Server側)
①Tableau Serverから埋め込みたいビューを開く
②「共有」をクリックし、ビューの共有ウィンドウから、「リンクのコピー」をクリックし、メモしておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/7c242f22-9cce-c2b3-1a45-9b34274e7c67.png)
### 4.Tabelau ServerのビューをSalesforceへ埋め込む(Salesforce側)
①レコードページの歯車→「編集ページ」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/6f9c14a5-e5b2-14c5-a940-209ff2932a43.png)
②コンポーネントからtableauを入力し、「Tableauビュー」を画面にドラックアンドドロップする
③右側のTableauビュー設定で、以下を設定し、「保存」をクリック
TableauビューのURL：3-②の「リンクのコピー」
デフォルトの認証トークン：☑︎
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/d3b8b1f6-372a-d72f-bbe7-3b9b1e2b6303.png)
④フィルターを設定したい場合は、TableauとSalesforceのフィールドマッピングを設定
Tableauの詳細な検索条件：Tableauのフィールド名
Salesforceの詳細な検索条件：Salesforceの項目名
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/c845c425-1dad-fade-c142-b56124112f79.png)
⑤Tableau ServerのビューがSalesforce画面へ埋め込まれたことを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562390/924bfde2-746a-1b9f-cfdf-fbb5969d5719.png)

以上