開發Linebot(22) - 使用LIFF在Linebot上建立WebView/小程序

LINE 似乎覺得6/6是一個挺順的日子，終於選了這一天提供了類似FB Messenger上的WebView功能，LINE稱之為LIFF(LINE Front-end Framework)。

和Messenger一模一樣，LIFF有三種高度，分別是：

開發人員可以透過很簡單的http post呼叫，把特定的網頁(當然最好是RWD或手機版網頁)崁入/連結到某一個Line bot或是Line Login中。

如此一來，我們就可以在Line bot中，直接整合/開啟一個如同上面這樣的畫面來使用你自己開發的Web功能，當然，在網頁中你還可以透過js跟LINE或用戶有一些互動，諸如取得用戶身分之類的…

要如讓你的Line bot具有這樣的功能，很簡單，只需要呼叫下這樣的http post:

curl -X POST https://api.line.me/liff/v1/apps 
-H "Authorization: Bearer {你Linebot的Channel Access Token}"
-H "Content-Type: application/json"  
-d '{ "view":{ "type":"full或tall或campact", "url":"https://你的RWD網頁網址" } }'

其中header Authorization的bearer token的地方放你的line bot的channel access token，然後組一個JSON Body，在type的地方放你想要出現的WebView的大小，url的地方放一個https的網頁，最後對https://api.line.me/liff/v1/apps  送出POST，就可以針對指定的Line bot註冊該網頁，以便於以後把該網頁以WebView的方式崁入到你的line bot中。

當你對https://api.line.me/liff/v1/apps送出JSON之後，會得到類似底下這樣的JSON Response：

{
     "liffId": "1111111111-OxoxoxoxOx"
}

例如底下我用這樣的post把購物網站崁入我先前做的Line bot：
(注意，這只是個測試，實務上我們不建議你把別人的網站崁入你自己的Line bot，因為網址列後面可能會加上用戶參數或資訊，如果網站不是你自己開發的，可能會有個資外洩風險，而且亂嵌別人家的網頁也是沒有格調的事，對不起我錯了…)

然後把你取得的LIFF ID，組合成底下這樣的網址:
line://app/1111111111-OxoxoxoxOx

未來你就可以透過上面這樣的網址在Line bot中開啟WebView了：

上面這個就是我們剛才設定的大小為 tall 的WebView，它是怎麼被叫出來的呢? 其實只要當用戶在該Line bot中，點選剛才組出的 line://app/1111111111-OxoxoxoxOx 這樣的網址，就會自動叫出WebView，不過最簡單恰當的方式我自己覺得是Rich Menu，我們只需要把剛才組出的網址，填入Rich Menu作為url button即可：

這樣就可以在用戶點選該Button後，開啟WebView了：

其實還蠻簡單的，如此一來，你就可以不離開LINE App，在Line bot當中擴充/加入你所需要的功能了，當然，你在WebView開啟的RWD網頁中，可以透過js API取得用戶相關的資訊，或與用戶做一些互動，這些進階的功能，我們稍晚一些找時間再跟大家介紹囉。

-----------
線上課程：https://www.udemy.com/line-bot/
電子書：http://studyhost.blogspot.tw/2017/12/line-bot.html
LineBotSDK：https://www.nuget.org/packages/LineBotSDK
如果需要即時取得更多相關訊息，可按這裡加入FB專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。