こんにちは。
LINEが提供するWebアプリ用フレームワークLIFFで、
謎のクエリパラメータ"liff.state="が付与されることがあったので、
このパラメータについて調べてみました。
このパラメータに対してわかっていること
- https://liff.line.me/{liffId} ※のURLを利用する場合に付与されることがある
- クエリパラメータがエンコードされてliff.stateに格納される場合がある
- line://app/{liffId} のURLスキームでは付与されない
※LINE URLスキームの「line://」は非推奨になったため、
今後はhttps://liff.line.me/{liffId} のURLスキームを利用しなければならないようです。
https://developers.line.biz/ja/news/2020/03/25/line-url-scheme-deprecation/
順番に確認 1
まず1.の内容ですが、簡単なLIFFアプリを作成し
https://liff.line.me/{liffId} のURLからアクセスすれば再現します。
テストアプリ
https://liff.line.me/1654102793-nkrRxP6x
https://example.com/?liff.state=
順番に確認 2
次に2.の確認のため、クエリパラメータを付与してみます。
https://liff.line.me/{liffId} のURLではこれまでと異なり、
https://liff.line.me/{liffId} のURLスキーム自体にパスを含めて指定する必要があるようです。
LIFFアプリに追加情報を渡すには
LIFFアプリに追加情報を渡すには、URLスキームにパスとクエリパラメータを追加します。たとえば、https://liff.line.me/{liffId}/path_A/path_B/?key1=value1&key2=value2 と指定すると、LIFFアプリに/path_A/path_B/?key1=value1&key2=value2が渡されます。
今回は、ルート直下でのアプリとなり、サブディレクトリがないので、
パスは指定しません。
すると以下のようになります。
https://liff.line.me/1654102793-nkrRxP6x?hoge=fuga
https://example.com/?liff.state=%3Fhoge%3Dfuga
ここで、LIFFアプリでliff.init()の処理を行っていなかったことに気が付き、
実装したところ、以下のようにliff.stateに格納されたクエリパラメータがデコードされ。
liff.stateが消滅しました。
https://liff.line.me/1654102793-OpgpwjVw?hoge=fuga
https://myucy-liff.herokuapp.com/?hoge=fuga
追加検証
今度は、パスを付与してみます。(liff.init()は行わない)
https://liff.line.me/1654102793-nkrRxP6x/path1
https://example.com/?liff.state=%2Fpath1
パスを付与しliff.init()を実行
https://liff.line.me/1654102793-OpgpwjVw/path1
https://myucy-liff.herokuapp.com/path1
追加検証2
パスとクエリパラメータを付与してみます。(liff.init()は行わない)
https://liff.line.me/1654102793-nkrRxP6x/path1?hoge=fuga
https://example.com/?liff.state=%2Fpath1%3Fhoge%3Dfuga
パスを付与しliff.init()を実行
https://liff.line.me/1654102793-OpgpwjVw/path1?hoge=fuga
https://myucy-liff.herokuapp.com/path1?hoge=fuga
つまり?
上記検証結果より、liff.stateはhttps://liff.line.me/{liffId} のURLで、
パスやクエリパラメータを受け渡す際に、エンコードしたパラメータを一時的に保管しておくパラメータであり、
liff.init()を行うことでその中身がデコードされる という結論になりました。
ただ、liff.stateはパスやクエリパラメータを指定してliff.init()を行うことで消滅しますが、
逆に何もパスやクエリパラメータを指定しない場合には、空のliff.stateが残ってしまうようです。
(PCのブラウザからのアクセス時のみ再現、LINEアプリ内のLIFFブラウザでは再現しません。)
https://liff.line.me/1654102793-OpgpwjVw
https://myucy-liff.herokuapp.com/?liff.state=
https://liff.line.me/{liffId} のURLで、付与したパスやクエリパラメータが
エンコードされてliff.stateに格納されるという動作や、
liff.state自体の説明、liff.init()を行うとデコードが行われるという動作について
公式のリファレンスには記載がなく、困っている方も居そうな気がしたので、何かの役に立てば幸いです。