LINE Dev, LIFF 取得環境參數

LIFF.first.sample.jsx

/// 
/// ref→[LIFF v2 基本使用筆記及範例](https://www.letswrite.tw/liff-init/)
///

import './App.css';
import { useEffect, useState } from 'react';
import liff from '@line/liff'

const liffId = 'YOUR_REGISTERED_LIFF_ID';

export default function App() {
  const [liffEnv, setLiffEnv] = useState(null)
  const [userProfile, setUserProfile] = useState(null)
  const [tokenInfo, setTokenInfo] = useState(null)

  useEffect(() => {
    liff.init({ liffId }).then(() => {
      getLiffEnv();
    }).catch(error => {
      console.log('LIFF init fail!', error)
    })
  }, [])

  function getLiffEnv() {
    setLiffEnv({
      ready: liff.ready,                  // liff init 失敗訊息。
      language: liff.getLanguage(),       // 引用 LIFF SDK 的頁面，頁面中的 lang 值
      version: liff.getVersion(),         // LIFF SDK 的版本
      isInClient: liff.isInClient(),      // 回傳是否由 LINE App 存取
      isLoggedIn: liff.isLoggedIn(),      // 使用者是否登入 LINE 帳號
      os: liff.getOS(),                   // 回傳使用者作業系統：ios、android、web
      lineVersion: liff.getLineVersion(), // 使用者的 LINE 版本
      context: liff.getContext()
    });
  }

  return (
    <div className="container">
      <h1>LIFF Lab</h1>
      <button onClick={getLiffEnv}>取環境參數</button>
      <pre>{JSON.stringify(liffEnv, null, ' ')}</pre>

      <button onClick={() => {
        liff.login();
      }}>登入</button>
      <button onClick={() => liff.logout()}>登出</button>

      <br />
      <button onClick={() => {
        if (!liff.isLoggedIn()) {
          alert('請先登入才可取得使用者資訊。')
          return
        }

        liff.getProfile().then(data => {
          setUserProfile(data)
        })

        const tokenInfo = liff.getDecodedIDToken()
        setTokenInfo(tokenInfo)

      }}>取得使用者資料</button>
      <pre>tokenInfo: {JSON.stringify(tokenInfo, null, ' ')}</pre>
      <pre>userProfile: {JSON.stringify(userProfile, null, ' ')}</pre>

    </div>
  );
}