Qlik Sense マッシュアップ開発 - SaaS版とWindows版でJWTによる認証

1. クリックテック・ジャパン株式
会社
2023/04/11
Qlik Sense マッシュアップ開発
- SaaS版とWindows版でJWTによる認
証

2. 2
2
マッシュアップについて

3. 3
3
3
Qlik Senseのマッシュアップ(Mashup)機能とは?
• マッシュアップでは、Qlik Senseアプリのビジュアライゼーションや、Qlik
Engineと通信する機能をWebサイトに組み込むことが可能
WebページがQlikのJavaScriptライブラリ群を読み込み、Qlik SenseのAPIを利用して、既存ア
プリのシート全体や個々のチャートの埋め込み、項目の選択、集計データ(HyperCube)の生成・
取得なども可能
• エクステンションを開発してQlik Senseサーバーにインストールする必要は無く、
Qlik Senseを活用した独自のWebページを実装可能
• WebからQlik Senseのリソースにアクセスするには、Qlik Senseに対する認証は必
要!!
OpenID ConnectやSAMLによるログインの他、JWT(JSON Web Token)による認証情報の送信
も可能!!

4. 4
4
JWT認証について

5. 5
5
5
通常の認証と、JWT認証
通常、Qlik Sense SaaSでは、OpenID Connectをサポートする外部IdP(Identity Provider,認
証システム)を利用して、インタラクティブなログイン処理(SSO)や、ユーザー情報の取得を行い
ます。
Qlik Sense Enterprise for Windowsでも、SAMLやOpenID Connectをサポートする外部IdP
を利用して、インタラクティブなログイン処理(SSO)や、ユーザー情報の取得を行えるほか、
Qlik SenseのTicket APIを利用してユーザー独自の認証システムとQlik Senseの認証システムを
連携(URLにパラメータを付加)させることも可能です。
ただし、マッシュアップのようにQlik Sense APIを利用する場合、外部IdPを利用せずに、Web
ページ内から送信するJWTデータとその中のユーザー情報を利用して認証を行うことで、ユー
ザー独自の認証システムとQlik Senseの認証システムを連携させることが可能です。
ただし、JWT認証を利用するには、以下の作業が必要になります。
 JWTのために、OpenSSLで予め公開鍵(証明書)と秘密鍵を生成
 Qlik Sense SaaSの管理コンソールの「IDプロバイダー」で「JWT」の設定を追加
 Qlik Sense Enterprise for WindowsのVirtual Proxyの「Authentication」で「JWT」を設定
 プログラミング言語とライブラリを使って、ユーザー独自の認証システムの情報を基にして、
JWTデータを生成
 Webページ内からQlik Sense APIをJWTデータをセットして呼び出し、認証を成功(Cookieを取
得)

6. 6
6
Qlik Sense SaaS版 の場合

7. 7
7
7
• 管理コンソールで「ウェブ統合」を作成して、IDを生成
 マッシュアップのHTMLコンテンツにアクセスする際のWebサーバーのOriginを登録(例:
https://webserver)
 https://developer.mozilla.org/ja/docs/Glossary/Origin
 CORS対策で、Webブラウザで参照しているアドレスからのみテナントのQlik APIにアクセスでき
る
 レスポンスヘッダ “access-control-allow-origin: https://webserver”
マッシュアップ用にSaaSのテナントを設定
このID文字列をJavaScriptで利用

8. 8
8
8
• 必要に応じて、管理コンソールで「Content Security Policy」を追加
 マッシュアップのHTMLコンテンツにアクセスする際のWebサーバーのOriginを登録(例: webserver)
 https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy
 Webブラウザが<iframe>タグでチャートなどをロードする場合には、frame-ancestors の設定が必要
 レスポンスヘッダ “content-security-policy: ...; frame-ancestors ... webserver ...; ...”
マッシュアップ用にSaaSのテナントを設定(続き)

9. 9
9
9
JWT用の証明書・秘密鍵の生成と、IDプロバイダーの
作成
参考: qlik.dev >> Home >> Tutorials >> Create Signed Tokens for JWT Authorization
https://qlik.dev/tutorials/create-signed-tokens-for-jwt-authorization
OpenSSLコマンドを利用して、公開鍵(証明書,.cer)と秘密鍵(.pem)を生成
$>openssl genrsa -out privatekey.pem 4096
$>openssl req -new -x509 -key privatekey.pem -out publickey.cer -days 1825
証明書(必須!!) - 作成した公開鍵のPEM文字列
発行者(必須!!) - JWTを発行したアプリを識別する値
キーID(必須!!) - JWTデータに付属させるアプリ識別用
の値
発行者とキーIDは、JWTライブラリを利用してJWTデー
タを生成する際に指定して、一致させる必要がありま
す!!

10. 10
10
10
Node.jsでWebページ – JWT認証でマッシュアップ
JWTデータの生成に「Auth0社のjsonwebtokenパッケージ」を利用
 https://www.npmjs.com/package/jsonwebtoken
JWTに必要なデータ
 jti:JWTのユニーク値
 iat:発行時間
 sub:IdPサブジェクト
 subType:user
 name:名前
 email:メールアドレス
 email_verified:有効
 groups:グループ情報
JWTの署名に必要なもの
 署名用の証明書(秘密
鍵,.pem)
 kid:キーID
 iss:発行者
 exp:失効時間
 nbf:有効開始時間
 aud:固定値

11. 11
11
11
Node.jsでWebページ – JWT認証でマッシュアップ
(続き)
...
http(s)://localhost/....
Qlik SenseのJavaScriptファイル
とCSSファイルは認証前でも読み込
める!!

12. 12
12
12
Node.jsでWebページ – JWT認証でマッシュアップ
(続き)

13. 13
13
13
Node.jsでWebページ – <iframe>でシート埋め込み
http(s)://localhost/....

14. 14
14
14
PHPでWebページ – JWT認証でマッシュアップ
JWTデータの生成に「Firebase(Google)のPHP-JWTライブラリ」を利用
 https://github.com/firebase/php-jwt
http(s)://localhost/mashup_jwt.php

15. 15
15
15
RubyでWebページ – JWT認証でマッシュアップ
JWTデータの生成に「JWTパッケージ」を利用
 https://github.com/jwt/ruby-jwt
http(s)://localhost/mashup_jwt.rb

16. 16
16
16
PythonでWebページ – JWT認証でマッシュアップ
JWTデータの生成に「PyJWTライブラリ」を利用
 https://github.com/jpadilla/pyjwt
http(s)://localhost/cgi-bin/mashup_jwt.py

17. 17
17
17
GoでWebページ – JWT認証でマッシュアップ
JWTデータの生成に「jwtライブラリ v4」を利用
 https://github.com/golang-jwt/jwt
http(s)://localhost/....

18. 18
18
18
ASP.NETでWebページ – JWT認証でマッシュアップ
JWTデータの生成に「Jwt.Netパッケージ」を利用
 https://www.nuget.org/packages/JWT
http(s)://localhost/....

19. 19
19
19
ASP.NETでWebページ – JWT認証でマッシュアップ
(続き)
Jwt.Netパッケージは、JWTの署名時に「PKCS#12形式(.pfx)の証明書」を必要とします。
OpenSSLコマンドを利用して、公開鍵(.cer)と秘密鍵(.pem)からJWTデータ署名用のPKCS#12形式
(.pfx)を生成
$>openssl genrsa -out privatekey.pem 4096
$>openssl req -new -x509 -key privatekey.pem -out publickey.cer -days 1825
$>openssl pkcs12 -inkey privatekey.pem -in publickey.cer -export -nodes -out cert.pfx -passout pass:

20. 20
20
20
JavaでWebページ – JWT認証でマッシュアップ
JWTデータの生成に「Auth0社のjava-jwtライブラリ」を利用
 https://github.com/auth0/java-jwt
http(s)://localhost/....

21. 21
21
21
JavaでWebページ – JWT認証でマッシュアップ(続
き)
Java標準のjava.securityパッケージは、JWTの署名時に「PKCS#8形式(.DER)の公開鍵と秘密
鍵」を必要とします。
OpenSSLコマンドを利用して、公開鍵(.cer)と秘密鍵(.pem)から、 JWTデータ署名用のPKCS#8
形式の公開鍵(.der)と秘密鍵(.der)を生成
$>openssl genrsa -out privatekey.pem 4096
$>openssl req -new -x509 -key privatekey.pem -out publickey.cer -days 1825
$>openssl pkcs8 -topk8 -inform PEM -outform DER -in privatekey.pem -out privatekey.der -nocrypt
$>openssl rsa -in privatekey.pem -pubout -outform DER -out publickey.der

22. 22
22
Qlik Sense Enterprise
for Windows の場合

23. 23
23
23
JWT用の証明書・秘密鍵の生成
OpenSSLコマンドを利用して、公開鍵(証明書,.cer)と秘密鍵(.pem)を生成
$>openssl genrsa -out privatekey.pem 4096
$>openssl req -new -x509 -key privatekey.pem -out publickey.cer -days 1825

24. 24
24
24
• 必要に応じてQMCでVirtual Proxy(JWTでのアクセス用URLパス)を作
成・設定
例えば jwt という名前のVirtual Proxyを追加
マッシュアップ用にVirtual Proxyを設定

25. 25
25
25
• JWT認証用にAUTHENTICATIONの各項目を設定
Authentication method: JWT
JWT certificate: 公開鍵(PEM形式)の文字列
JWT attribute for user ID: JWTデータ内のユーザー名用属性(例: userid)
JWT attribute for user directory: JWTデータ内のユーザーディレクトリ用属性(例:
userdirectory)
Intended audience (aud attribute): JWTデータ内の秘密のaud属性(例: 112adams)
マッシュアップ用にVirtual Proxyを設定(続き)

26. 26
26
26
• 必要に応じて、Webブラウザがリソースをロードする際のセキュリティ
設定を追加
<iframe>の読み込みとCookie送信のために、Cookie属性に”SameSite=None”を追加
CORS(Cross-Origin Resource Sharing)用にHTTPレスポンスヘッダを追加
Access-Control-Allow-Origin: *”
マッシュアップ用にVirtual Proxyを設定(続き)

27. 27
27
27
PHPでWebページ – JWT認証でマッシュアップ
JWTデータの生成に「Firebase(Google)のPHP-JWTライブラリ」を利用
 https://github.com/firebase/php-jwt
JWTに必要なデータ
 jti:JWTのユニーク値
 iat:発行時間
 userid:User ID
 Userdirectory:User
directory
 name:名前
 email:メールアドレス
 groups:グループ情報
JWTの署名に必要なもの
 署名用の証明書(秘密鍵 .pem)
 exp:失効時間
 aud:固定値

28. 28
28
28
PHPでWebページ – JWT認証でマッシュアップ(続き)
Qlik SenseのJavaScriptファイ
ルとCSSファイルは認証前には
読み込めないので、コメントアウ
ト!!
Qlik SenseのWindows版には、
ログイン専用のエンドポイントが
無いので、Hubへのアクセスを試
みる!!

29. 29
29
29
PHPでWebページ – JWT認証でマッシュアップ(続き)
Qlik SenseのJavaScriptファ
イルとCSSファイルは認証後
(Cookie取得後)に動的に読み
込む!!
https://localhost/mashup・・・.php

30. 30
30
30
PHPでWebページ – <iframe>でシート埋め込み
https://localhost/mashup・・・.php

31. 31
31
その他の情報

32. Qlik SenseのJWTに関するWebサイト
• Qlik Developer Portal(Qlik Cloud): Home >> Authenticate >> JSON web tokens
 https://qlik.dev/authenticate/jwt/implement-jwt-authorization
• オンラインヘルプ: Qlik Sense Enterprise on Windows の管理 >> JWT 認証
 https://help.qlik.com/ja-JP/sense-
admin/February2023/Subsystems/DeployAdministerQSE/Content/Sense_DeployAdminister/
QSEoW/Administer_QSEoW/Managing_QSEoW/JWT-authentication.htm
• Qlik Sense SaaS版のマッシュアップのサンプル(GitHub)
 https://github.com/ttcodegear/mashup_for_qse_saas
• Qlik Sense Enterprise for Windowsのマッシュアップのサンプル(GitHub)
 https://github.com/ttcodegear/mashup_for_qseow