開發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。

這個網誌中的熱門文章

原來使用 .net 寫個 MCP Server 如此簡單

使用LM Studio輕鬆在本地端以API呼叫大語言模型(LLM)

開啟 teams 中的『會議轉錄(謄寫)』與Copilot會議記錄、摘要功能

原來使用 .net 寫個 MCP Client 也如此簡單

使用 Dify 建立企業請假機器人