{"id":3307,"date":"2025-12-01T17:57:37","date_gmt":"2025-12-01T09:57:37","guid":{"rendered":"https:\/\/blog.quantoyo.com\/?p=3307"},"modified":"2025-12-01T17:57:37","modified_gmt":"2025-12-01T09:57:37","slug":"line-bot-%e7%ad%86%e8%a8%98-liff-%e5%b5%8c%e5%85%a5%e5%bc%8f%e7%b6%b2%e9%a0%81","status":"publish","type":"post","link":"https:\/\/blog.quantoyo.com\/?p=3307","title":{"rendered":"LINE BOT \u7b46\u8a18 &#8211; LIFF \u5d4c\u5165\u5f0f\u7db2\u9801"},"content":{"rendered":"\n<p>\u76ee\u524dLINE Messaging API \u5df2\u7d93\u4e0d\u652f\u63f4 LIFF<br>\u9700\u8981\u5efa\u7acb LINE Login<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>\u9019\u662f\u5b98\u65b9\u63d0\u4f9b\u7684\u65b9\u6cd5\uff0c\u4e26\u4e0d\u662f\u4e82\u641e<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1158\" height=\"684\" src=\"https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image.png\" alt=\"\" class=\"wp-image-3308\" style=\"width:372px;height:auto\" srcset=\"https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image.png 1158w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-300x177.png 300w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-150x89.png 150w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-768x454.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p>\u53ea\u8981\u662f\u5e33\u865f\u5167\u7684 LINE Login \u5efa\u7acb\u7684LIFF \uff0c\u90fd\u53ef\u4ee5\u5728\u540c\u5e33\u865f\u5167\u7684Messaging API \u4f7f\u7528\uff0c\u6c92\u554f\u984c\uff01<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1034\" height=\"602\" src=\"https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-1.png\" alt=\"\" class=\"wp-image-3309\" style=\"width:339px;height:auto\" srcset=\"https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-1.png 1034w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-1-300x175.png 300w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-1-150x87.png 150w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-1-768x447.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p>\u5efa\u7acb\u65b9\u6cd5\u633a\u7c21\u55ae\u7684\uff0c\u5230LIFF \u9801\u9762\u6309 Add<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"276\" src=\"https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-2.png\" alt=\"\" class=\"wp-image-3310\" style=\"width:301px;height:auto\" srcset=\"https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-2.png 902w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-2-300x92.png 300w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-2-150x46.png 150w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-2-768x235.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"405\" src=\"https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-4.png\" alt=\"\" class=\"wp-image-3312\" style=\"width:457px;height:auto\" srcset=\"https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-4.png 650w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-4-300x187.png 300w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-4-150x93.png 150w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p>Full \u5c31\u662f\u5168\u87a2\u5e55\uff0cTall \u5927\u69823\/4 \uff0cCompact \u662f\u534a\u500b\u87a2\u5e55\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1114\" height=\"432\" src=\"https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-3.png\" alt=\"\" class=\"wp-image-3311\" style=\"width:320px;height:auto\" srcset=\"https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-3.png 1114w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-3-300x116.png 300w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-3-150x58.png 150w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-3-768x298.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p>\u9019\u908a\u9700\u8981\u6709\u81ea\u5df1\u7684domain\uff0c\u4e26\u4e14\u4e00\u5b9a\u8981\u6709SSL \u9023\u7dda (https)<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1182\" height=\"382\" src=\"https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-5.png\" alt=\"\" class=\"wp-image-3313\" style=\"width:428px;height:auto\" srcset=\"https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-5.png 1182w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-5-300x97.png 300w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-5-150x48.png 150w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-5-768x248.png 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p>openid\uff1a\u53ef\u4ee5\u5728\u9801\u9762\u5167\u53d6\u5f97ID<\/p>\n\n\n\n<p>liff.getIDToken()<\/p>\n\n\n\n<p>liff.getDecodedIDToken()<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>profile\uff1a\u53ef\u4ee5\u5728\u9801\u9762\u5167\u53d6\u5f97\u958b\u555f\u7684\u4f7f\u7528\u8005\u7684\u8cc7\u8a0a<\/p>\n\n\n\n<p>liff.getProfile()    =====> \u9019\u500b\u7279\u5225\u91cd\u8981<\/p>\n\n\n\n<p>liff.getFriendship()<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>chat_message.write\uff1a \u5982\u679c\u60f3\u5728\u7db2\u9801\u66ff \u4f7f\u7528\u8005\u5728 LINE \u804a\u5929\u5ba4\u9001\u8a0a\u606f\uff0c\u8981\u52fe\u9019\u500b<\/p>\n\n\n\n<p>liff.sendMessages()  ======> \u9019\u4e5f\u5f88\u5e38\u7528<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1654\" height=\"304\" src=\"https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-6.png\" alt=\"\" class=\"wp-image-3314\" srcset=\"https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-6.png 1654w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-6-300x55.png 300w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-6-150x28.png 150w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-6-768x141.png 768w, https:\/\/blog.quantoyo.com\/wp-content\/uploads\/2025\/12\/image-6-1536x282.png 1536w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p>\u65b0\u589e\u5f8c\u6703\u62ff\u5230 LIFF ID \u8ddf URL<br>LIFF URL \u6703\u5c07\u7db2\u9801\u5c0e\u5230\u6211\u5011\u8a2d\u5b9a\u7684\u7db2\u5740\u3002<br>\u4f7f\u7528\u6642\uff0c\u5c07LIFF ID \u653e\u5230js \u5167<\/p>\n\n\n\n<pre class=\"wp-block-code has-cyan-bluish-gray-background-color has-background has-small-font-size\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"zh-Hant\">\n&lt;head>\n&lt;meta charset=\"utf-8\">\n&lt;title>\u9078\u64c7\u5929\u6578&lt;\/title>\n&lt;script src=\"https:\/\/static.line-scdn.net\/liff\/edge\/2\/sdk.js\">&lt;\/script>\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n&lt;style>\nbody {\n  font-family: \"Noto Sans TC\", \"Microsoft JhengHei\", sans-serif;\n  background: linear-gradient(180deg, #f3f8ff, #e9f0fa);\n  margin: 0;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n}\n\n.card {\n  background: #fff;\n  border-radius: 16px;\n  box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n  padding: 30px 25px;\n  max-width: 340px;\n  width: 90%;\n  text-align: center;\n}\n\nh2 {\n  color: #333;\n  font-size: 20px;\n  margin-bottom: 15px;\n}\n\np {\n  color: #555;\n  font-size: 16px;\n  margin-bottom: 20px;\n}\n\nselect {\n  width: 100%;\n  padding: 10px 12px;\n  font-size: 16px;\n  border: 1px solid #ccc;\n  border-radius: 8px;\n  outline: none;\n  appearance: none;\n  background-color: #fafafa;\n  margin-bottom: 25px;\n  transition: all 0.2s ease;\n}\n\nselect:focus {\n  border-color: #007bff;\n  box-shadow: 0 0 4px rgba(0, 123, 255, 0.4);\n}\n\nbutton {\n  width: 100%;\n  background: #007bff;\n  color: white;\n  border: none;\n  padding: 12px;\n  font-size: 16px;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: background 0.3s ease;\n}\n\nbutton:hover {\n  background: #0056b3;\n}\n&lt;\/style>\n&lt;\/head>\n&lt;body>\n  &lt;div class=\"card\">\n    &lt;h2>\u8acb\u9078\u64c7\u60f3\u8cfc\u8cb7\u7684\u5929\u6578&lt;\/h2>\n    &lt;h4>\u9700\u898150\u5143\u4ee5\u4e0a\u8a02\u55ae\u624d\u53ef\u4ee5\u5237\u5361&lt;\/h4>\n    &lt;p>\u65b9\u6848\uff1a&lt;span id=\"title\">&lt;\/span>&lt;\/p>\n    &lt;select id=\"days\">&lt;\/select>\n    &lt;button id=\"submit\">\u9001\u51fa&lt;\/button>\n  &lt;\/div>\n\n&lt;script>\nconst liffId = \"2008370198-1502eNr8\"; \/\/ \u63db\u6210\u4f60\u7684 LIFF ID\n\nasync function main() {\n  await liff.init({ liffId });\n  const urlParams = new URLSearchParams(window.location.search);\n  const title = urlParams.get('title');\n  const plan = urlParams.get('plan');\n  const NTD = urlParams.get('NTDPerDay');\n  const limitNTD = urlParams.get('limitNTD');\n  document.getElementById('title').textContent = title || \"\u672a\u77e5\u65b9\u6848\";\n\n  \/\/ \u5efa\u7acb\u4e0b\u62c9\u9078\u55ae (1\uff5e365)\n  const select = document.getElementById('days');\n  for (let i = 1; i &lt;= 365; i++) {\n    const opt = document.createElement('option');\n    opt.value = i;\n    opt.textContent = `${i} \u5929     \u5171${i*NTD}\u5143`;\n    if(i*NTD >= limitNTD){\n        select.appendChild(opt);\n    }\n  }\n\n  document.getElementById('submit').onclick = async () => {\n    const days = select.value;\n    const msg = `\u65b9\u6848\uff1a${title}\\n\u5929\u6578\uff1a${days} \u5929\\n\u4ee3\u78bc\uff1a${plan}@${days}`;\n\n    try {\n      await liff.sendMessages(&#91;{ type: \"text\", text: msg }]);\n      alert(\"\u2705 \u5df2\u9001\u51fa\u9078\u64c7\uff0c\u8acb\u56de\u5230 Line \u67e5\u770b\u7d50\u679c\");\n      liff.closeWindow();\n    } catch (e) {\n      console.error(\"sendMessages error:\", e);\n      alert(\"\u274c \u767c\u9001\u5931\u6557\uff1a\" + e.message);\n    }\n  };\n}\n\nmain();\n&lt;\/script>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>\u4ee5\u4e0a\u5c31\u662f\u4e00\u500b\u7c21\u55ae\u7684\u7bc4\u4f8b\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code has-cyan-bluish-gray-background-color has-background has-small-font-size\"><code> (async function initLiff() {\n        try {\n            await liff.init({ liffId: LIFF_ID });\n            \n            \/\/ 1. \u5982\u679c\u6c92\u767b\u5165\uff0c\u5148\u767b\u5165\n            if (!liff.isLoggedIn()) {\n                liff.login();\n                return; \/\/ \u767b\u5165\u6703\u8df3\u8f49\uff0c\u9019\u88e1\u505c\u6b62\u57f7\u884c\n            }\n            \/\/ 2. \u53d6\u5f97\u4f7f\u7528\u8005\u8cc7\u6599\n            const profile = await liff.getProfile();\n            const currentUserId = profile.userId;\n            const currentUserName = profile.displayName;\n        } catch (error) {\n            console.error(\"LIFF \u521d\u59cb\u5316\u5931\u6557\", error);\n        }\n    })();<\/code><\/pre>\n\n\n\n<p>\u4e5f\u53ef\u4ee5\u6539\u6210\u9019\u6a23\uff0c\u53d6\u5f97 profile \u5f8c\uff0c\u5c31\u53ef\u4ee5\u62ff\u5230userId \u8ddf \u986f\u793a\u7684\u540d\u5b57\u3002<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u76ee\u524dLINE Messaging API \u5df2\u7d93\u4e0d\u652f\u63f4 LIFF\u9700\u8981\u5efa\u7acb LINE Login<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[566,560,70,563,562,564,565,561],"class_list":["post-3307","post","type-post","status-publish","format-standard","hentry","category-technology","tag-displayname","tag-liff","tag-line","tag-line-login","tag-line-","tag-messaging-api","tag-userid","tag-561"],"_links":{"self":[{"href":"https:\/\/blog.quantoyo.com\/index.php?rest_route=\/wp\/v2\/posts\/3307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.quantoyo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.quantoyo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.quantoyo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.quantoyo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3307"}],"version-history":[{"count":1,"href":"https:\/\/blog.quantoyo.com\/index.php?rest_route=\/wp\/v2\/posts\/3307\/revisions"}],"predecessor-version":[{"id":3315,"href":"https:\/\/blog.quantoyo.com\/index.php?rest_route=\/wp\/v2\/posts\/3307\/revisions\/3315"}],"wp:attachment":[{"href":"https:\/\/blog.quantoyo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.quantoyo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.quantoyo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}