LINE API Integration Tutorial: Messaging API, Login, LIFF

Provider "My Shop"
├── Messaging API channel   (linked to the LINE Official Account)
├── LINE Login channel      (web login + LIFF apps)
└── LINE MINI App channel   (optional)

# .env
LINE_CHANNEL_ACCESS_TOKEN=...
LINE_CHANNEL_SECRET=...
LINE_LOGIN_CHANNEL_ID=...
LINE_LOGIN_CHANNEL_SECRET=...

// line-api.ts: minimal Messaging API client with fetch (Node.js 22+)
const API = "https://api.line.me/v2/bot"
const token = process.env.LINE_CHANNEL_ACCESS_TOKEN
if (!token) throw new Error("Set LINE_CHANNEL_ACCESS_TOKEN")

export type LineMessage = { type: string; [key: string]: unknown }

export class LineApiError extends Error {
  constructor(public status: number, public requestId: string | null, public body: string) {
    super(`LINE API ${status}: ${body}`)
  }
}

async function post(path: string, body: unknown, headers: Record<string, string> = {}) {
  const res = await fetch(`${API}${path}`, {
    method: "POST",
    headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, ...headers },
    body: JSON.stringify(body),
  })
  if (!res.ok) throw new LineApiError(res.status, res.headers.get("x-line-request-id"), await res.text())
  return res.json() as Promise<{ sentMessages?: { id: string; quoteToken?: string }[] }>
}

// Reply: needs the replyToken from a webhook event, max 5 messages, not counted in your quota
export function reply(replyToken: string, messages: LineMessage[]) {
  return post("/message/reply", { replyToken, messages })
}

// Push: one user, group or room; reuse the same retryKey (UUID) when you retry the same push
export function push(to: string, messages: LineMessage[], retryKey: string) {
  return post("/message/push", { to, messages }, { "X-Line-Retry-Key": retryKey })
}

// Multicast: up to 500 user IDs per request
export function multicast(to: string[], messages: LineMessage[]) {
  if (to.length > 500) throw new Error("multicast accepts at most 500 user IDs")
  return post("/message/multicast", { to, messages })
}

import { randomUUID } from "node:crypto"
import { push, type LineMessage } from "./line-api.js"

const userId = "U0123456789abcdef0123456789abcdef"
const welcome: LineMessage[] = [
  {
    type: "text",
    text: "Your order #1042 has shipped.",
    quickReply: {
      items: [
        { type: "action", action: { type: "uri", label: "Track parcel", uri: "https://example.com/track/1042" } },
        { type: "action", action: { type: "message", label: "Talk to us", text: "I have a question about #1042" } },
      ],
    },
  },
]
const retryKey = randomUUID()
const result = await push(userId, welcome, retryKey)
console.log(result.sentMessages?.map((m) => m.id))

{ "type": "text", "text": "Hello! How can we help?" }

{
  "type": "image",
  "originalContentUrl": "https://example.com/photo.jpg",
  "previewImageUrl": "https://example.com/photo-preview.jpg"
}

{
  "type": "flex",
  "altText": "Weekend promotion: 20% off",
  "contents": {
    "type": "bubble",
    "hero": {
      "type": "image",
      "url": "https://example.com/promo.jpg",
      "size": "full",
      "aspectRatio": "20:13",
      "aspectMode": "cover"
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        { "type": "text", "text": "Weekend promotion", "weight": "bold", "size": "xl" },
        { "type": "text", "text": "20% off all drinks until Sunday", "wrap": true }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "button",
          "style": "primary",
          "action": { "type": "uri", "label": "See the menu", "uri": "https://example.com/menu" }
        }
      ]
    }
  }
}

// login.ts: "Log in with LINE" (authorization code flow + PKCE) with Express 5
import express from "express"
import { createHash, randomBytes } from "node:crypto"

const CHANNEL_ID = process.env.LINE_LOGIN_CHANNEL_ID!
const CHANNEL_SECRET = process.env.LINE_LOGIN_CHANNEL_SECRET!
const REDIRECT_URI = "https://example.com/auth/line/callback" // must match the callback URL in the console

const app = express()
// Demo store; use your session store or database in production
const pending = new Map<string, { nonce: string; codeVerifier: string }>()

function readCookie(header: string | undefined, name: string) {
  return header?.split(/;\s*/).find((c) => c.startsWith(`${name}=`))?.slice(name.length + 1)
}

app.get("/auth/line", (_req, res) => {
  const state = randomBytes(16).toString("hex")
  const nonce = randomBytes(16).toString("hex")
  const codeVerifier = randomBytes(32).toString("base64url") // 43 characters
  const codeChallenge = createHash("sha256").update(codeVerifier).digest("base64url")
  pending.set(state, { nonce, codeVerifier })
  res.cookie("line_state", state, { httpOnly: true, secure: true, sameSite: "lax", maxAge: 10 * 60 * 1000 })

  const params = new URLSearchParams({
    response_type: "code",
    client_id: CHANNEL_ID,
    redirect_uri: REDIRECT_URI,
    state,
    scope: "profile openid",
    nonce,
    code_challenge: codeChallenge,
    code_challenge_method: "S256",
  })
  // URLSearchParams encodes spaces as "+"; LINE's examples use %20
  res.redirect(`https://access.line.me/oauth2/v2.1/authorize?${params.toString().replaceAll("+", "%20")}`)
})

app.get("/auth/line/callback", async (req, res) => {
  const { code, state, error } = req.query
  const saved = typeof state === "string" ? pending.get(state) : undefined
  if (typeof state === "string") pending.delete(state)
  if (error || typeof code !== "string" || !saved || state !== readCookie(req.headers.cookie, "line_state")) {
    res.status(400).send("Login cancelled or invalid state") // error=ACCESS_DENIED when the user declines
    return
  }

  // 1. Exchange the code for tokens
  const tokenRes = await fetch("https://api.line.me/oauth2/v2.1/token", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams({
      grant_type: "authorization_code",
      code,
      redirect_uri: REDIRECT_URI,
      client_id: CHANNEL_ID,
      client_secret: CHANNEL_SECRET,
      code_verifier: saved.codeVerifier,
    }),
  })
  if (!tokenRes.ok) {
    res.status(502).send("Token exchange failed")
    return
  }
  const { access_token, id_token } = (await tokenRes.json()) as { access_token: string; id_token: string }

  // 2. Let LINE verify the ID token (signature, channel ID, expiry, nonce)
  const verifyRes = await fetch("https://api.line.me/oauth2/v2.1/verify", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams({ id_token, client_id: CHANNEL_ID, nonce: saved.nonce }),
  })
  if (!verifyRes.ok) {
    res.status(401).send("Invalid ID token")
    return
  }
  const claims = (await verifyRes.json()) as { sub: string; name?: string; picture?: string }

  // 3. Optional: current profile with the access token
  const profile = await fetch("https://api.line.me/v2/profile", {
    headers: { Authorization: `Bearer ${access_token}` },
  }).then((r) => r.json() as Promise<{ userId: string; displayName: string; pictureUrl?: string }>)

  // claims.sub is the user's LINE user ID for your provider: create your session here
  console.log(claims.sub, profile.displayName)
  res.redirect("/")
})

app.listen(3000)

// LIFF app (browser): get an ID token and let your server verify it
import liff from "@line/liff"

await liff.init({ liffId: "1234567890-AbcdEfgh" })
if (!liff.isLoggedIn()) {
  liff.login() // needed in external browsers; in the LIFF browser the user is already logged in
} else {
  const idToken = liff.getIDToken() // requires the openid scope
  await fetch("/api/me", { method: "POST", headers: { Authorization: `Bearer ${idToken}` } })
}

// webhook.ts: receive events without the SDK (Express 5)
import express from "express"
import { createHmac, timingSafeEqual } from "node:crypto"
import { reply } from "./line-api.js"

const CHANNEL_SECRET = process.env.LINE_CHANNEL_SECRET!
const app = express()

function isValidSignature(rawBody: Buffer, signature: string | undefined) {
  if (!signature) return false
  const expected = createHmac("sha256", CHANNEL_SECRET).update(rawBody).digest()
  const received = Buffer.from(signature, "base64")
  return received.length === expected.length && timingSafeEqual(received, expected)
}

type LineEvent = {
  type: string
  webhookEventId: string
  deliveryContext: { isRedelivery: boolean }
  replyToken?: string
  source?: { type: string; userId?: string; groupId?: string; roomId?: string }
  message?: { id: string; type: string; text?: string }
  postback?: { data: string }
}

// express.raw keeps the exact bytes LINE signed; don't use express.json() on this route
app.post("/webhook", express.raw({ type: "application/json" }), (req, res) => {
  const rawBody = req.body
  if (!Buffer.isBuffer(rawBody) || !isValidSignature(rawBody, req.get("x-line-signature"))) {
    res.sendStatus(401)
    return
  }
  const { events } = JSON.parse(rawBody.toString("utf8")) as { events: LineEvent[] }
  res.sendStatus(200) // answer fast, also when events is [] (connection check)
  for (const event of events) handleEvent(event).catch((err) => console.error(err))
})

const seen = new Set<string>() // use Redis or your database with a TTL in production

async function handleEvent(event: LineEvent) {
  if (seen.has(event.webhookEventId)) return // redelivered or duplicate event
  seen.add(event.webhookEventId)

  switch (event.type) {
    case "message":
      if (event.replyToken && event.message?.type === "text") {
        await reply(event.replyToken, [{ type: "text", text: `You said: ${event.message.text}` }])
      }
      break
    case "follow":
      if (event.replyToken) await reply(event.replyToken, [{ type: "text", text: "Thanks for adding us!" }])
      break
    case "postback": {
      const data = new URLSearchParams(event.postback?.data) // e.g. "action=book&slot=10:00"
      console.log("postback", data.get("action"), data.get("slot"))
      break
    }
    case "unfollow":
      // no reply token: the user blocked you; stop sending to event.source?.userId
      break
  }
}

app.listen(Number(process.env.PORT ?? 3000))

# app.py: same webhook in Python with line-bot-sdk v3 (Python 3.10+)
import os
from flask import Flask, request, abort
from linebot.v3 import WebhookHandler
from linebot.v3.exceptions import InvalidSignatureError
from linebot.v3.messaging import (
    ApiClient, Configuration, MessagingApi, ReplyMessageRequest, TextMessage,
)
from linebot.v3.webhooks import FollowEvent, MessageEvent, TextMessageContent

app = Flask(__name__)
configuration = Configuration(access_token=os.environ["LINE_CHANNEL_ACCESS_TOKEN"])
handler = WebhookHandler(os.environ["LINE_CHANNEL_SECRET"])


@app.post("/webhook")
def webhook():
    signature = request.headers.get("X-Line-Signature", "")
    body = request.get_data(as_text=True)  # raw body, before any JSON parsing
    try:
        handler.handle(body, signature)
    except InvalidSignatureError:
        abort(401)
    return "OK"


@handler.add(MessageEvent, message=TextMessageContent)
def on_text(event):
    with ApiClient(configuration) as api_client:
        MessagingApi(api_client).reply_message(
            ReplyMessageRequest(
                reply_token=event.reply_token,
                messages=[TextMessage(text=f"You said: {event.message.text}")],
            )
        )


@handler.add(FollowEvent)
def on_follow(event):
    with ApiClient(configuration) as api_client:
        MessagingApi(api_client).reply_message(
            ReplyMessageRequest(
                reply_token=event.reply_token,
                messages=[TextMessage(text="Thanks for adding us!")],
            )
        )

import { randomUUID } from "node:crypto"
import { LineApiError, push, type LineMessage } from "./line-api.js"

export async function pushWithRetry(to: string, messages: LineMessage[], attempts = 3) {
  const retryKey = randomUUID() // the same key for every attempt
  for (let attempt = 1; ; attempt++) {
    try {
      return await push(to, messages, retryKey)
    } catch (err) {
      if (err instanceof LineApiError && err.status === 409) return // already accepted earlier
      const retryable = !(err instanceof LineApiError) || err.status === 429 || err.status >= 500
      if (!retryable || attempt >= attempts) throw err
      await new Promise((resolve) => setTimeout(resolve, 2 ** attempt * 1000))
    }
  }
}