「ADAM 筆記」.NET Walker: 開發Linebot(22) – 使用LIFF在Linebot上建立WebView/小程序

    摘自: http://studyhost.blogspot.com/2018/06/linebot22-lifflinebotwebview.html?m=1

<

iframe src=\”http://studyhost.blogspot.com/2018/06/linebot22-lifflinebotwebview.html?m=1\” class=\”iframe-full-content\”>

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

4 則留言:

(function() {
var items = null;
var msgs = null;
var config = {};

// 0) {
cursor = parseInt(items[items.length – 1].timestamp) + 1;
}

var bodyFromEntry = function(entry) {
var text = (entry &&
((entry.content && entry.content.$t) ||
(entry.summary && entry.summary.$t))) ||
\’\’;
if (entry && entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == \’blogger.contentRemoved\’) {
return \’\’ + text + \’\’;
}
}
}
return text;
}

var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\\d+).post-(\\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + \’\’;
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\\/default\\/(\\d+)\\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = \’item-control blog-admin\’;
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == \’blogger.itemClass\’) {
comment.deleteclass += \’ \’ + entry.gd$extendedProperty[k].value;
} else if (entry.gd$extendedProperty[k].name == \’blogger.displayTime\’) {
comment.displayTime = entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};

var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + \’?alt=json&v=2&orderby=published&reverse=false&max-results=50\’;
if (cursor) {
url += \’&published-min=\’ + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length

  1. 老師您好,想請教一個問題,
    我用POSTMAN 呼叫 LIFF API,
    Add、Get all 兩個方法都成功,
    但是用 Update、Delete 都是回403,
    請問使用 PUT、DELETE 是否有需要額外注意什麼問題?

    回覆刪除

  2. 403應該第一關都沒過,token格式對?
    update的id要正確,type要小寫;delete只要id,應該沒有特別不一樣的地方。
    我都寫在bot中,直接下指令list、增加、刪除和更新。

    回覆刪除

  3. 老師您好,文章內的例子是連到Https的網站,但如果是想要連到Http的網站要如何實現,
    煩請老師指點

    回覆刪除

  4. @文捷林,

    不行唷, Line規定你要用https

    回覆刪除

BLOG_CMT_createIframe(\’https://www.blogger.com/rpc_relay.html\’);

window.___gcfg = { \’lang\’: \’zh-TW\’ };

window.setTimeout(function() {
document.body.className = document.body.className.replace(\’loading\’, \’\’);
}, 10);

var BLOG_BASE_IMAGE_URL = \’https://img2.blogblog.com/img\’;var BLOG_LANG_DIR = \’ltr\’;window[\’__wavt\’] = \’AOuZoY7IP1bieQjnGCS_TGcBicKPAi9NJg:1546050712263\’;_WidgetManager._Init(\’//www.blogger.com/rearrange?blogID\\x3d4291069679343025964\’,\’//studyhost.blogspot.com/2018/06/linebot22-lifflinebotwebview.html?m\\x3d1\’,\’4291069679343025964\’);
_WidgetManager._SetDataContext([{\’name\’: \’blog\’, \’data\’: {\’blogId\’: \’4291069679343025964\’, \’title\’: \’.NET Walker\’, \’url\’: \’http://studyhost.blogspot.com/2018/06/linebot22-lifflinebotwebview.html?m\\x3d1\’, \’canonicalUrl\’: \’http://studyhost.blogspot.com/2018/06/linebot22-lifflinebotwebview.html\’, \’homepageUrl\’: \’http://studyhost.blogspot.com/?m\\x3d1\’, \’searchUrl\’: \’http://studyhost.blogspot.com/search\’, \’canonicalHomepageUrl\’: \’http://studyhost.blogspot.com/\’, \’blogspotFaviconUrl\’: \’http://studyhost.blogspot.com/favicon.ico\’, \’bloggerUrl\’: \’https://www.blogger.com\’, \’hasCustomDomain\’: false, \’httpsEnabled\’: true, \’enabledCommentProfileImages\’: true, \’gPlusViewType\’: \’FILTERED_POSTMOD\’, \’adultContent\’: false, \’analyticsAccountNumber\’: \’\’, \’encoding\’: \’UTF-8\’, \’locale\’: \’zh-TW\’, \’localeUnderscoreDelimited\’: \’zh_tw\’, \’languageDirection\’: \’ltr\’, \’isPrivate\’: false, \’isMobile\’: true, \’isMobileRequest\’: true, \’mobileClass\’: \’ mobile\’, \’isPrivateBlog\’: false, \’feedLinks\’: \’\\x3clink rel\\x3d\\x22alternate\\x22 type\\x3d\\x22application/atom+xml\\x22 title\\x3d\\x22.NET Walker – Atom\\x22 href\\x3d\\x22http://studyhost.blogspot.com/feeds/posts/default\\x22 /\\x3e\\n\\x3clink rel\\x3d\\x22alternate\\x22 type\\x3d\\x22application/rss+xml\\x22 title\\x3d\\x22.NET Walker – RSS\\x22 href\\x3d\\x22http://studyhost.blogspot.com/feeds/posts/default?alt\\x3drss\\x22 /\\x3e\\n\\x3clink rel\\x3d\\x22service.post\\x22 type\\x3d\\x22application/atom+xml\\x22 title\\x3d\\x22.NET Walker – Atom\\x22 href\\x3d\\x22https://www.blogger.com/feeds/4291069679343025964/posts/default\\x22 /\\x3e\\n\\n\\x3clink rel\\x3d\\x22alternate\\x22 type\\x3d\\x22application/atom+xml\\x22 title\\x3d\\x22.NET Walker – Atom\\x22 href\\x3d\\x22http://studyhost.blogspot.com/feeds/7425536383625453005/comments/default\\x22 /\\x3e\\n\’, \’meTag\’: \’\’, \’adsenseHostId\’: \’ca-host-pub-1556223355139109\’, \’adsenseHasAds\’: false, \’ieCssRetrofitLinks\’: \’\\x3c!–[if IE]\\x3e\\x3cscript type\\x3d\\x22text/javascript\\x22 src\\x3d\\x22https://www.blogger.com/static/v1/jsbin/864213505-ieretrofit.js\\x22\\x3e\\x3c/script\\x3e\\n\\x3c![endif]–\\x3e\’, \’view\’: \’\’, \’dynamicViewsCommentsSrc\’: \’//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js\’, \’dynamicViewsScriptSrc\’: \’//www.blogblog.com/dynamicviews/7a0cbfc92c51aced\’, \’plusOneApiSrc\’: \’https://apis.google.com/js/plusone.js\’, \’sharing\’: {\’platforms\’: [{\’name\’: \’取得連結\’, \’key\’: \’link\’, \’shareMessage\’: \’取得連結\’, \’target\’: \’\’}, {\’name\’: \’Facebook\’, \’key\’: \’facebook\’, \’shareMessage\’: \’分享到 Facebook\’, \’target\’: \’facebook\’}, {\’name\’: \’BlogThis!\’, \’key\’: \’blogThis\’, \’shareMessage\’: \’BlogThis!\’, \’target\’: \’blog\’}, {\’name\’: \’Twitter\’, \’key\’: \’twitter\’, \’shareMessage\’: \’分享到 Twitter\’, \’target\’: \’twitter\’}, {\’name\’: \’Pinterest\’, \’key\’: \’pinterest\’, \’shareMessage\’: \’分享到 Pinterest\’, \’target\’: \’pinterest\’}, {\’name\’: \’Google+\’, \’key\’: \’googlePlus\’, \’shareMessage\’: \’分享到 Google+\’, \’target\’: \’googleplus\’}, {\’name\’: \’以電子郵件傳送\’, \’key\’: \’email\’, \’shareMessage\’: \’以電子郵件傳送\’, \’target\’: \’email\’}], \’googlePlusShareButtonWidth\’: 300, \’googlePlusBootstrap\’: \’\\x3cscript type\\x3d\\x22text/javascript\\x22\\x3ewindow.___gcfg \\x3d {\\x27lang\\x27: \\x27zh_TW\\x27};\\x3c/script\\x3e\’}, \’hasCustomJumpLinkMessage\’: false, \’jumpLinkMessage\’: \’閱讀完整內容\’, \’pageType\’: \’item\’, \’postId\’: \’7425536383625453005\’, \’postImageUrl\’: \’http://arock.blob.core.windows.net/blogdata201806/06-233340-748e40df-7dba-4c76-85a9-a896cca73b04.png\’, \’pageName\’: \’開發Linebot(22) – 使用LIFF在Linebot上建立WebView/小程序\’, \’pageTitle\’: \’.NET Walker: 開發Linebot(22) – 使用LIFF在Linebot上建立WebView/小程序\’}}, {\’name\’: \’features\’, \’data\’: {\’sharing_get_link_dialog\’: \’true\’, \’sharing_native\’: \’false\’}}, {\’name\’: \’messages\’, \’data\’: {\’edit\’: \’編輯\’, \’linkCopiedToClipboard\’: \’已將連結複製到剪貼簿!\’, \’ok\’: \’確定\’, \’postLink\’: \’文章連結\’}}, {\’name\’: \’template\’, \’data\’: {\’name\’: \’Awesome Inc.\’, \’localizedName\’: \’頂尖企業\’, \’isResponsive\’: false, \’isAlternateRendering\’: true, \’isCustom\’: false, \’variant\’: \’light\’, \’variantId\’: \’light\’}}, {\’name\’: \’view\’, \’data\’: {\’classic\’: {\’name\’: \’classic\’, \’url\’: \’?view\\x3dclassic\’}, \’flipcard\’: {\’name\’: \’flipcard\’, \’url\’: \’?view\\x3dflipcard\’}, \’magazine\’: {\’name\’: \’magazine\’, \’url\’: \’?view\\x3dmagazine\’}, \’mosaic\’: {\’name\’: \’mosaic\’, \’url\’: \’?view\\x3dmosaic\’}, \’sidebar\’: {\’name\’: \’sidebar\’, \’url\’: \’?view\\x3dsidebar\’}, \’snapshot\’: {\’name\’: \’snapshot\’, \’url\’: \’?view\\x3dsnapshot\’}, \’timeslide\’: {\’name\’: \’timeslide\’, \’url\’: \’?view\\x3dtimeslide\’}, \’isMobile\’: true, \’title\’: \’開發Linebot(22) – 使用LIFF在Linebot上建立WebView/小程序\’, \’description\’: \’LINE 似乎覺得6/6是一個挺順的日子,終於選了這一天提供了類似FB Messenger上的WebView功能,LINE稱之為LIFF(LINE Front-end Framework)。 和Messenger一模一樣,LIFF有三種高度,分別是: 開發人員可以透過很簡單的ht…\’, \’featuredImage\’: \’https://lh3.googleusercontent.com/proxy/gSJtTBVW88F4vGApCKshNsFePmrhUdNoCjw_zK8jMJsyGCl7IqNj5fQRos63dgvuiwIkSDbzEjx9n_k-u2SRKanEr3Ej64k1KYVpDBkAib_39Yg6akvvEKukYUiMXhuqkbmohroKMx6Skq3H0Fj0TRkIZdQUrTkP\’, \’url\’: \’http://studyhost.blogspot.com/2018/06/linebot22-lifflinebotwebview.html?m\\x3d1\’, \’type\’: \’item\’, \’isSingleItem\’: true, \’isMultipleItems\’: false, \’isError\’: false, \’isPage\’: false, \’isPost\’: true, \’isHomepage\’: false, \’isArchive\’: false, \’isLabelSearch\’: false, \’postId\’: 7425536383625453005}}]);
_WidgetManager._RegisterWidget(\’_HeaderView\’, new _WidgetInfo(\’Header1\’, \’header\’, document.getElementById(\’Header1\’), {}, \’displayModeFull\’));
_WidgetManager._RegisterWidget(\’_BlogView\’, new _WidgetInfo(\’Blog1\’, \’main\’, document.getElementById(\’Blog1\’), {\’cmtInteractionsEnabled\’: false, \’mobile\’: true}, \’displayModeFull\’));
_WidgetManager._RegisterWidget(\’_AttributionView\’, new _WidgetInfo(\’Attribution1\’, \’footer-3\’, document.getElementById(\’Attribution1\’), {}, \’displayModeFull\’));
_WidgetManager._RegisterWidget(\’_NavbarView\’, new _WidgetInfo(\’Navbar1\’, \’navbar\’, document.getElementById(\’Navbar1\’), {}, \’displayModeFull\’));

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *