AI TOOLS RADAR
모든 Skills / ABGNE
abgne/line-dev

line-liff

Comprehensive reference for LINE Front-end Framework (LIFF) SDK — building web apps inside LINE with authentication, messaging, QR scanning, permanent links, pluggable SDK, and LIFF plugin development.

소스 보기

사용 방법

  1. 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
  2. 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
  3. 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/abgne/line-dev --skill line-liff

시작 전 확인

  • 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
  • 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

LINE LIFF (Front-end Framework)

Do not answer LIFF questions from memory — LINE updates APIs frequently and training data is unreliable. Always consult the references below.

Reference for building, reviewing, and debugging LIFF web apps inside LINE.

Workflow

Build

  1. Read references/guidelines.md (registration, endpoint URL rules, environment compatibility)
  2. Load the relevant reference for the feature being implemented
  3. For architecture or design choices, consult references/experts.md for directional guidance
  4. Write code following specs and constraints from references

Review / Debug

  1. Read references/guidelines.md (URL constraints, authentication flow, API availability)
  2. Load relevant references for the code being reviewed
  3. Cross-check code against specs (endpoint URL rules, scope requirements, environment limitations, init order)
  4. For design pattern concerns, consult references/experts.md
  5. Report violations with reference to specific constraints

Environment Variables

LIFF_ID=LIFF app ID (from LINE Developers Console)
LINE_LOGIN_CHANNEL_ID=LINE Login Channel ID (for server-side JWT verification)
LINE_LOGIN_CHANNEL_SECRET=Channel secret (server-side only)
CHANNEL_ACCESS_TOKEN=Channel access token (for LIFF Server API — manage LIFF apps programmatically)

SDK

Install via CDN or npm. For tree-shaking (reduce ~34% bundle size), use pluggable SDK.

SDK installation, CDN/npm setup, pluggable SDK → [references/api.md § Pluggable SDK](references/api.md)

Initialization

javascript
liff.init({ liffId: 'YOUR_LIFF_ID', withLoginOnExternalBrowser: true })
  .then(() => { /* use LIFF APIs */ })
  .catch(err => console.error(err.code, err.message));
  • Must be called before all LIFF APIs (except pre-init methods)
  • withLoginOnExternalBrowser: true — auto-trigger login in external browser
  • liff.ready — Promise that resolves when init completes

Getting Started

  1. Create a LINE Login channel in LINE Developers Console
  2. Add a LIFF app and set the Endpoint URL (HTTPS required)
  3. Integrate SDK, call liff.init()
  4. Or scaffold with npx @line/create-liff-app (React/Vue/Svelte/Next.js/Nuxt/vanilla)

API Reference

Complete API reference (methods, parameters, scopes, availability matrix) → [references/api.md](references/api.md)

View Sizes

TypeCoverage
Full100% screen
Tall~75%
Compact~50%

Key Constraints

  • Endpoint URL: liff.init() only works at or below the registered Endpoint URL
  • URL handling: modify URLs only after liff.init() resolves
  • Universal Links: use https://liff.line.me/{liffId} as primary entry point
  • Token security: send raw ID Token to server for verification, never expose decoded token → see server-auth.md
  • Login behavior differs: auto in LIFF browser, manual in external browser
  • Deprecated APIs: liff.scanCode() → use scanCodeV2(); liff.getLanguage() → use getAppLanguage(); liff.permanentLink.createUrl() → use createUrlBy() (may be removed in v3)

Reference Index

FileTopic
references/api.mdLIFF v2 API complete reference, pluggable SDK modules, error codes
references/guidelines.mdRegistration, endpoint URL rules, authentication flow, UI/UX, environment compatibility
references/navigation.mdLIFF URLs, liff.state, permanent links, LIFF-to-LIFF transitions, browser minimization
references/plugins.mdLIFF plugin development, hooks system, official plugins (Inspector, Mock)
references/server-api.mdLIFF Server API (v1) — programmatic LIFF app CRUD (create, update, list, delete)
references/server-auth.mdServer-side ID Token (JWT) verification
references/cli.mdLIFF CLI — local HTTPS dev server, app CRUD, Inspector debugging, ngrok
references/experts.mdLIFF domain experts for architecture guidance

SDK & Tools