このエントリーをはてなブックマークに追加
LinkedIn にシェア

はじめに

今回はSession APIによる認証と、外部サイトのWebページにQlik Senseチャートを埋め込む方法をご紹介します。

Qlik Senseでマッシュアップのサイトを作成のエントリでQlik Senseの部品と、ウェブ部品とを組み合わせたマッシュアップサイトを作成する手順をご紹介しましたが、そこでは認証の仕組みには触れませんでした。実際には外部Webサイトに表示されたQlik Senseチャートを参照するには、参照するユーザーはQlik Senseに認証されている必要があります。Qlik Senseでは幾つか認証方式が用意されていますが、ここではSession API認証のサンプルコードを利用して、その仕組みを見ていきたいと思います。

ここでは、サンプルとして公開されている「Session API Test Module」利用します。「Session API Test Module」を外部Webサーバーとして見立てて、ここでログオンを行うと裏でQlik Sense EnterpriseにSession IDの登録を行い、併せてSession情報を含むCookieをユーザーのブラウザに設定します。Qlik Sense Enterpriseは登録されたSession IDとCookieのSession情報を照合してアクセス許可をユーザーに対して与えます。

image

その上で外部Webサーバーのページにiframeを使ってQlik Senseチャートを部品として埋め込み、ユーザーが外部Webサーバー上でチャートを参照可能とします。

image

Session API Test Moduleの導入

Session API Test Moduleは以下のサイトからダウンロードが可能です。

＞Qlik Branch: Session API Test Module

image

Session API Test Moduleの導入方法は以下のステップとなります。

  • http://nodejs.org/ からnode.jsをインストールします。
  • SessionAPITestModule.zipを上記サイトからダウンロードします。
  • Qlik Sense Enterprise上で SessionAPITestModuleを解凍します。
  • コマンドプロンプトを起動し、解凍したSessionAPITestModuleのディレクトリに移動します。
  • 「npm install」のコマンドを実行します。
  • QMC上で「test」のパスワードを付加して証明書をエクスポートします。
  • C:\ProgramData\Qlik\Sense\Repository\Exported Certificates\[host] のディレクトリから証明書を解凍したSessionAPITestModuleのディレクトリにコピーします。
  • 解凍したSessionAPITestModuleディレクトリ上に保存ｓれている「SessionAPITestModule.js」をエディタで開き、RESTURIのURIを修正します。
  • 解凍したSessionAPITestModuleディレクトリ上で「node SessionAPITestModule.js」のコマンドを実行します。
  • ブラウザを開き、https://[host]:8190/ にアクセスします。

尚、上記の手順は以下のエントリでご説明している手順と「AccessControlTestModule」を「SessionAPITestModule」と読み替えて頂ければほとんどが共通となっています。必要に応じてご参照下さい。

＞チケット認証でのユーザー切り替え画面設置: Qlik Sense Enterprise

Session API Test Moduleの動作確認

ブラウザから「https://<host>:8190/」にアクセスすると以下の画面が表示されます。ユーザーの「Login」リンクをクリックします。

image

以下の様にSession IDが設定された旨のメッセージが表示されます。

image

「C:\ProgramData\Qlik\Sense\Log\Proxy\<マシン名>_Audit_Proxy.txt」からProxyのAudit Logファイルを開きます。以下の様にSession IDが登録されたことがログに記録されていることを確認します。

image

次にブラウザのCookie情報を確認します。（以下はChromeブラウザでのCookie情報の確認方法になります。）

  • ブラウザのツールバーにあるChromeメニューをクリックします。
  • [設定]を選択します。
  • [詳細設定を表示]をクリックします。
  • [すべてのCookieとサイトデータ]をクリックします。
  • 以下の様に、「X-Qlik-Session」という名前のCookieが追加されており、Session IDが設定されていることが確認できます。

image

Session API Test Moduleトップ画面に戻り、「Access Qlik Sense with current session」をクリックします。

image

Qlik Senseハブの画面が開きます。

image

尚、以下の様なエラーが表示された場合にはログオンしたユーザーにトークンが付与されていませんので、QMCの「License and tokens」からユーザーにトークンを付与して再度ログインを実行し直してください。

image

Session ID登録の流れについての解説

Session APIを利用したSession追加を行うメソッドの仕様は以下となっています。

＞Session API: Add Session

Postmanを使って試すQlik SenseのサーバーAPIのエントリでは、Postmanと呼ばれるRESTクライアントツールを使ったQlik Sense APIのテスト方法をご説明しました。ここではまず、PostmanでのSession ID登録の流れを確認し、その上でそれらの処理に対応するSession API Test Moduleのコードを確認したいと思います。

Postmanを使ったSession ID登録

Sessionを追加するために「https://<host>:4243/qps/session」のURIに対してPOST送信を行う設定を行います。その際、XSRF（クロスサイトリクエストフォージェリー）対策のためにxrfkeyとx-qlik-xrfkeyのパラメタとヘッダー、またContent-Typeをそれぞれ定義します。

image

送信するリクエストのBody内にSession登録を行うユーザーのUser Directory、User ID、Session IDを定義します。

image

以上の形でURIとBodyを定義してリクエストを送信し、Session IDの登録が成功すると、以下の様な返答を受け取ります。

image

Session API Test ModuleでのSession ID登録

上記で確認したPostmanでのSession ID登録に対応する処理は、SessionAPITestModuleディレクトリに存在するSessionAPITestModule.jsファイル内のcreatesession関数内で実装されています。

まず、先頭の処理では送信するURIの設定、POSTメソッドの指定、、XSRF対策のためにxrfkeyとx-qlik-xrfkeyのパラメタとヘッダーの定義などを行っています。

image

この処理はPostmanでは実装されていませんでしたが、Session IDなどを含んだCookieをクライアント側のブラウザに送信・設定を行うための処理を定義しています。クライアントはこれをSession Cookieとして保持し、Qlik Sense Enterpriseへのアクセス時のセッション管理に利用されます。

image

最後にJSON形式でUser Directory、User ID、Session IDを格納し、APIに対して送信を行います。

image

外部WebページへのQlik Senseのシングルオブジェクトの埋め込み

では、最後にQlik Senseのチャートを外部Webページに埋め込んでみたいと思います。ここで紹介する例では、Everyoneストリームに公開されたExecutive Dashboardを利用します。

image

Qlik Sense Enterpriseのブラウザ上で「https://localhost/single/」にアクセスすると「Single configurator」の画面が表示されます。

image

「Executive Dashboard」を選択して外部Webサイトに埋め込む任意のチャートを選択し、「Copy url」をクリックしてURLをコピーします。

image

先ほど確認したcreatesession関数内部の赤線を引いた個所に、以下のiframeを追加します。URLの部分は全ステップでコピーしたURLをコピーして下さい。

<br /><iframe height='300px' width='300px' src='https://localhost/single/?appid=93f2c937-a99c-42ba-9817-b036db4868ea&obj=BHTXyNM'></iframe>

image

SessionAPITestModule.jsを再起動してログオンを行うと、以下の様にチャートが画面に埋め込まれて表示されます。

image

まとめ

今回はSession API Test Moduleを利用してSession APIによる認証方法を確認しました。その上で、Single Configuratorを利用してQlik SenseチャートのシングルオブジェクトへのURLを抽出し、外部Webページに埋め込む方法を確認しました。