Lab 21: 建立第一個LIFF應用

Overview

本Lab介紹如何透過 C# 程式碼，以 .net core WebApp開發框架，建立第一個LIFF(LINE Front-end Framework)應用程式。

Prerequisites

1. 請先進入LINE Developer Portal，建立好LINE Login Channel: 詳細作法可參考這裡

2. 建立完成LINE Login Channel之後，請進入LIFF分頁，並點選 Add 建立新的LIFF：

建立LIFF時Endpoint URL可以先隨意設定，其餘選項建議都打勾:

完成後，按下Add建立LIFF即可。

注意，若需要測試 shareTargetPicker，底下選項必須打勾:

3. 完成後，可取得 LIFF ID(類似0000000000-spPeRmAn) ，將其記錄起來即可，後面會用到。 4. 下載並解壓縮 Ngrok ，以便於在開發環境測試 here

Steps

建立 .net core WebApp專案

在命令列模式建立資料夾，接著透過 dotnet new 指令建立專案

PS D:\> md lifftest
PS D:\> cd lifftest
PS D:\lifftest> dotnet new webapp

系統會出現類似底下畫面...

PS D:\lifftest> dotnet new webapp  
The template "ASP.NET Core Web App" was created successfully.
This template contains technologies from parties other than Microsoft, see https://aka.ms/aspnetcore/3.1-third-party-notices for details.

Processing post-creation actions...
Running 'dotnet restore' on D:\lifftest\lifftest.csproj...
  Determining projects to restore...
  Restored D:\lifftest\lifftest.csproj (in 186 ms).

Restore succeeded.

接著執行底下指令， 安裝 liff 範本...

PS D:\lifftest> dotnet new --install isRock.Template.LIFF 
PS D:\lifftest> dotnet new liff

上面第一行指令是在本基上安裝liff範本特見，第二行指令則是為專案安裝範本。

安裝完成後我們建置(Build)一下，看結果如何:

PS D:\lifftest> dotnet build
Microsoft (R) Build Engine version 16.7.0+7fb82e5b2 for .NET
Copyright (C) Microsoft Corporation. All rights reserved.

  Determining projects to restore...
  All projects are up-to-date for restore.
  lifftest -> D:\lifftest\bin\Debug\netcoreapp3.1\lifftest.dll
  lifftest -> D:\lifftest\bin\Debug\netcoreapp3.1\lifftest.Views.dll

Build succeeded.
    0 Warning(s)
    0 Error(s)

Time Elapsed 00:00:06.12

如果可以順利建置，你應該會收到類似上面這樣的訊息。

透過底下指令，開啟 VS Code進入開發環境

請在命令列輸入 code (空格) .

PS D:\lifftest> code .
PS D:\lifftest>

完成後會看到類似底下畫面，請點選Startup.cs，將43行的程式碼註銷：

注意：
註銷上面的43行，是關閉強制使用 https 的設定。由於我們待會要在用戶端進行測試，關閉 https 將有助於測試的便利，避免在用戶端被其他應用程式阻擋，或是 ngrok, postman 等軟體無法測試的狀況。但在正式環境，我們建議你還原此設定，將會讓安全性更加的嚴謹。

修改程式碼

接著在 Liff.cshtml 這支程式碼中，找到 "請換成你的LiffAppID_"，並置換成你先前建立LIFF時保留的LiffAddID。

完成後類似底下這樣：

執行WebApp

請確定所有修改的程式碼都有儲存後，在 terminal(VS Code亦可)環境中執行該程式：

dotnet run

執行後結果應當如下：

上面這個畫面代表，你的WebApp已經在Localhost本機電腦上的5000與5001 port 被執行起來了，你可以嘗試用Chrome瀏覽器呼叫 http://localhost:5000/index

看到上面的畫面後，代表我們的應用程式已經可以在開發環境執行。

注意，如果你發現被導引到 https://localhost:5001，很可能表示你上一個註銷 startup.cs 43行程式碼的動作沒有儲存或遺漏了。

使用ngrok讓LIFF可以運行

請不要關閉應用程式的執行狀態。

接著，將下載好的ngrok.zip壓縮檔解開，會看到其中有ngrok.exe執行檔，請將其放置在你覺得方便的資料夾下，並進入該資料夾，執行下列指令：

ngrok http 5000 -host-header="localhost:5000"

執行結果如下： 請注意上面的 https 位置，請將該位置複製，並加上liff，組出一個完整的endpoint :

https://814273058c22.ngrok.io/liff

設定LINE Bot後台

接著，進入 LINE Login管理後台，將上面得到的 endpoint 位置，設定在Endpoint URL中:

完成後， 即可抓取LIFF URL：

enter image description here

將此URL在LINE的聊天室窗中被點選，或讓手機點選該URL、或將該URL轉成QR Code，讓手機掃描，即可測試LIFF應用。

備註

若要中止此WebApp，可在VS Code的終端機中按下 Ctrl+C    
若要中止Ngrok，可在Ngrok執行所在的command line中按下 Ctrl+C

相關參考資料

電子書：https://www.pubu.com.tw/ebook/103305 實體書：https://www.tenlong.com.tw/products/9789865022662 線上課程：https://www.udemy.com/line-bot/ LineBotSDK：https://www.nuget.org/packages/LineBotSDK

如果需要即時取得更多相關訊息，可按這裡加入FB專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。