tags: .NET6 C#, LineBot, Line Messaging API

[Day 4] 讓 C# 也可以很 Social - .NET 6 C# 與 Line Services API 開發 - 建立 Line Bot Webhook連線

前言

Hello 各位觀眾好，今天終於要進入整個 Line Services API 實作的環節了，今天這篇主題是建立 Line Bot webhook 連線，本篇結束之後你就能看到使用者與 Line Bot 互動的事件透過 ngrok 服務傳送到你的伺服器。

Channel Access Token ＆ Channel Secret

Channel access token 可看作 Line bot 的身分證號碼，後續在操作 Line Bot 回傳訊息與推播等等行為時，必須要帶著 access token 給 Line 驗證才知道目前操作的是哪一支 Line bot，為了後續講解的連貫性，我們先前往 messaging api channel 頁面設定這些資訊吧。

• Channel Secret 在 Basic setting 選項下方，是一組已產生的固定字串。
  
  
• Channel Access token 在 Messaging api 選項下方，需要手動按下 issue 產生，產生過後的字串就是 access token。
  
  

建立新專案

(本系列決定還是採用 Controller 的方法，而不是 .Net 6 新增的 Minimal api。)

• 首先新增一個使用 Controller 的 ASP .Net Core web api 專案
• 刪除新專案中自帶的 WeatherForecastController.cs & WeatherForecast.cs
• 在 Controllers 資料夾下新增檔案，命名為 LineBotController.cs

using Microsoft.AspNetCore.Mvc;

namespace LineBotMessage.Controllers
{

    [ApiController]
    [Route("api/[controller]")]
    public class LineBotController : ControllerBase
    {
        
        // 貼上 messaging api channel 中的 accessToken & secret
        private readonly string channelAccessToken ="Your channel access token";
        private readonly string channelSecret = "Your channel secret";

        // constructor
        public LineBotController()
        {

        }
        
        // 使用 Post 方法的原因是因為這支 API 會接收 Line 傳送的 webhook event，
        // 這部分在下一篇會介紹～
        [HttpPost("Webhook")]
        public IActionResult Webhook()
        {
            return Ok();
        }
    }
}

• 另外需要對伺服器的 listening port 做變更，這就要到 luanchSettings.json 設定
  
• 將 lunchSetting.json 內容改為以下，主要是第 9 行，變更 https 與 http 的 listening port。

{
  "profiles": {
    "LineBotMessage": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "launchUrl": "swagger",
      // listening port 改為如下 分別 https -> 8080, http -> 8081
      "applicationUrl": "https://localhost:8080;http://localhost:8081",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

ngrok 安裝與教學 官方連結

就像第二天介紹的，Line Bot 需要一個允許外部連線的位置作為 Webhook url，而本機沒有固定IP時需要使用到的服務就是 ngrok 了。

安裝步驟

1. 點進官方連結後依照你的作業系進行即可，非常簡單。
   
2. 安裝完成後需要添加 authtoken， authtoken 需要使用者註冊 ngrok 的帳號後到"Your Authtoken"畫面複製下方的 command line 指令執行。
   

• authtoken 添加指令執行畫面
  

3. authtoken 添加完成後就可以實際測試連線效果，在 command line 中輸入指令，執行這行指令代表呼叫 ngrok 建立一個連線到 localhost:80 的位置
   

• 執行之後會出現下圖的畫面
  
  可以注意到 Forwarding 這一項後面有
  "https://7bbe-61-63-154-173.jp.ngrok.io -> http://localhost:80" 的字串
  意思是 ngrok 建立了一個叫 https://7bbe-61-63-154-173.jp.ngrok.io 的網址並指向了你的 localhost:80 的位置
  所以 https://7bbe-61-63-154-173.jp.ngrok.io 這一串網址就是你與外部連線的通道。

4. 而所有送到這個網址的 Requests 都會被記錄在 Terminal 視窗
   

• 更詳細的資料可以到 Web Interface 項目後方的 http://127.0.0.1:4040 位置查看
  

到這邊 ngrok 的安裝就完成了

設定 webhook url

• 記得我們在 lunchSetting.json 中設定伺服器 https 連線位置設為 https://localhost:8080，所以我們用 ngrok 對這個位置進行連線
  

• 連線後將位置與 route 組合設定到 messaging api 中。
  

• 將 ngrok 產生的位置組合 api 的 route 設定到 line bot webhook url，並按下 Verify 測試其連線結果。
  

• 出現 Success 則代表連線成功建立。
  

測試

• 傳送一段文字訊息給機器人
  
• ngrok 的 inspect 頁面可以查看到 Line 將收到訊息事件傳送到伺服器。
  

結語

今天成功建立了 webhook 的連線，下一篇將會介紹 Line 的 webhook events 並建立 class 然後使用程式碼接收，我們下一篇再見～。

範例程式碼

如果想要參考今天範例程式碼的部份，下面是我 Git Repo 連結，方便大家參考。

Day4_Initial LineBotController