利用ngrok在localhost測試https Webhook

撰寫Webhook最幹的事情,就是它往往會限定你要用掛載https且具備DomainName的網址,具備這樣的條件大都是正式網站才有這樣的環境,而程式設計師看看自己的本機(localhost)往往只能默默的滴下眼淚,最慘的是有可能根本搞不清楚來源端送過來的JSON格式,最後只能用最原始的Print Log或通靈的方式來撰寫程式碼來佈署測試,ngrok是一個解決這個問題的好工具。

接下來我們來練習一下怎麼使用ngrok。

ngrok設定方式

Step 1. 先去ngrok申請一個屬於你自己的帳號。

Step 2. 下載ngrok執行檔案,如果你是Windows環境,那麼解壓縮後就是一支Console模式下的程式碼罷了。

Step 3. 登入你的ngrok帳號,在頁面的Auth選項中,找到個人的「Your Authtoken」並將其複製下來(做一次就好)。

Step 4. 打開Console執行ngrok,並輸入下列指令讓你的Tunnel Authtoken被寫入ngrok.yml(指令碼格式請詳閱線上網站,因為可能隨時會有更迭)。

ngrok authtoken 貼上你在步驟三複製的TunnelAuthtoken

Step 5. 打開你的localhost測試環境,記下現在的Localhost Http Port Number(假設是8080),並在Concole視窗輸入下列指令。

ngrok http 8080

Step 6. 接著你會看到下列畫面,其中Forward裡面有一個https的亂數網址(每次執行都會換掉),那個就是你要複製起來去某服務登錄Webhook的字串了。

以上就是ngrok的操作方式。另外有幾點注意事項如下:

  1. 因為他是一支Console模式程式,因此在除錯的期間必須讓Console視窗留著,按下Ctrl+C可以關閉服務。
  2. 當你關閉後再重新執行一次ngrok,那麼你的Webhook字串就會被更換,因此必須重新再跑一次Console使其向遠端註冊。(廠商故意的!覺得麻煩就花錢。)
  3. Console在response時期會有資訊跳出,另外也可以透過固定網址:http://127.0.0.1:4040看到更多Request、Response詳細資訊。(有提供迷你HttpService)

補充說明:

實作上若有遇到400 Bad Request的錯誤,或者得到下列的錯誤資訊輸出:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
    <TITLE>Bad Request</TITLE>
    <META HTTP-EQUIV="Content-Type" Content="text/html; charset=us-ascii">
</HEAD>
<BODY>
    <h2>Bad Request - Invalid Hostname</h2>
    <hr>
    <p>HTTP Error 400. The request hostname is invalid.</p>
</BODY>
</HTML>

可以試著用下列的啟動指令解決:

ngrok http 8080 --host-header="localhost:8080"
ngrok Install Http Https Webhook Bot ChatBot Telegram Whatsapp Line IM InstantMessage