คู่มือพัฒนา LINE MINI App ฉบับลงมือทำ
สร้างแอปจองคิวคลินิกตั้งแต่ศูนย์จนส่ง Service Message

ผู้ใช้แตะลิงก์ MINI App ในแชท
        |
        v
[LIFF] liff.init() -> ตรวจ login -> ได้ ID token
        |
        v
[Frontend] เลือกแพทย์ -> เลือกช่วงเวลา -> กดยืนยัน
        |
        v
[Backend] POST /api/bookings
        |-- ยืนยัน ID token กับ api.line.me/oauth2/v2.1/verify
        |-- กันจองซ้ำ + ออกหมายเลขคิว -> บันทึกลง DB
        |-- ส่ง Service Message ยืนยันคิว
        v
[LINE] ผู้ใช้ได้รับใบยืนยันคิวในแชททันที

import liff from "@line/liff";

export type ClinicSession = {
  userId: string;
  displayName: string;
  pictureUrl?: string;
};

export async function initLiff() {
  await liff.init({
    liffId: import.meta.env.VITE_LIFF_ID,
    withLoginOnExternalBrowser: true,
  });

  // เปิดจากเบราว์เซอร์ปกติและยังไม่ล็อกอิน -> ให้ UI แสดงปุ่ม "เข้าสู่ระบบด้วย LINE"
  // อย่าเรียก liff.login() เองตอนโหลดหน้า ผู้ใช้จะงงและ redirect วนได้
  if (!liff.isLoggedIn()) {
    return { status: "guest" as const };
  }

  const idToken = liff.getIDToken();
  const res = await fetch("/api/session", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ idToken }),
  });

  if (!res.ok) throw new Error("verify failed");

  const session = (await res.json()) as ClinicSession;
  return { status: "signed-in" as const, session };
}

export function loginWithLine() {
  liff.login({ redirectUri: window.location.href });
}

export function logoutFromLine() {
  liff.logout();
  window.location.reload();
}

// ใช้ตัดสินใจว่าจะโชว์ปุ่มปิดหน้าต่างหรือปุ่มออกจากระบบ
export const runningInLineApp = () => liff.isInClient();
export const currentOs = () => liff.getOS(); // "ios" | "android" | "web"

export async function verifyIdToken(idToken: string) {
  const body = new URLSearchParams({
    id_token: idToken,
    client_id: process.env.LINE_CHANNEL_ID!,
  });

  const res = await fetch("https://api.line.me/oauth2/v2.1/verify", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body,
  });

  if (!res.ok) throw new Error("invalid id token");

  const claims = await res.json();
  // { sub, name, picture, email?, aud, exp, iss }

  if (claims.aud !== process.env.LINE_CHANNEL_ID) throw new Error("aud mismatch");
  if (claims.exp * 1000 < Date.now()) throw new Error("token expired");

  return {
    userId: claims.sub as string,
    displayName: claims.name as string,
    pictureUrl: claims.picture as string | undefined,
  };
}

create table bookings (
  id            uuid primary key default gen_random_uuid(),
  line_user_id  text not null,
  display_name  text not null,
  doctor_id     text not null,
  slot_start    timestamptz not null,
  queue_number  int not null,
  status        text not null default 'confirmed', -- confirmed | cancelled | done
  created_at    timestamptz not null default now(),
  unique (doctor_id, slot_start)
);

create index bookings_user_idx on bookings (line_user_id, slot_start desc);

import { verifyIdToken } from "../verify";
import { sendQueueConfirmation } from "../service-message";
import { db } from "../db";

export async function createBooking(req: Request) {
  const { idToken, liffAccessToken, doctorId, slotStart } = await req.json();

  // 1) ใครเป็นคนจอง
  const user = await verifyIdToken(idToken);

  // 2) กันจองซ้ำช่วงเวลาเดียวกัน (unique constraint ช่วยอีกชั้น)
  const taken = await db.bookings.findBySlot(doctorId, slotStart);
  if (taken) {
    return Response.json({ error: "ช่วงเวลานี้ถูกจองแล้ว" }, { status: 409 });
  }

  // 3) ออกหมายเลขคิวของวันนั้น
  const queueNumber = await db.bookings.nextQueueNumber(doctorId, slotStart);

  const booking = await db.bookings.insert({
    lineUserId: user.userId,
    displayName: user.displayName,
    doctorId,
    slotStart,
    queueNumber,
  });

  // 4) ส่งใบยืนยันคิวกลับเข้าแชท (ขั้นที่ 7)
  await sendQueueConfirmation({ liffAccessToken, queueNumber });

  return Response.json({ queueNumber: booking.queueNumber });
}

const TOKEN_API = "https://api.line.me/oauth2/v3/token";
const NOTIFIER_API = "https://api.line.me/message/v3/notifier";
const TEMPLATE_NAME = "book_request_s_b_th";
const MINI_APP_URL = "https://miniapp.line.me/" + process.env.LIFF_ID;

// (1) ขอ stateless channel access token ด้วย client_credentials
async function issueChannelAccessToken() {
  const res = await fetch(TOKEN_API, {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams({
      grant_type: "client_credentials",
      client_id: process.env.LINE_CHANNEL_ID!,
      client_secret: process.env.LINE_CHANNEL_SECRET!,
    }),
  });
  if (!res.ok) throw new Error("token error: " + (await res.text()));
  const data = await res.json();
  return data.access_token as string;
}

// (2) แลก LIFF access token ของผู้ใช้เป็น notification token
async function issueNotificationToken(channelAccessToken: string, liffAccessToken: string) {
  const res = await fetch(NOTIFIER_API + "/token", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + channelAccessToken,
    },
    body: JSON.stringify({ liffAccessToken }),
  });
  if (!res.ok) throw new Error("notifier token error: " + (await res.text()));
  // { notificationToken, remainingCount, expiresIn, sessionId }
  const data = await res.json();
  return data.notificationToken as string;
}

// (3) ส่ง Service Message จริง
export async function sendQueueConfirmation(input: {
  liffAccessToken: string;
  queueNumber: number;
}) {
  const channelAccessToken = await issueChannelAccessToken();
  const notificationToken = await issueNotificationToken(
    channelAccessToken,
    input.liffAccessToken,
  );

  const res = await fetch(NOTIFIER_API + "/send?target=service", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + channelAccessToken,
    },
    body: JSON.stringify({
      templateName: TEMPLATE_NAME,
      params: {
        number: String(input.queueNumber),
        btn1_url: MINI_APP_URL,
        btn2_url: MINI_APP_URL,
        btn3_url: MINI_APP_URL,
        btn4_url: MINI_APP_URL,
      },
      notificationToken,
    }),
  });

  if (!res.ok) throw new Error("send error: " + (await res.text()));
}

import liff from "@line/liff";

export async function submitBooking(doctorId: string, slotStart: string) {
  const res = await fetch("/api/bookings", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      idToken: liff.getIDToken(),
      liffAccessToken: liff.getAccessToken(),
      doctorId,
      slotStart,
    }),
  });

  if (!res.ok) throw new Error((await res.json()).error ?? "จองไม่สำเร็จ");

  const { queueNumber } = await res.json();

  // อยู่ใน LINE app ก็ปิดหน้าต่างกลับเข้าแชทไปอ่านใบยืนยันคิวได้เลย
  if (liff.isInClient()) liff.closeWindow();

  return queueNumber as number;
}

import liff from "@line/liff";

export async function inviteFriends() {
  if (!liff.isApiAvailable("shareTargetPicker")) return;

  await liff.shareTargetPicker([
    {
      type: "flex",
      altText: "จองคิวคลินิกผ่าน LINE ได้แล้ววันนี้",
      contents: {
        type: "bubble",
        hero: {
          type: "image",
          url: "https://your-domain.com/clinic-cover.jpg",
          size: "full",
          aspectRatio: "20:13",
          aspectMode: "cover",
        },
        body: {
          type: "box",
          layout: "vertical",
          contents: [
            { type: "text", text: "คลินิกสุขภาพดี", weight: "bold", size: "xl" },
            { type: "text", text: "จองคิวพบแพทย์ล่วงหน้า ไม่ต้องรอหน้าร้าน", wrap: true, size: "sm" },
          ],
        },
        footer: {
          type: "box",
          layout: "vertical",
          contents: [
            {
              type: "button",
              style: "primary",
              action: {
                type: "uri",
                label: "จองคิวเลย",
                uri: "https://miniapp.line.me/" + import.meta.env.VITE_LIFF_ID,
              },
            },
          ],
        },
      },
    },
  ]);
}

เพิ่มการเชื่อมต่อ LINE MINI App เข้ากับเว็บจองคิวคลินิกนี้:

1. ติดตั้งและใช้แพ็กเกจ @line/liff
2. เรียก liff.init({ liffId: LIFF_ID, withLoginOnExternalBrowser: true })
   ตอนแอปเริ่มทำงาน ห้ามเรียก liff.login() อัตโนมัติ
3. แสดงปุ่ม "เข้าสู่ระบบด้วย LINE" และ "ออกจากระบบ"
   เฉพาะเมื่อ liff.isInClient() เป็น false
4. เมื่อผู้ใช้ล็อกอินแล้ว ใช้ liff.getProfile() แสดงการ์ดโปรไฟล์
   และเติมชื่อผู้จองในฟอร์มให้อัตโนมัติ
5. ตอนกดยืนยันการจอง ให้ส่ง liff.getIDToken() และ liff.getAccessToken()
   ไปที่ POST /api/bookings
6. ฝั่งเซิร์ฟเวอร์ใช้ LINE_CHANNEL_ID และ LINE_CHANNEL_SECRET จาก env
   เพื่อขอ channel access token, แลก notification token
   และส่ง Service Message template ชื่อ book_request_s_b_th
   โดยส่ง params.number เป็นหมายเลขคิว
7. อย่าเปิดเผย LINE_CHANNEL_SECRET ในโค้ดฝั่ง client เด็ดขาด