React + LaravelでLINE連携（友達追加）機能を実装する

皆さん、こんにちは。

今回は【React + LaravelでLINE連携（友達追加）機能を実装する】について紹介させていただきます。

本記事では、React（フロントエンド） と Laravel（バックエンド） を使って、LINE公式アカウントの「友達追加」機能を実装する方法を解説します。
単なる友達追加リンクの表示から、誰が追加したかを特定できる仕組みまで構築します。

実装の全体像

今回のフローは以下のようになります。

• React
  • LINE Front-end Framework（LIFF）を使い、ユーザーのLINEアカウント情報を取得。
  • ユーザーが未ログインならログインさせる。
  • 取得したユーザーIDをLaravelに送信。
• Laravel
  • ユーザーIDをDBに保存。
  • Messaging APIのWebhookで友達追加イベントを受け取る。
  • 必要に応じて「友達追加リンク」を返す。

事前準備

LINE Developersコンソール設定

• チャネル作成（Messaging API用）
• LIFFアプリ登録
  • LIFF IDを取得
  • LIFFのエンドポイントURLにReactアプリの公開URLを登録
• Messaging APIのWebhook URLにLaravelのエンドポイントを登録

Laravelの初期設定

.env にLINEのチャネルアクセストークンとシークレットを記載

LINE_CHANNEL_ACCESS_TOKEN=YOUR_ACCESS_TOKEN
LINE_CHANNEL_SECRET=YOUR_SECRET

実装方法

React側（フロントエンド）

今回はliffパッケージを使用します。

npm install @line/liff

AddFriend.jsx

import { useEffect } from "react";
import liff from "@line/liff";

export default function AddFriend() {
  useEffect(() => {
    liff.init({ liffId: "YOUR_LIFF_ID" }).then(() => {
      if (!liff.isLoggedIn()) {
        liff.login();
      } else {
        liff.getProfile().then(profile => {
          // Laravelに送信
          fetch("/api/line-user", {
            method: "POST",
            headers: {
              "Content-Type": "application/json"
            },
            body: JSON.stringify({ userId: profile.userId })
          });
        });
      }
    });
  }, []);

  return (
    <a 
      href="https://line.me/R/ti/p/@YOUR_LINE_ID" 
      target="_blank" 
      rel="noopener noreferrer"
    >
      LINEで友達追加
    </a>
  );
}

Laravel側（バックエンド）

• ルーティング
  routes/api.php

use App\Http\Controllers\LineController;

Route::post('/line-user', [LineController::class, 'store']);
Route::post('/line/webhook', [LineController::class, 'webhook']);

• コントローラー
  app/Http/Controllers/LineController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\LineUser;

class LineController extends Controller
{
    public function store(Request $request)
    {
        LineUser::updateOrCreate(
            ['line_user_id' => $request->userId],
            []
        );
        return response()->json(['status' => 'saved']);
    }

    public function webhook(Request $request)
    {
        $events = $request->input('events', []);
        foreach ($events as $event) {
            if ($event['type'] === 'follow') {
                // 友達追加イベント
                LineUser::updateOrCreate(
                    ['line_user_id' => $event['source']['userId']],
                    ['followed_at' => now()]
                );
            }
        }
        return response()->json(['status' => 'ok']);
    }
}

• モデル
  app/Models/LineUser.php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class LineUser extends Model
{
    protected $fillable = ['line_user_id', 'followed_at'];
}

実行イメージ

• ReactアプリにアクセスするとLIFFが起動
• 未ログインならLINEでログイン
• ユーザーIDがLaravelに送信されDBに保存
• ユーザーが「友達追加」を行うとLINEのWebhookがLaravelにイベント送信
• DBのレコードにfollowed_atが記録される

注意点
Webhook URLは外部からアクセス可能なHTTPSである必要があります

LIFFアプリのエンドポイントURLとReactのデプロイ先は一致している必要があります

Messaging APIは「応答メッセージ」の送信回数制限があるので注意

まとめ

今回の実装により、

• 単なる友達追加リンク表示だけでなく
• 誰が友達追加したかを追跡
• 追加後のユーザーに合わせたメッセージ送信
  が可能になります。

この構成を使えば、ReactとLaravelを組み合わせたLINE公式アカウントの高度な連携が実現できます。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。