【LTI】Chrome拡張機能「LTI Debugger」のすすめ

## はじめに
日本1EdTech協会 LTI部会の小針です。
日本1EdTech協会は、教育システム間のデータ連携の国際標準化団体 1EdTech Consortiumが管理している色々な技術標準の日本国内のユーザコミュニティです。
LTI部会は、様々な1EdTech関連技術標準のうち、特にLearning Tools Interoperability（以降LTI）のユーザグループになっています。

本記事では、LTIを使った通信の中身を確認するためのツールの1つとして、Chromeの拡張機能「LTI Debugger」について紹介します。
LTI Debuggerはデベロッパーツールの機能を拡張したもので、LTIを使った通信の中身を確認することに特化しており、この機能を追加することで通常のデベロッパーツールより通信内容の確認を簡単に行うことができるようになります。
また、Chromeの拡張機能であるため、他のHTTPキャプチャツールなどに比べて導入が容易である点もメリットかと思います。
逆にデメリットとして、あくまでデベロッパーツールの拡張であるため、別のタブやウィンドウに遷移する場合は元のタブの方しか確認できないという点があります。

まだLTIについて学び始めたばかりで、ひとまずLTIの具体的な通信内容を確認してみたいといった方には適したツールかと思うので、この記事を参考に活用していただければ幸いです。

※LTI DebuggerはLTI 1.3の策定に関わったPaul Grayさんによって開発されたものであり、信頼できるツールになります。
また、ソースコードもGithub上で公開されており、次のURLから確認することができます。
https://github.com/pfgray/lti-debugger


## 拡張機能の追加
手順を記載していますが、他のChrome拡張機能を追加する場合と同じ手順です。

1. 下記URLから拡張機能「LTI Debugger」のページにアクセスする。
https://chrome.google.com/webstore/detail/lti-debugger/cpjdeioljkbgkldnbojoagdoiggnlhll
1. リンク先に遷移後、右上の「Chromeに追加」をクリックする。
1. 画面上部にダイアログが表示されるため、「拡張機能を追加」を選択する。
1. ブラウザ右上にある拡張機能マークをクリックし、表示された拡張機能の中に「LTI Debugger」があることを確認する。
1. 追加したLTI Debuggerはデベロッパーツール上に追加されるため、「Ctrl + Shift + i」を押してデベロッパーツールを開く。
1. デベロッパーツールに「LTI Debugger」というタブが追加されていることを確認し、そのタブをクリックすると以下のような画面が表示される。

※手順1のLTI DebuggerのページやGoogle Chromeのトップページでは、デベロッパーツールを開いてもタブが表示されないため、それ以外のページにアクセスした上で確認してください。
![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3716430/bd720be2-1bb2-c113-8599-3b80586ea90a.png)


## プラットフォームとツールの準備
LTI Debuggerを使用するために、まずはLTI連携を行うためのプラットフォームとツールの準備が必要になります。今回は1EdTechの[LTI v1.3 Reference Implementation Test Tool](https://lti-ri.imsglobal.org/)を利用しました。
具体的な利用方法は次のURLを参考にしてください。
https://www.1edtechjapan.org/dt20221227

1EdTech以外では次のツールも利用できます。
saLTIre：https://saltire.lti.app/


## LTI Debuggerを使ってみよう
それでは実際にLTI Debuggerを使用した画面を見ていきます。
こちらがLTIを使った通信をLTI Debuggerで確認した画面になります。
![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3716430/e14894f7-8156-7207-2796-8fd01b085a1d.png)
通常のデベロッパーツールのNetworkタブで確認する場合とは異なり、LTIに関係する通信のみが表示され、Login/Redirect/Launchのようにどの段階の通信なのかが一目で把握でき、それぞれの具体的な通信内容を確認することができます。
一方で、表示される情報は最低限のものになっているため、一部表示されない情報もあります。この後、LTI Debuggerで確認できるパラメータについて説明するので、表示されない情報についてはそちらを参考にしてください。

LTI Debuggerの用途としては、LTI初学者が「LTIって具体的にどんなパラメーターがやり取りされているの？」といったケースで、ドキュメントと実際の通信内容を見比べながら学習することができます。


## 各パラメータの解説
ここからはLTI Debuggerを使って確認できた各パラメータについて、簡単に説明します。

### 1. Login
ここで言うLoginとは、OpenID Connect（以降OIDC）のInitiating Login from a Third Party（[1] 4章）のことです。LTIの認証はOIDCを基にしており、そこにLTI独自のパラメータを追加したものになっています。
![Login.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3725519/160b8a0e-0a61-2f42-7d4a-5f35e908141f.png)
##### 【OIDCで定義されているパラメータ】
- iss：JWTの発行者を識別するための識別子
- login_hint：認証サーバーに対してログインさせたいエンドユーザーを示すログイン識別子のヒント
- target_link_uri：認証後、クライアントがリダイレクトするように要求されたURL

##### 【LTI独自で定義したパラメータ】
- client_id：後続のLTIメッセージ・リクエストの認証に使用される認証サーバーのクライアントID（[2] 4.1.3章）
- lti_message_hint：login_hintと一緒に使用され、起動される実際のLTIメッセージに関する情報（ログイン開始リクエストに存在する場合、ツールは認証リクエスト時にそのまま戻さなければならない）
※lti_message_hintについては、LTI Debugger上では表示されませんが、デベロッパーツールのNetworkタブではパラメータのやり取りを確認することができます。

### 2. Redirect
ここで言うRedirectとは、OIDCの Authentication Request（[1] 3.1.2.1章）のことです。
![Redirect.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3725519/c88630db-8f7f-89d8-eb7a-f129e8326c3d.png)
##### 【OIDCで定義されているパラメータ】
- scope：openid（scopeはopenidを含まなければいけない）
- response_type：使用する認証処理フロー
- client_id：認証サーバーにおけるOAuth 2.0のクライアント識別子
- redirect_uri：レスポンスが返されるリダイレクトURI
- state：リクエストとコールバックの間で維持されるランダムな文字列
- response_mode：認証エンドポイントからパラメータを返す手段
- nonce：セッションとIDトークンを紐づける文字列
- prompt：認証サーバーがエンドユーザーに再認証および同意を再度要求するかを指定するための文字列
- login_hint：認証サーバーに対するエンドユーザーログイン識別子のヒント

##### 【LTI独自で定義したパラメータ】
- lti_message_hint： 1.Loginのlti_message_hintで指定された値

### 3. Launch
Launchは上記の認証が成功し、ツールが起動できたことを示します。
今回は2.Redirectでresponse_typeがid_tokenになっているため、id_tokenが返されています。id_tokenはJWT形式で返されますが、LTI Debuggerでは自動的にデコードされ、中身を確認することができるようになっています。

![Launch.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3725519/02b724a6-f478-14ec-8823-644d322ca4b8.png)
##### 【OIDCで定義されているパラメータ】
- iss：JWTの発行者を識別するための識別子
- sub：ユーザーの一意な識別子
- aud：JWTが誰を対象として発行されたかを示す値
- exp：JWTの有効期限
- iat：JWTが発行された日時
- nonce：セッションとIDトークンを紐づける文字列

##### 【LTI独自で定義したパラメータ】
- Message type claim：LTIメッセージのタイプ
- LTI Version claim：適合するLTIのバージョン
- LTI Deployment ID claim：プラットフォームとツールの統合を識別する値
- Target Link URI：1.Loginのtarget_link_uriで指定された値
- Roles cliam：ユーザーが持つロールのURIの配列


## 終わりに
今回はChromeの拡張機能「LTI Debugger」の使い方とその中で確認することができたパラメータについて紹介しました。
筆者もLTIの学習を始めたばかりで、まだまだ理解できていない部分が多いですが、この拡張機能のおかげで以前よりもLTIの理解が深まりました。
この記事が筆者と同じLTI初学者の方々の学習の一助になれば幸いです。
（ほぼ同様の拡張機能がFirefoxにもありますので、機会があればChromeとの違いを比較してみてください）

## 参考資料
1. OpenID Connect Core 1.0
https://openid-foundation-japan.github.io/openid-connect-core-1_0.ja.html

1. Learning Tools Interoperability (LTI)® Core Specification
https://www.imsglobal.org/spec/lti/v1p3/

1. 1EdTech Security Framework
https://www.imsglobal.org/spec/security/v1p1/

1. IDトークンが分かれば OpenID Connect が分かる
https://qiita.com/TakahikoKawasaki/items/8f0e422c7edd2d220e06

1. Firefox LTI Debugger
https://addons.mozilla.org/af/firefox/addon/lti-debugger/