LINE LIFF 介紹

LINE 的 LIFF 頁面就是可以跟LINE互動的網頁,可以崁入任何網頁(類似iframe),同時也可以獲得用戶LINE資料,也可以用用戶身分傳遞訊息到群組、開啟外部網頁、開啟攝影機、整合LINE Things等功能。通常可以使用在大型表單填寫、協助用戶發送特殊訊息、私密訊息傳遞(針對不同用戶顯示不同訊息)、第三方服務綁定或用於QR Code 掃描等。

v2 版本之後新增支援外部瀏覽器與二維條碼掃描器等功能, 開始使用 SDK v2 時,務必等待頁面讀取完成後再執行 API。

Web 設定

  • 網頁開啟的大小共分為三種 Size:Full(滿版)、Tall(80% 版面)、Compact(50% 版面)
  • 用戶登入時詢問是否加好友的功能選項:Normal 會預設將官方帳號加為好友,Aggressive 則是會另外跳出視窗詢問用戶是否要加官方帳號為好友,Off 則是完全不會有加好友的選項
  • 由於V2版本後只能在LINE Login下新增LIFF,所以在建立Provider時,需要點選Create a new channel,選擇Line Login(v2之後只能在Login新增LIFF)。

初始化

liff.init()

取得使用者資訊

liff.getProfile()
 .then(profile => {
     // 成功取得個人資訊
 }).catch(err => {
     console.log(err);
 });

開啟新視窗

liff.openWindow({
   url: "要開啟的網址",
   external: true
});

錯誤訊息解決方式

  • user doesn’t grant required permissions yet.
開啟LIFF->Scopes-> 點開 View all,將chat_message.write選項勾起

LIFF OTG

在使用LIFF時,最好是能將OGP (Open Graph Protocol) 標籤一起建立,這樣可以在 LINE App 中顯示出設定的標題,描述,與縮圖,讓資訊會更通透。

<html lang="ja" prefix="og: http://ogp.me/ns#">
<meta property="og:title" content="The title">
<meta property="og:type" content="`website`, `blog`, or `article`">
<meta property="og:description" content="A one to two sentence description">
<meta property="og:url" content="The URL">
<meta property="og:site_name" content="The name that represents the overall site">
<meta property="og:image" content="An image URL">

參考資訊