開發Line APP的應用(二)
!!注意!!: 請勿使用本文所描述之技術運用於嵌入LINE應用之釣魚網站/應用程式嘗試竊取用戶資訊!
事前準備: 一組可登入LINE的帳號密碼, 一支已安裝LINE且登入LINE的智慧型手機, 一台可使用網頁瀏覽器的桌上型/筆記型電腦並安裝ngrok
(ngrok web: https://ngrok.com/)
預備知識: web server與http request的入門級知識, 需要有使用過命令列介面的經驗
程式語言: Python3.7, 請事先於電腦上配置好Python開發環境(需安裝requests, line-bot-sdk與flask套件), 部分程式碼運行結果會使用jupyter notebook呈現
額外選項: Git, 本文所提到的原始程式碼或參考資料皆上傳至 https://bitbucket.org/BlockChen_PT/my-linedev/src/master/
1. 建立一個開發者測試用的LINE channel:
1.1. 登入LINE開發者網站 https://developers.line.biz/zh-hant/
(手機上的LINE會提示有人登入LINE Business ID)
(如果第一次使用這個網站,會需要填寫個人資料註冊為LINE開發者)
1.2. 點開右上角的下拉選單, 點選Add new provider
1.3. 點擊Create
1.4. 替providers取個名字, 本範例為testliff
1.5. 接著點選中間的圖示, Create a Messaging API channel
1.6. 填寫表單建立Channel, 以下列出範例填上的值
Channel name: testliff
Channel description: testliff
Category: 其他在地店家
Subcategory: 其他在地店家
Email adress: (請填上自己的email信箱)
Privacy policy URL: (先不填)
Terms of use URL: (先不填)
1.7. 現在我們已經建立了測試用的channel
請記下並妥善保管channel的重要資訊(本範例之Channel ID與secret已失效):
Channel ID: 1653599741
Channel secret: 51b0ab12e9a426f470d294c9d11017a1
注意: Channel ID與secret為發送訊息至LINE Channel上的憑證資訊, 請勿隨意交付產品的Channel ID與secret給他人
2. 取得於Channel內進行訊息收發的Channel access token:
2.1. 點擊Messaging API的分頁標籤
2.2. 於分頁往下找到Channel access token的欄位, 點擊右側的issue按鈕生成token
請記下並妥善保管此token
(生成token後, 點擊右側的reissue按鈕,會生成新的token並將舊的作廢; 本範例的token已作廢, 請勿使用)
注意: token為發送訊息至LINE Channel之憑證資訊, 請勿隨意交付產品的token給他人
2.3. 你可以使用LINE內建的自動回話功能(點擊右邊的Edit去編輯Auto-reply messages功能即可)
雖然可以透過自動回話的機器人與用戶互動, 但這樣是無法接收用戶資訊的
相信來看本範例的人對這種單純填設定的東西興趣不大, 故略過設定說明
本範例將示範訊息由LINE拋到自己搭建的http服務器
3. 於網路上公開一個簡易http服務器:
3.1. 於本機上啟動一個http服務器
3.1.1. 請下載服務器的python原始碼(testserver.py) https://bitbucket.org/BlockChen_PT/my-linedev/src/master/testserver.py
3.1.2. 將原始碼中的三個參數: CHANNELID, ACCESS_TOKEN, CHANNEL_SECRET的值修改為步驟1.7與2.2取得的資訊
3.1.3. 請打開命令列, 運行python testserver.py, 運行成功會顯示Running on http://127.0.0.1:8080/ (Press CTRL+C to quit)
3.1.4. 打開jupyter noetebook, 隨手敲一段http request代碼測試能否從這個web server取得http狀態碼200與文字ok的訊息
(可以由此下載這段程式碼 https://bitbucket.org/BlockChen_PT/my-linedev/src/master/test-http-request.py)
3.1.5. 服務器端也應該會記錄到這次的請求測試(testserver會生成testserver.log文件於運行目錄下)
本機端服務器啟動後, 接著我們需要經由ngrok發布到網路上
3.2. 啟動ngrok, 並指定將本機上port:8080的服務公開出去
3.2.1. 打開命令列介面, 打上指令運行(ngrok http http://127.0.0.1:8080)
3.2.2. 出現Forwarding表示運行成功
需要紀錄的資訊是 https://8adb3485.ngrok.io
這裡的意思是, 網際網路上的用戶只需要使用這個網址https://8adb3485.ngrok.io送出https的request,
ngrok就能將這個request轉拋到我們的電腦本機上的服務(本範例是http://127.0.0.1:8080),
然後將服務器處理的結果尋原路拋回去給網路上的用戶
注意: 每次啟動ngrok都會隨機生成網址, 本範例8adb3485的字串是ngrok隨機生成的, 因此無法用ngrok搭建穩定的網站
3.2.3. 測試ngrok轉發功能, 使用3.1.4相同的程式碼, 僅需替換網址為ngrok發行的https網址
注意: 請測試https, 因LINE規定只能串聯https服務器, 不支援http服務器
查看ngrok狀況會顯示轉發了一筆GET的request, 並回應200 OK
當然服務器也會顯示接收到一筆request;
現在我們萬事俱備, 只欠串聯到LINE上
4. 將LINE與http服務器進行串聯
4.1. 在2.1步驟的頁面上找到Webhook settings的選單, 啟用Use webhook並填寫Webhook URL
Webhook URL請填上ngrok提供的https網址
4.2. 點擊Verify按鈕, 進行通訊驗證
4.3. 順利完成驗證會提示Success
4.4. 此時查看ngrok, 會發現LINE的驗證其實是POST訊息過來(只要答覆http狀態碼200就會通過驗證)
且http服務器也會打印出POST的資料內容,
可以看出是一個json格式的資料,
由userID, replyToken等訊息可看出這是LINE測試使用的資料
4.5. 找到2.3步驟提示的Auto-reply messages, 點擊右邊的Edit
4.6. 到新開的視窗, 找到進階設定,啟用Webhook, 大功告成
5. 手機上進行測試
5.1. 用手機上的LINE加入好友提供的掃QR code功能, 掃一下測試用的Channel QR code
這樣我們就能夠加入自己創建好的Channel內
5.2. 在Channel上隨便打訊息送出, 觀察ngrok與http服務器收到的訊息
可以在http服務器上看到, message, text放的正是範例測試時送出的訊息
(userId為個人資料, 本範例僅保留前後幾碼)
5.2.1 如果需要編輯/關閉LINE機器人回話,
可於步驟4.6的頁面, 點擊加入好友的歡迎訊息與自動回應訊息做設定,
本範例不做說明
6. 將http服務器的回應推送回Channel, 可用於取代LINE的自動回話
6.1. 回到4.1步驟的頁面, 將ngrok網址後面加上/callback (這是testserver.py已寫好的路由), 點擊update與Verify
6.2. 使用手機於測試用的LINE Channel上發送訊息
現在除了LINE 自動回話外, 應該能看到http服務器的回話"We got msg: OOXX from user id: 12345678..."
[現在, 你可以關掉LINE的自動回話, 讓用戶與自己的服務器"直接對話"]
預告: 因篇幅過長, LINE的userID如何轉換成uer profile與email移到下回分解...
