📚

LINE公式アカウントからLIFFを起動する際の設定周り

2023/03/18に公開

概要

LIFFの起動導線としてLINEの公式アカウントを利用していますが、その際に設定周りで少し手間取ったので備忘録として設定を残す。

まず、今回利用したのはLINEの以下の3つのサービス

公式アカウントをLIFF起動の導線として利用します。

公式アカウントではリッチメニューを配置し、そこからLIFFのアプリを呼び出すようにリンクを貼っています。

リッチメニューで画像を配置し、そこからLIFFへ飛ばす

ここで指定しているリンクはLINE ログインをLIFFへ接続設定した時に表示されるLIFFのURLになります。ややこしいのですが、LIFFの管理画面で見れるリンクとは異なるものになるので注意が必要です。

LIFF自体で発行されるリンク

LINEログインはその名の通り認証情報としてLINEを利用できるサービスになります。
単純にWebサービスに組み込むのも可能ですが、後述するLIFFのアプリと紐づけて利用することもできます。

LINEログインの設定画面からはLIFFのアプリケーションを紐づけることができます。
公式アカウントから配信するリンクはLINEログインと紐付けたLIFFアプリケーションのリンクになります。

ここで実際に作成したLIFFを接続するとLIFF IDとLIFF URLが発行されます。

LIFFの設定画面とは異なるIDとURL

Messaging APIにリンクとして貼るのはこちらのURLになります。

また、LINEログインと紐付けたLIFFアプリにもエンドポイントURL（LIFFで呼び出されるWebサービスの本体）が別途指定が可能なのですが、ここではWebサービス側のURLを指定します。

自分はここがLIFFの別のURLになっていたのでLIFF起動時にエラーが出る事象に遭遇し解決までにかなり時間を要してしましました。（このあたりがなぜかLIFF側の設定を読み取らずにLINEログインに紐付けたLIFF独自で保持しているのがなんともわかりにくいところ）

LINE MINI APPはLIFFアプリを作成し、審査に通ったアプリのことを指します（多分）。
LIFF自体は単純なWebサービス上でLINEの認証情報を使えるようにしたものでWebサービスからLINEプロフィールの取得やメッセージの投稿などが行えます。

npxのコマンドで雛形作れて、コード自体はNextとReactで書けるので普通にWebアプリ作るのと変わらないので構築はスムーズに行えます。

npx @line/create-liff-app