Lookerで作ったダッシュボードを認証機能がある外部Webサイトに埋め込む方法（SSO Embedding） #looker

君の瞳にエンベデッド

「カスタマーストーリー」を支えるツール特集

#ビッグデータ

#ビジネス・アナリティクス

#Looker

たまちゃん

2019.12.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

大阪オフィスの玉井です。

BIツールで作ったグラフやダッシュボードは、基本的にそのBIツールじゃないと見れません。しかし、ダッシュボード等の作成はBIツールで行いたいが、完成したダッシュボード自体は別のWebサイトに埋め込みたい…というニーズは結構あるのではないでしょうか。

各種BIツールのベンダーもそれはわかっているので、各社、外部サイトへの埋め込み機能を備えています。今回はLookerの埋め込み機能（特にSSO埋め込み）についてご紹介したいと思います。

Lookerダッシュボードを外部サイトに埋め込む方法

Lookerで作ったダッシュボードやLook等を、外部のWebサイトへ埋め込む方法の基本形の手順はめっちゃ簡単です。ダッシュボード等のURLにある文字列を追加してiframeとして表示するだけです。詳細は下記にまとまっています。

上記ドキュメントから一部抜粋します。例えば、埋め込みたいダッシュボードのURLが下記の場合、

https://instance_name.looker.com/dashboards/4

ある文言を追加してiframeに入れます。

https://instance_name.looker.com/embed/dashboards/4

<iframe src="https://instance_name.looker.com/embed/dashboards/4">

お気づきでしょうか。元URLに/embed/を入れるだけです。超簡単。

埋め込み時のレイアウトの調整等はダッシュボード右上のメニューから行えます。

下記エントリも併せて読みましょう。

これだけ見ると、「めっちゃ簡単やん。でも、認証とかそこらへんどうなってるん？」みたいな疑問が浮かぶと思います。その問いを解決するため、次の項に進みましょう。

埋め込みの3つの種類

下記エントリにまとまっています。

…とはいえ、今一度、ここで簡単にまとめてみます。Lookerの埋め込みの種類は3つあります。

パブリック埋め込み

誰でも見ることが出来る状態でダッシュボード等を埋め込みます。認証の類は一切不要ですが、誰でも見られるので、一部のユーザーにしか見せたくない内容だったりする場合は使えない方法となります。

プライベート埋め込み

基本的にはパブリック埋め込みと同じですが、最大の違いはLookerに対する認証が発生するということです。ダッシュボード等が埋め込まれたページを開いても、iframe部分（埋め込んでるところ）内にLookerの認証ページが表示されるイメージです。要するにLookerユーザーだけが閲覧できるようになります。

シングルサインオン（SSO）埋め込み

本エントリで扱う方法です。

誤解を恐れずザックリ簡単に言うと、プライベート埋め込みの認証部分をLookerではなく外部アプリケーションの認証で済ませるものになります。

これの何が嬉しいかというと、例えば自社が運営している会員制サイトがあったとして、そのサイトのページにSSO埋め込みすると、その会員制サイトへの認証（ログイン）をもって、Lookerの認証をスキップすることができます。つまり、ユーザー側はLookerを意識することなく、その会員制サイトに埋め込まれたダッシュボードを見ることができます。逆に言うと、その会員制サイトへの認証ができない限りは、埋め込んだダッシュボードも見ることはできません。Lookerダッシュボードを、あたかも、そのサイトの1コンテンツとして扱うことができます。

SSO埋め込みの手順

SSO埋め込み（を実践したとき）の仕組み

SSO埋め込みされたLookerのダッシュボードやLookは、下記の流れを経て表示されます。

※[レポート] ハンズオン/Looker埋め込み分析を行う5つのステップ – Looker：JOIN 2019 at San Francisco #looker #JOINdata ｜ Developers.IOより

ユーザーが外部Webサイト（Lookerのコンテンツを埋め込んだサイト）にアクセス
（Webサイトの）Webサーバーがユーザーを認証する
ユーザーは（埋め込んである）LookerのLookやダッシュボードをリクエストする（この時、Webサーバー側は、Looker用の暗号鍵を用いて、ワンタイムのLookerコンテンツ用のURLを生成する）
Lookerは、iframeに記述されたURL内の署名の内容が正しいか確認する
（署名が正しい場合）Webサーバーはスクリプトを実行し、iframe内のURLを生成する
ユーザーはWebブラウザでLookerコンテンツを閲覧できる
URLはセッション毎に1回きりなので、セッションが切れるとURLは無効となる

SSO埋め込みをする上で準備するもの

上記の仕組みを実現する上で、ユーザー側（LookerコンテンツをWebサイトに埋め込みたいと思っている人）は下記について準備する必要があります。

LookerコンテンツのURLを生成する部分の実装

SSO埋め込みの場合、他の埋め込みとは異なり、Webサイト側でワンタイムのURLを毎回生成する仕組みが必要となります。ですので、その部分をWebサイトに実装する必要があります。ユーザーの環境によるとは思いますが、基本的には、埋め込み先のWebサイトを担当しているエンジニアの力を借りることになると思います。

下記に、LookerのEmbed SDKに関するドキュメントがあります。Web担当のエンジニアは、これを参考にしつつ実装していく形になります（サンプルコードやデモもあります）。

Lookerで生成した暗号鍵

Webサイト側でワンタイムのURLを生成する際、Looker側で生成した暗号鍵を使用する必要があります（URLを偽造されたり改変されたりしないように）。

暗号鍵の発行はとっても簡単です。AdminページのEmbedメニューを開いて、Embed Authenticationを有効にしUpdateをクリック。Set Secretボタンが出てくるので、それを押して暗号鍵を入手します。

当然ですが、この鍵があると、URLを作成し放題になってしまうので、厳重に管理しましょう。

生成するURLのテストが出来るツール、あります

生成するURLには、非常に色々なパラメーターを渡すことができます（全てを解説はしませんが、一部については後述します）。

埋め込みを開発する中で、「このパラメータをこの値で設定してURLを生成したとき、どんな感じで見えるやろか？」ってのを、お手軽に確認したくなる時があるはずです、たぶん。そんな時は、いちいち実際に埋め込むんじゃなくて、公式のテストツールを使いましょう。

想定しているパラメータを指定して、実際にプレビューが見れるので便利です。また、このツールは静的なHTMLで出来ているので、ローカルで動かすことも出来ます。

LookerのSSO埋め込みのいいところ

WebサイトとLooker間で何か特別な設定をする必要がない

上記の仕組みを見た時、人によっては「LookerにWebサイトを登録する的な設定がいるのでは…？」と思いがちですが、そういう設定は特別な設定はありません。暗号鍵を出して、Webサイト側でURLを生成する際に使うだけです（基本的なネットワークの設定は必要かと思いますが）。

Lookerに事前にユーザーを用意する必要がない

上記の仕組みを見た時、人によっては「結局はLooker（のコンテンツ）を見ることになるのだから、予めLookerにユーザー登録をする必要があるのでは…？」と思いがちですが、事前にユーザーを用意する必要はありません。

埋め込んだLookerコンテンツが閲覧された時に、Lookerに自動的に外部ユーザーが追加されるようにできます。

渡せるパラメーターにexternal_user_idというものがあります。これを含んだURLでLookerコンテンが閲覧された時、この値が「SSO外部ユーザーID」としてLooker側に登録されます。

`external_user_id`とユーザー属性を組み合わせて柔軟な表現が可能

Webサイトにダッシュボードを埋め込む際の要件に「ログインしたユーザーによって、ダッシュボードに表示するデータを出し分けたい」というのは、よくある話です。この要件は、LookerのSSO埋め込みで簡単に実現できます。

SSO外部ユーザーを別途自動登録できるというのは前述しましたが、これもあくまで1ユーザーなので、もちろんユーザー属性（User Attribute）という概念もあります。ユーザー属性があるということは、埋め込みダッシュボードにおいても、下記が実現できます。

SSO埋め込みで指定できるパラメーターにuser_attributesがあるので、例えば「○○というセグメントのユーザーがログインした時は、user_attributesに○○という値を渡すように設定して、そのユーザー用のアクセスフィルターがかかるようにする」といった動作を実現することができます。

Lookerのダッシュボードは1つだけ用意して、表示するデータは外部Webサイトのログインユーザーによって出し分けるということが可能です。