開發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專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

留言

匿名表示…
老師您好,想請教一個問題,
我用POSTMAN 呼叫 LIFF API,
Add、Get all 兩個方法都成功,
但是用 Update、Delete 都是回403,
請問使用 PUT、DELETE 是否有需要額外注意什麼問題?
鄒仔寫道…
403應該第一關都沒過,token格式對?
update的id要正確,type要小寫;delete只要id,應該沒有特別不一樣的地方。
我都寫在bot中,直接下指令list、增加、刪除和更新。
Unknown寫道…
老師您好,文章內的例子是連到Https的網站,但如果是想要連到Http的網站要如何實現,
煩請老師指點
isDavid寫道…
@文捷林,

不行唷, Line規定你要用https
匿名表示…
老師您好
您是否可以寫個LIFF更新跟刪除的範例
isRock.LIFF.Utility.DeleteLiffApp(channelAccessToken, Liffid.apps[0].liffId);
我試了好幾種方法,回報都是錯誤訊息
"發生錯誤:
方法或作業尚未實作"
煩請老師指點
isDavid寫道…
to 匿名,

因為我還沒做... XD
isDavid寫道…
to 匿名,

請更新至最新版的SDK。

這個網誌中的熱門文章

使用 Airtable 在小型需求上取代傳統資料庫

精彩(且驚人)的Semantic Kernel入門範例

使用Semantic Kernel 建立自然語言請假系統

在 LINE Bot 開發中使用Semantic Kernel建立自然語言請假系統

專業的價值...