1.使用 brew 下載 ngrok

brew cask install ngrok 

2.安裝 NodeJS

brew install node 

3.下載官網 Node.JS 範例

直接去下載

官網範例Github

或是clone這個網址

git clone https://github.com/line/line-bot-sdk-nodejs.git

4.cd 到 echo-bot 資料夾

剛剛下載的範例檔案解壓縮
開啟CMD (終端機)
– cd到路徑裡面

cd line-bot-sdk-nodejs-master/examples/echo-bot
  • 安裝套件
npm install

5.至Line 複製 Channel secret

至 https://developers.line.biz/
點擊 Basic settings 複製 Channel secret

wp editor md 4336817fdd7157fd72519f7dd5be06c2

  • 設定全域變數 CHANNEL_SECRET=你的金鑰
$ export CHANNEL_SECRET=2766f7ea25a98a487a2df

6.至Line 複製 Channel access token

至 Messaging API
複製 Channel access token

wp editor md 8b9afc6c6ef400553b8ce0ee12d8ed5f

  • 設定全域變數 CHANNEL_ACCESS_TOKEN=你的token
$ export CHANNEL_ACCESS_TOKEN=1RmR+ed9P6r854vOa0SI19luFnDFZ4EJh2

7.設定開啟伺服器port號

PORT號任意都可以

export PORT=9999

8.開啟伺服器

$ npm start

wp editor md 1bc38ba794efcb32c9f1d2791acaf5d8

9.另開一個CMD 並且開啟 ngrok

開啟另一個CMD 並開啟ngrok
並監聽同一個port號

ngrok http 9999

wp editor md 5c51a34f45f959d1b54d16457ff45291

執行以後回傳的連結 先記著

https://a9e52ca76f57.ngrok.io

10.Line Notify 連動

至 https://notify-bot.line.me/
並且填入剛剛的連結至 Callback URL = https://a9e52ca76f57.ngrok.io

wp editor md 616578f7dc1eb095ff0144f8ba34206a

11.製作授權連結

至 https://notify-bot.line.me/
最上方 Client IDCallback URL
兩個需要取用 先記住

wp editor md 2724966d809b4b357fe5509d74e33f8f

最上方 Client ID 與 Callback URL
對應 client_id 與 redirect_uri

範例

https://notify-bot.line.me/oauth/authorize?response_type=code&scope=notify&response_mode=form_post&client_id=mYe26E2asdsadMRy5yVIE0m&redirect_uri=https://f5e5asdsda32b1.ngrok.io&state=f094a459-1d16-42d6-a709-c2b61ec53d60

api資訊

https://notify-bot.line.me/oauth/authorize

response_type = code
response_mode = form_post
client_id = 你的ID
redirect_uri = 你的callBack連結
state=隨意填寫 Line會使用這個直下去Hash加密

12.點擊連結並授權

wp editor md 3fe9a31e76b6904eb5fcc3c0a18c9625

Line會推播訊息授權成功

wp editor md 1f245779f5361e7f27e99e90805f1710

13.至ngrok後台看回傳資訊

至 http://127.0.0.1:4040/inspect/http
會有剛剛點擊連結並授權的回傳值

wp editor md be3ead8c6e3c72f80d41220194506ca6

並請有使用者的code
這個等等會用到先記起來

wp editor md a2d61c6f19e449d0e72afb603d71759f

14.Post使用者Code轉換成access_token

API

https://notify-bot.line.me/oauth/token

grant_type=authorization_code
redirect_uri=你的CallBack連結
client_id=你的ID
client_secret=LINE Notify 顯示 client_secret
wp editor md 0278043164816ad6fd33bc52a19493e9
code=剛剛使用者的回傳帶入

wp editor md b89eaba30d751674f0faba2ef58bc6d4

15.有access_token就可以用Notify推播了

不清楚的可以參考我上一篇教學

wp editor md a2b5d84a419f8936e5ebdfb5d7c04f2e

wp editor md ebe9a466bd42d8db083a2f050940e971

wp editor md fdcd3341953b3f60d8b19354607ce3bb

更多Line技術文章

[教學] Line Notify 推播不求人 – 範例 (Python,PHP,PostMan)


Line Bot 連動 Line Notify (Mac安裝)
[教學] Line Bot 機器人不求人 – 範例 (Python)


cup 1 1

Categorized in: