第2章：ReactにおけるLIFFとLine Loginの完璧な統合

前章で神聖なるLIFF IDを手に入れました。今度はReact + Viteプロジェクトに戻り、LineのSDKを導入しましょう。 このステップを習得すれば、あなたのWebアプリに「開いた瞬間にログイン完了」というブラックテクノロジーが実装できます。

1. @line/liffパッケージのインストール

ターミナルで以下を実行：

npm install @line/liff

2. LIFF初期化フックの作成 (useLiff.ts)

LIFFロジックをコンポーネント内に散らばらせない！Lineのログイン状態を一元管理するカスタムフックを作成します。

// src/hooks/useLiff.ts
import { useEffect, useState } from 'react';
import liff from '@line/liff';

export function useLiff() {
  const [profile, setProfile] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    // 前章で取得したLIFF IDをここに記入
    liff.init({ liffId: import.meta.env.VITE_LIFF_ID })
      .then(() => {
        setIsReady(true);
        // Line内で開かれているか、または既にログイン済みかをチェック
        if (liff.isLoggedIn()) {
          liff.getProfile().then((p) => {
            setProfile(p);
          }).catch((err) => {
            console.error('プロフィール取得失敗', err);
            setError(err.toString());
          });
        } else {
          // 未ログインの場合、Line Loginを要求
          liff.login();
        }
      })
      .catch((err) => {
        console.error('LIFF初期化失敗', err);
        setError(err.toString());
      });
  }, []);

  return { profile, error, isReady, liff };
}

3. 勤怠打刻ページでのユーザー情報活用

このフックを打刻コンポーネントで呼び出すだけで、従業員の名前とアバターを即座に取得可能！アカウント入力は一切不要です！

// src/components/PunchCard.tsx
import { useLiff } from '../hooks/useLiff';

export function PunchCard() {
  const { profile, isReady, liff } = useLiff();

  if (!isReady) return <div>Lineシステムを読み込み中...</div>;
  if (!profile) return <div>Lineにログインしてください...</div>;

  const handlePunch = async () => {
    // 安全なAccess Tokenを取得し、自社FastAPIバックエンドに送信
    const accessToken = liff.getAccessToken();
    
    await fetch('https://api.yourdomain.com/punch', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${accessToken}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ action: 'check-in' })
    });
    
    alert('打刻成功！');
    // 打刻完了後、Lineウィンドウを即時閉じる！超VIP感！
    liff.closeWindow();
  };

  return (
    <div className="p-4 bg-white rounded-xl shadow-md flex flex-col items-center">
      <img src={profile.pictureUrl} alt="avatar" className="w-20 h-20 rounded-full mb-4" />
      <h2 className="text-xl font-bold mb-6">こんにちは、{profile.displayName}さん</h2>
      
      <button 
        onClick={handlePunch}
        className="w-full bg-green-500 text-white font-bold py-4 rounded-lg text-lg"
      >
        出勤打刻
      </button>
    </div>
  );
}

4. このアーキテクチャが強力な理由

liff.getAccessToken()のコードに注目してください。 これがLIFF最大の強み：「このスマホのLineでしか生成できない鍵」を自動発行してくれます。これをバックエンド(FastAPI)に送信し、Lineサーバーで検証すれば「絶対に他人の代打刻ができない」ことを保証できます！

これがSaaS受託開発の強みです。次章では、FastAPIバックエンドでこの鍵の検証メカニズムを実装します！