Line bot LIFF v2 將建立 LIFF 功能移到 Line Login Channel，雖然原先建立的 LIFF 仍可執行，但未定何時會失效，官網建議將所有 LIFF 移到 Line Login Channel。新建的 Messaging Channel 則必須在 Line Login Channel 建立 LIFF。
「Python 與 Line bot 機器人」書中第七章需做修正。
建立 Line Login Channel
在 Line Developer 中點選「Create a new Channel」。
再點選「LINE Login」。
App Type 欄選擇「Web app」，輸入各項必填資料欄位，核取同意版權核選方塊，按「Create」鈕。
建立 LIFF
點選「LIFF」頁籤，按「Add」鈕。
按照書中建立「PCHOME」LIFF (Scopes 欄選「openid」及「chat_message.write」，Bot link feature 欄選「On (Normal)」)，按「Add」鈕建立LIFF。
點選「PCHOME」。
複製 LIFF URL 連結網址。
修改 ehappyFunc5 圖文選單中的「B」項目：類型改為「連結」，網址為剛才複製的網址。
修改 ehappyFunc5 圖文選單中的「C」項目：類型改為「連結」，使用同樣方式參考書籍建立 LIFFform，並將網址複製到「C」項目的網址。
最後儲存圖文選單。
發布 Line Login Channel
Line Login Channel 必須發布才有作用：點選 Line Login Channel 名稱下方的「Developing」，於對話方塊中按「Publish」鈕，當文字顯示為「Published」時表示已發布。
修改 SDK
Line bot LIFF v2 的 DK 網址改為「https://static.line-scdn.net/liff/edge/2.1/sdk.js」：修改 < index_form.html> 檔第 6 列為：
<script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
< index_form.html> 完整程式碼：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1" />
5 <title>LIFF 表單測試</title>
6 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
7 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
8 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
9 </head>
10 <body>
11 <div class="row" style="margin: 10px">
12 <div class="col-12" style="margin: 10px">
13 <label>姓名</label>
14 <input type="text" id="name" class="form-control" />
15 <br />
16 <label>日期</label>
17 <input type="date" id="datetime" value="" class="form-control" />
18 <br />
19 <label>包廂</label>
20 <select id="sel_room" class="form-control">
21 <option selected>生龍廳</option>
22 <option>活虎廳</option>
23 <option>美鳳廳</option>
24 <option>帥凰廳</option>
25 <option>不使用包廂</option>
26 </select>
27 <br />
28 <button class="btn btn-success btn-block" id="sure">確定</button>
29 </div>
30 </div>
31
32 <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
33 <script>
34 function initializeLiff(myLiffId) {
35 liff
36 .init({
37 liffId: myLiffId
38 });
39 }
40
41 function pushMsg(pname, pdatatime, proom) {
42 if (pname == '' || pdatatime == '' || proom == '') { //資料檢查
43 alert('每個項目都必須輸入！');
44 return;
45 }
46 var msg = "###"; //回傳訊息字串
47 msg = msg + pname + "/";
48 msg = msg + pdatatime + "/";
49 msg = msg + proom;
50 liff.sendMessages([ //推播訊息
51 { type: 'text',
52 text: msg
53 }
54 ])
55 .then(() => {
56 liff.closeWindow(); //關閉視窗
57 });
58 }
59
60 $(document).ready(function () {
61 initializeLiff('1654154869-O5npdEkj');
62 $('#sure').click(function (e) { //按下確定鈕
63 pushMsg($('#name').val(), $('#datetime').val(), $('#sel_room').val());
64 });
65 });
66 </script>
67 </body>
68 </html>
存檔後重新上傳到 Heroku 即可。
沒有留言:
張貼留言