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へ設定できれば解決するのでは？！
…opensslでsubjectAltNameまで設定できてるオレオレ証明書を作られないか試しましたが、半日つかって辛くなったので諦めました。
https化はngrokに任せた
ngrokで発行した一時アドレスは、httpsのままLINEブラウザで開けたので
LIFFのエンドポイントURLに設定すると、動作しました！
ngrokを再起動するたび、LINE Developpers のコンソールから LIFFのエンドポイントURLを更新するのは面倒だけど
ちょっとの更新の確認でデプロイかますよりは数段マシ！！
LIFF ID は環境変数から取得
LIFFは、一つのチャネルへ複数設置することができるため
このように、外部サーバをエンドポイントに指定したものとlocalhostをエンドポイントに指定したものを両方置けます。
それぞれ、別のLIFF IDが付与されるため、dotenvなどを使って環境変数から取得できるようにしておくと便利です。