LINE 電子商務 API

開發Line APP的應用(二)

陳建宇 Block Chen 2019/12/03 17:07:23
103

!!注意!!: 請勿使用本文所描述之技術運用於嵌入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移到下回分解...

陳建宇 Block Chen