[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-line初探liff的一些筆記-申請篇":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":17,"minRead":18},3335,"line初探liff的一些筆記-申請篇","[Line]初探LIFF的一些筆記-申請篇","初探LIFF的一些筆記-申請篇 LIFF ( LINE Front-end Framework ) 是Line […]","\u003Ch1>初探LIFF的一些筆記-申請篇\u003C\u002Fh1>\n\u003Cp>LIFF ( LINE Front-end Framework ) 是Line推出的一種前端框架，可以將功能與Line直接整合，藉此取得使用者user資料、進行部分操作。\u003Cbr \u002F>\n用這玩意能完美的與Line bot連動，透過使用 Line Login 或 Account Link 的網站進行使用者資料串接，進而製作更全面性的整合行銷服務。\u003Cbr \u002F>\n在開發前須先申請LIFF服務。\u003C\u002Fp>\n\u003Ch2>建立LIFF\u003C\u002Fh2>\n\u003Cp>須先登入\u003Ca href=\"https:\u002F\u002Fdevelopers.line.biz\u002F\" title=\"LINE Developers\">LINE Developers\u003C\u002Fa>，新增 Providers，接著點進建立好的 Providers，按下「Create a new channel」，會看見有五種 channel 模式可選，選擇「Create a LINE Login channel」，之後 App types 要用 \u003Cstrong>\u003Cem>Web app\u003C\u002Fem>\u003C\u002Fstrong>\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.22.44.png\" alt=\"\" \u002F>\u003C\u002Fp>\n\u003Ch2>設定LIFF\u003C\u002Fh2>\n\u003Cp>建立好後，可以點進該 channel，就能看到一個分頁名為 LIFF 。點擊新增 Add 就能建立一個 LIFF 的服務。以下為幾點設定說明。\u003C\u002Fp>\n\u003Ch3>Size\u003C\u002Fh3>\n\u003Cp>有三個值：Full、Tall、Compact。這個設定就是當使用 LINE 打開 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.28.08.png\" alt=\"\" \u002F>\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fdevelopers.line.biz\u002Fen\u002Fdocs\u002Fliff\u002Foverview\u002F#screen-size\" title=\"參考文件\">參考文件\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch3>Endpoint URL\u003C\u002Fh3>\n\u003Cp>當我們點擊 LIFF url 後，會有個實際打開的位置，就是這邊設定，只能是 https 開頭的。\u003C\u002Fp>\n\u003Ch3>Scopes\u003C\u002Fh3>\n\u003Cp>Scopes指的是我們想要透過LIFF取哪些資料？但實際上使用者也需授權才能真的取得。有 chat_message.write, openid, profile, email，這在開發篇才會真的用到。\u003C\u002Fp>\n\u003Ch3>Scan QR\u003C\u002Fh3>\n\u003Cp>打開 QRcode 的權限，IOS不能用，所以我開了也沒用到。\u003C\u002Fp>\n\u003Ch3>Bot link feature\u003C\u002Fh3>\n\u003Cp>LINE Login Channel 中可以在使用者登入時詢問是否加好友的功能選項：\u003Cbr \u002F>\nOn (Normal)：預設將官方帳號加為好友\u003Cbr \u002F>\nOn (Aggressive)：另外跳出視窗詢問是否要加官方帳號為好友\u003Cbr \u002F>\nOff：不做\u003C\u002Fp>\n\u003Ch3>Module mode\u003C\u002Fh3>\n\u003Cp>似乎是可以透過按鈕或其他形式分享這個LIFF，沒有特別使用，\u003Ca href=\"https:\u002F\u002Fdevelopers.line.biz\u002Fen\u002Fdocs\u002Fliff\u002Foverview\u002F#screen-size\" title=\"參考文件\">參考文件\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch2>關於開發\u003C\u002Fh2>\n\u003Cp>就參考\u003Ca href=\"https:\u002F\u002Fpost.billxu.net\u002Fvue初探liff的一些筆記-開發篇\u002F\" title=\"初探liff的一些筆記-開發篇\">初探liff的一些筆記-開發篇\u003C\u002Fa>囉！\u003C\u002Fp>\n","2023-01-10T12:00:44","\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],{"name":16,"slug":16},"frontend","\u002Fblog\u002Fline初探liff的一些筆記-申請篇",1]