LIFF開発でlocalhostを参照するときはngrok

LIFF(LINE Front-end Framework)を使うと、LINE上でブラウザを開きLINEのログインやユーザ情報をAPIで受け取り連動させるサービスをHTML+CSS+JavaScriptといったwebコンテンツと同様の言語で作られます。

このLIFFを動作させるには、いくつか制約があります

  • LINEの内蔵ブラウザでなければLIFF SDKのログインは動作しない
  • LINEの内蔵ブラウザは、サーバ証明書がクリアでないとコンテンツを表示できない(推測※)
  • LIFFのエンドポイントはhttpsでないと登録できない

NetlifyやVercelのような、個人開発でも無料でhttpsのデプロイができるサービスを活用すれば、何とかならなくはないけれど
ちょっとした変更の確認までデプロイせねば確認できないのは、さすがに…

http://ローカルIP/なら表示できるので、おそらく証明書がクリーンかどうかが判定基準

完璧な自己証明書かngrok

要は、信頼されるサーバ証明書をlocalhostへ設定できれば解決するのでは?!

opensslsubjectAltNameまで設定できてるオレオレ証明書を作られないか試しましたが、半日つかって辛くなったので諦めました。

https化はngrokに任せた

ngrokで発行した一時アドレスは、httpsのままLINEブラウザで開けたので
LIFFのエンドポイントURLに設定すると、動作しました!

localhostに外部参照可能な一時アドレスを付与できる

ngrokを再起動するたび、LINE Developpers のコンソールから LIFFのエンドポイントURLを更新するのは面倒だけど
ちょっとの更新の確認でデプロイかますよりは数段マシ!!

LIFF ID は環境変数から取得

LIFFは、一つのチャネルへ複数設置することができるため
このように、外部サーバをエンドポイントに指定したものとlocalhostをエンドポイントに指定したものを両方置けます。

local用のLIFFと外部サーバ用のLIFF

それぞれ、別のLIFF IDが付与されるため、dotenvなどを使って環境変数から取得できるようにしておくと便利です。

関連記事