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

Published in

appxtech

9 min readApr 18, 2023

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

<<回顧上一篇<<

[Day 3] 讓 C# 也可以很 Social — .NET 6 C# 與 Line Services API 開發 — Line Services 初始設置

本篇會繼續說明 Line Services 初始設置，包括成為 Line Developer、創建第一個Line Bot ，以及Messaging API Channel & Offical account manager…

medium.com

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 了。

安裝步驟

點進官方連結後依照你的作業系進行即可，非常簡單。

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 視窗。