Zenn
Open5

LIFF+React調査メモ

JavaScript
LINE
React
TypeScript
#
liff
nekonikinekoniki

概要

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

nekonikinekoniki

ライブラリ

  • @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を参照する
nekonikinekoniki

所感

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

LIFFとLINEミニアプリの違い