2018年6月6日 星期三

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

沒有留言: