[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-vue初探liff的一些筆記-開發篇":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":22,"minRead":23},3325,"vue初探liff的一些筆記-開發篇","[Vue]初探LIFF的一些筆記-開發篇","初探LIFF的一些筆記 最近因為chatGPT很紅因素，很多人將chatGPT與line整合一起，在玩這類專案 […]","\u003Ch1>初探LIFF的一些筆記\u003C\u002Fh1>\n\u003Cp>最近因為chatGPT很紅因素，很多人將chatGPT與line整合一起，在玩這類專案時剛好碰到了line的API服務於是認識到LIFF，今天花點時間整理關於開發LIFF遇到的狀況。\u003Cbr \u002F>\nLIFF ( LINE Front-end Framework ) 是Line推出的一種前端框架，可以將功能與Line直接整合，藉此取得使用者user資料、進行部分操作。\u003Cbr \u002F>\n用這玩意能完美的與Line bot連動，透過使用 Line Login 或 Account Link 的網站進行使用者資料串接，進而製作更全面性的整合行銷服務。\u003Cbr \u002F>\n我用Vue3進行串接開發，使用setup script。\u003C\u002Fp>\n\u003Ch2>使用LIFF\u003C\u002Fh2>\n\u003Cp>請參考\u003Ca href=\"https:\u002F\u002Fpost.billxu.net\u002Fline初探liff的一些筆記-申請篇\u002F\" title=\"liff的一些筆記-申請篇\">LIFF的一些筆記-申請篇\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch2>載入\u003C\u002Fh2>\n\u003Cp>使用LIFF SDK可以直接用CDN引入\u003C\u002Fp>\n\u003Cpre>\u003Ccode><script src="https:\u002F\u002Fstatic.line-scdn.net\u002Fliff\u002Fedge\u002F2\u002Fsdk.js"><\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>在Vue話，我是先透過npm安裝\u003C\u002Fp>\n\u003Cpre>\u003Ccode>npm install vue-router@next @line\u002Fliff\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>使用Vue3的setup script，載入SDK\u003C\u002Fp>\n\u003Cpre>\u003Ccode><script setup>\nimport liff from "@line\u002Fliff";\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>後面就可以直接用囉。\u003C\u002Fp>\n\u003Ch2>初始化\u003C\u002Fh2>\n\u003Cp>啟動 LIFF 前需要先初始化(init)，在 Vue 的話就在 Mounted 實作這件事情。\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">onMounted(async () => {\n  liff\n  .init({\n    liffId: "<LIFF ID>", \u002F\u002F 從LIFF頁面中拿到的ID\n  })\n  .then(() => { \n  \u002F\u002F做你想要做的\n  })\n  .catch((err) => {\n    console.log(err.code, err.message);\n  });\n})\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>登入與登出\u003C\u002Fh2>\n\u003Cp>登入後的redirectUri最好是跟LIFF頁面上設定的Callback URL相同，當然你可以依照需求轉到你要的地方。\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F12%2F%E6%88%AA%E5%9C%96-2022-12-21-%E4%B8%8B%E5%8D%8812.17.53.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>if(!sysdata.isLoggedIn) {\n    liff.login({\n      redirectUri: window.location.href \u002F\u002F登入後轉址到需要的地方\n    });\n  }\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>登出就比較單純\u003C\u002Fp>\n\u003Cpre>\u003Ccode> if(sysdata.isLoggedIn) {\n    liff.logout();\n    window.location.reload(); \u002F\u002F 登出後重整一次頁面\n  }\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>取得基本資訊\u003C\u002Fh2>\n\u003Cp>我將取得資訊跟初始化寫在一起，範例如下。\u003C\u002Fp>\n\u003Cul>\n\u003Cli>打開頁面中的使用語系（lang）\u003C\u002Fli>\n\u003Cli>LIFF SDK 的版本\u003C\u002Fli>\n\u003Cli>目前 LIFF 是否是在 LINE App 中開啟\u003C\u002Fli>\n\u003Cli>使用者有沒有登入 LINE 帳號\u003C\u002Fli>\n\u003Cli>使用者的作業系統：web、android、ios\u003C\u002Fli>\n\u003Cli>\n\u003Cp>使用者用的 LINE App 版本\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-javascript\">onMounted(async () => {\nliff\n.init({\nliffId: "", \u002F\u002F 從LIFF頁面中拿到的ID\n})\n.then(() => {\nsysdata.language = liff.getLanguage(); \u002F\u002F String。引用 LIFF SDK 的頁面，頁面中的 lang 資料\nsysdata.version = liff.getVersion(); \u002F\u002F String。取得LIFF SDK 的版本\nsysdata.isInClient = liff.isInClient(); \u002F\u002F Boolean。回傳是否由 LINE App 存取\nsysdata.isLoggedIn = liff.isLoggedIn(); \u002F\u002F Boolean。檢查使用者是否登入 LINE 帳號狀態。true 時，可呼叫需要 Access Token 的 API\nsysdata.os = liff.getOS(); \u002F\u002F String。取得使用者的作業系統：ios、android、web\nsysdata.lineVersion = liff.getLineVersion(); \u002F\u002F 使用者的 LINE 版本\nconsole.log(sysdata.language,sysdata.version,sysdata.isInClient,sysdata.isLoggedIn,sysdata.os,sysdata.lineVersion);\n\n})\n.catch((err) => {\nconsole.log(err.code, err.message);\n});\n})\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>這邊要再講一下，申請完LIFF後會有個原來的Endpoint URL和LIFF上的LIFF URL，兩邊的LIFF SDK都會作用，但取得的權限不同(見下段落)，如果需要在LINE做一些操作，最好使用LIFF URL給使用者打開。\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>取得使用者資訊\u003C\u002Fh2>\n\u003Cp>取得使用者資訊使用這個api，取得後可以檢查使用者賦予的權限和一些資料，必須要使用者必須登入才能使用。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>userdata.context = liff.getContext();\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>回傳有以下幾種資料\u003C\u002Fp>\n\u003Cul>\n\u003Cli>type: utou(一對一聊天)、group(群組)、room(多人聊天室)、external(外部，通常是瀏覽器)、none(除以上外)。\u003C\u002Fli>\n\u003Cli>viewType：compact、tall、full。目前視窗的尺寸，可以在LIFF中設定。\u003C\u002Fli>\n\u003Cli>userId、groupId、roomId：不同的 type 會有不同的 ID。\u003C\u002Fli>\n\u003Cli>availability.shareTargetPicker.permission：能不能使用 shareTargetPicker 功能，可以在LIFF中打開。\u003C\u002Fli>\n\u003Cli>availability.shareTargetPicker.minVer：使用 shareTargetPicker 功能的需求版本是多少。\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>這邊就要提醒一下，Endpoint URL和LIFF URL打開來得到的使用者資訊是不同的，前者type為external後者為utou(如果是bot聊天)。\u003C\u002Fp>\n\u003Ch2>取得使用者公開資料\u003C\u002Fh2>\n\u003Cp>必須要使用者必須登入才能使用。回傳資料有四個：userId、暱稱、照片的圖片位置、狀態消息。除了userId外皆屬於完全公開資訊。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>liff.getProfile()\n    .then(function(profile) {\n    userdata.profile = profile;\n    console.log(userdata.profile);\n});\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>取得使用者 email\u003C\u002Fh3>\n\u003Cp>必須要使用者必須登入才能使用。也必須先在LIFF打開權限，並且使用者登入時需授權。\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F12%2F%E6%88%AA%E5%9C%96-2022-12-21-%E4%B8%8B%E5%8D%8812.01.58.png\" alt=\"\" \u002F>\u003Cbr \u002F>\n還要打開LIFF的Scopes權限(email*)\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F12%2F%E6%88%AA%E5%9C%96-2022-12-21-%E4%B8%8B%E5%8D%8812.05.21.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cpre>\u003Ccode> const user = liff.getDecodedIDToken();\n    userdata.user = user\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>發送訊息\u003C\u002Fh3>\n\u003Cp>使用者必須登入才能使用，分為對自己和對其他人。要先打開LIFF的Scopes權限(chat_message.write)，並且使用者在登入時要授權。\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F12%2F%E6%88%AA%E5%9C%96-2022-12-21-%E4%B8%8B%E5%8D%8812.05.21.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Ch3>對自己發送\u003C\u002Fh3>\n\u003Cp>只能在Line APP才能使用此功能，而且需要一對一聊天室，使用者資料的type須為utou，如果為group、room沒測試不知道能不能使用。external則不行。\u003C\u002Fp>\n\u003Cpre>\u003Ccode>const sendMessegeToSelf = () => {\n  \u002F\u002F 傳送訊息給自己\n  \u002F\u002F type 的可用值說明：https:\u002F\u002Fdevelopers.line.biz\u002Fen\u002Freference\u002Fliff\u002F#send-messages\n  liff.sendMessages([\n    {\n      type: 'text',\n      text: <發送訊息>\n    }\n  ])\n  .then(res => window.alert(res.status))\n  .catch(error => window.alert(error));\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>對其他人發送\u003C\u002Fh3>\n\u003Cp>type為external也可以使用，但記得要先開啟\u003Cem>shareTargetPicker\u003C\u002Fem>。\u003Cbr \u002F>\n\u003Cimg decoding=\"async\" src=\"\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F12%2F%E6%88%AA%E5%9C%96-2022-12-21-%E4%B8%8B%E5%8D%8812.08.03.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>const sendMessegeToOther = () => {\n  \u002F\u002F 傳送訊息給朋友\n  \u002F\u002F 發訊息的可用參數：https:\u002F\u002Fdevelopers.line.biz\u002Fen\u002Freference\u002Fliff\u002F#share-target-picker\n  if(sysdata.isLoggedIn && liff.isApiAvailable('shareTargetPicker')) {\n    liff.shareTargetPicker([\n      {\n        type: "text",\n        text: <發送訊息>\n      }\n    ])\n    .then(res => window.alert(res.status))\n    .catch(error => window.alert(error))\n  }\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>QRcode\u003C\u002Fh2>\n\u003Cp>很多人都會介紹，但IOS目前不能用，所以先筆記一下\u003C\u002Fp>\n\u003Cpre>\u003Ccode>liff.scanCode()\n  .then(function(res) {\n    console.log(res);\n  })\n  .catch(function(error) {\n    console.log(error);\n  });\u003C\u002Fcode>\u003C\u002Fpre>\n","2023-01-10T12:05:31","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F12%2FLINE_logo.svg.png",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,17,20],{"name":16,"slug":16},"frontend",{"name":18,"slug":19},"HTML","html",{"name":21,"slug":21},"vue","\u002Fblog\u002Fvue初探liff的一些筆記-開發篇",2]