LINE LIFF (Front-end Framework) Skill
This skill provides specialized knowledge and workflows for building applications using the LINE Front-end Framework (LIFF).
Core Capabilities
-
SDK Integration & Initialization: Using CDN edge/fixed paths or @line/liff npm package. Proper use of liff.init() and liff.ready .
-
Authentication & User Data: Managing login state with liff.login() /liff.logout() , retrieving user profiles, email addresses (with openid scope), and friendship status.
-
In-App Interaction: Sending messages to the current chat room (liff.sendMessages ) or to friends/groups via the Share Target Picker (liff.shareTargetPicker ).
-
Device Features: Utilizing the 2D code (QR) reader (liff.scanCodeV2 ) and opening URLs in external browsers.
-
Context & Linking: Retrieving app context (user ID, chat type) and creating permanent links for LIFF pages.
Common Workflows
- Setting Up a LIFF App
-
Create a LINE Login channel in the LINE Developers Console.
-
Add a LIFF app to the channel and specify the Endpoint URL.
-
Integrate the SDK and call liff.init({ liffId: "YOUR_LIFF_ID" }) .
-
Use the liff-starter.html template in assets/ to begin.
- Handling Authentication
-
Check login status: if (!liff.isLoggedIn()) { liff.login(); } .
-
Get profile: liff.getProfile().then(profile => { ... }) .
-
For server-side verification, use liff.getIDToken() to get a JWT.
- Sending Messages via Share Target Picker
-
Verify availability: liff.isApiAvailable('shareTargetPicker') .
-
Execute: liff.shareTargetPicker([{ type: 'text', text: 'Hello!' }]) .
-
Note: Requires the "Share Target Picker" to be enabled in the Console.
Resources
-
LIFF API Reference: Detailed method signatures and usage examples.
-
Development Guidelines: Best practices for URLs, redirect flows, and OGP tags.
-
LIFF Starter Template: Minimal boilerplate for quick prototyping.
Important Note on Security
-
Confidentiality: Treat access_token and ID token as sensitive. Never leak them to external logging tools.
-
Endpoint Constraints: liff.init() only works on URLs at or below the configured Endpoint URL.
-
Universal Links: Use https://liff.line.me/{liffId} as the primary entry point for best compatibility.