Open1
ローカル起動したアプリをngrokで公開してLIFFをサクッと試す
ともど@SIerエンジニアこの内容を試す。
wsl上にnvm,node,npm,yarnを準備する
nvmインストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
$ source ~/.bashrc
$ nvm --version
node,npmのインストール
$ nvm install --lts
$ node --version
$ npm --version
# lts版だとエラーになるので16.13.1もインストール
$ nvm install 16.13.1
# バージョンがv16.13.1になっているか確認
$ nvm ls
※最初lts版をいれたらアプリ起動時にエラーになった。
LINEの公式で動作環境が示されているのでそれに合わせてnodeをインストール
yarnのインストール
$ npm install --global yarn
$ yarn --version
ngrokでエンドポイントを発行
アプリはhttp://localhost:3000で起動するので3000を指定
ngrok http --host-header=rewrite 3000
※--host-header=rewriteをつけておかないとLINEでLIFFを開いたときにinvalid host headerのエラーになる。ngrokで受け取ったリクエストのHostヘッダーを、ローカルサーバーが期待する値（localhost:ポート番号）に書き換える。
LINEログインチャネルを作成
※LINEログインチャネルを作成する。
LIFFの追加はLINEログインチャネルでできる。MessagingAPIのチャネルからは不可能
LIFFは発行されたURLを用いれば普段使っているMessagingAPIのチャットからでも呼び出すことができる。
LIFF IDの取得
作成したLINEログインチャネルのタブから「LIFF」を選び新規作成
オプションは以下を参照。
Scopeは現段階だとよくわからないがいったんtokenだけ取得できればよさそうなのでopenidを選択
エンドポイントにはngrokで発行されたURLを指定
アプリの起動
git clone https://github.com/line/line-liff-v2-starter.git
cd line-liff-v2-starter/src/vanilla
yarn install
LIFF_ID="LIFF_IDキー" yarn dev
環境変数を設定する必要があるのでyarn devの前にLIFF_ID="LIFF_IDキー"を指定
LINEからLIFFを開く
LIFFを開きたいチャット画面でLIFF URLを送信。
送信したリンクを押すと画面が開く。
初回は
- 作成したLINEログインチャンネルを許可しますか、のメッセージ
- ngrokのローカルホスティングされているサイトですというメッセージ
がそれぞれ表示される。