Liffにクエリパラメータを付与する

目次

• 問題の状態
• コード
• 解決方法
• 解説

Liffに登録したエンドポイントにパラメータを渡したいとき、うまく渡らなかった。

問題の状態

Liff エンドポイント: https://example.com

Liff URL: https://liff.line.me/liffid-hogehoge

LINE BOT上でユーザーに https://liff.line.me/liffid-hogehoge?test=hoge にアクセスさせ、https://example.com?test=hoge にリダイレクトさせたかった。要はLINE Developersで発行されるLIFF URLに任意のパラメータをつけてそれをエンドポイントに引き継がせたい。

だけど、実際は https://example.com にアクセスされ、パラメータがごっそり消えてしまっていた。

コード

const queries = new URLSearchParams(window.location.search)
const testParams = queries.get('test')
console.log(testParams) // => hogeが取れる想定

解決方法

const queryString = decodeURIComponent(window.location.search).replace(
  '?liff.state=',
  ''
)
const queries = new URLSearchParams(queryString)
const testParams = queries.get('test')
console.log(testParams) // => hogeが取れる

解説

ドキュメントに分かりやすい解説が載ってた。

1次リダイレクト先URLではLIFF URLに指定した追加情報（例：path_A/?key1=value1#URL-fragment）はすべてliff.stateクエリパラメータに含まれています。

クエリパラメータは全てliff.stateクエリのvalueとして格納されるので?liff.state=を取り払ってやればOK。

公式ドキュメント