LIFF連携

LIFF URL の使い方

作成した LIFF アプリには以下の形式の URL でアクセスできます。 LINE メッセージやリッチメニューのリンクとして設定してください。

例: line://app/1234567890-AbCdEfGh

LIFF SDK の初期化方法

LIFF アプリのページで以下のコードを使用して SDK を初期化します。

<!-- CDN から読み込む場合 -->
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>

<script>
  // LIFF SDK 初期化
  liff.init({ liffId: "YOUR_LIFF_ID" })
    .then(() => {
      console.log("LIFF 初期化完了");
      // ここから LIFF API が使用可能
    })
    .catch((err) => {
      console.error("LIFF 初期化エラー:", err);
    });
</script>

npm パッケージ使用時: npm install @line/liff

ユーザー情報取得の流れ

1. 1ユーザーが LIFF URL（line://app/xxxx）を開く
2. 2LINE アプリ内ブラウザで LIFF ページが開き、自動的に LINE ログインが実行される
3. 3liff.getProfile() でユーザープロフィールを取得
4. 4liff.getIDToken() で ID トークンを取得してサーバー側で検証

// ユーザー情報を取得する例
async function getUserInfo() {
  // ログイン済みか確認
  if (!liff.isLoggedIn()) {
    liff.login();
    return;
  }

  // プロフィール取得
  const profile = await liff.getProfile();
  console.log("userId:", profile.userId);
  console.log("displayName:", profile.displayName);
  console.log("pictureUrl:", profile.pictureUrl);

  // ID トークン取得（サーバー送信用）
  const idToken = liff.getIDToken();

  // サーバーに送信して検証
  await fetch("/api/your-endpoint", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ idToken, userId: profile.userId }),
  });
}