概要

簡単なLIFFアプリをReactで作る必要がありそうなので、役立ちそうな情報をメモする。

セットアップ

• React と CDK で LIFF アプリを作ってみよう
  • CDKを使うくだりはホスティングやバックエンドにAWSを使わないなら不要
• React + TypeScriptを使ってLIFFを作る
  • Typescriptを絡める想定ならこっち
  • @line/liffを使って簡単なLINEログインまで実装している

ライブラリ

• @line/liff
  • リファレンスに従って使用すること
  • 各種実装方法についてはLIFFアプリを開発するを見るとよい
  • import liff from '@line/liff';でインポートする
  • liff.initをApp.jsのcomponentDidMount(useEffect)のタイミングで行う
  • ログインしているかを取得するにはinit. isLoggedIn()
  • ログインさせるにはliff.login
  • LINEクライアントから呼び出されているかどうかを判定するにはliff.isInClient()
  • IDを取るにはliff.getIDToken()
    • アクセストークンはliff.getAccessToken()
    • バックエンドには取得したプロフィールではなく、このIDを送る
  • liff.getFriendship()のレスポンスの中のfriendFlagを参照する

所感

• @line/liffを使ってLINEクライアント内部から呼ばれた場合のログイン・プロフィール情報を取得してアレコレやる以外は通常のWebアプリケーションと変わらない
• バックエンドもAWSやらFirebaseやらを使ったハンズオンが多いので、自分のスキルセットに合ったものを選択するとよい

LIFFとLINEミニアプリの違い

• LINE Front-end Framework（LIFF）/ LINEミニアプリ
• note - LIFFアプリ・ミニアプリの違いとネイティブアプリより良い理由をわかりやすく解説
• 根本の仕組みは同じだが、できることはミニアプリの方が多い
  • 例えばLINE決済など
  • できることが多い分、ミニアプリにはLINEの審査が入る
• LIFFはLINEの中でWebViewを使って呼び出されるWebアプリという色が強い
  • WebアプリにプラスアルファでLINEクライアントからログイン情報などをもらえる