[Day20] 如何在 LINE Bot 開啟 LIFF 應用 - LINE Front-end Framework - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

Software Development

Line Bot 心得分享 LineMessagingApi + LUIS + BotFramework系列第 20 篇

[Day20] 如何在 LINE Bot 開啟 LIFF 應用 - LINE Front-end Framework

11th鐵人賽 line bot liff line front-end framework

小碼農米爾

2020-01-29 15:46:31

27656 瀏覽

今天要介紹的是 LINE 的 LIFF 應用，全名是 「LINE Front-end Framework」，這是一個 Web App 框架，可以讓 Line Bot 開啟 Web 視窗，方便開發者可以將一些不適合用對話訊息製作的 UI/UX 用網頁呈現。

常見用途

製作傳統的網頁表單
整合自己的網站系統
製作投票、抽獎等小工具

LIFF 服務註冊

1. 首先進入 LINE 開發者頁面。

https://developers.line.biz/zh-hant

2. 進入 Channel 列表，選擇 LINE Login 或 Messaging API 服務。

詳細說明可以參考 /liff/getting-started。

3. 選擇最右邊的頁籤，接著點 Add 按鈕新增 LIFF 應用。

4. 填寫相關資訊並送出。

5. 成功後回到 LIFF 頁籤，可以看到多了一個新項目。

其中 LIFF URL 是由 line://app/ 加上 LIFF_ID 組成，連結可以讓 Line Bot 開啟 LIFF 視窗，LIFF_ID 會用在程式初始化的地方。

程式部分

1. 在 Pages 目錄下新增 LIFF.cshtml，這邊我使用 Razor Page。

@page
@model iBotTest.LIFFModel
@{ 
    Layout = null;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iBot</title>
    <link rel="stylesheet" href="@Href("~/liff.css")">
</head>
<body>
    <div>
        <div id="h"></div>
    </div>

    <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
    <script src="@Href("~/liff.js")"></script>
</body>
</html>

2. 新增 liff.js 初始化 LIFF 應用。

成功後會在畫面上顯示 Hello!!。

function initializeLiff(myLiffId) {
    liff
        .init({
            liffId: myLiffId
        })
        .then(() => {
            initializeApp();
        })
        .catch((err) => {
            alert('啟動失敗。');
        });
}

function initializeApp() {
    var h = document.getElementById('result');
    h.innerHTML = 'Hello!!';
}

//使用 LIFF_ID 初始化 LIFF 應用
initializeLiff('123456789-OXOXOXOXOX');

3. 使用 Flex Message 按鈕做為 LIFF 入口，也可以使用圖文選單。

var buttonComponent = new ButtonComponent
{
    Style = ButtonStyle.Primary,
    Action = new UriTemplateAction(
        "LIFF", "line://app/123456789-OXOXOXOXOX")
};

var flexMessage = new FlexMessage("LIFF")
{
    Contents = new BubbleContainer
    {
        Body = new BoxComponent
        {
            Layout = BoxLayout.Vertical,
            Contents = new List<IFlexComponent>
            {
                buttonComponent
            }
        }
    }
};

await _messagingClient.ReplyMessageAsync(ev.ReplyToken,
    new List<ISendMessage> { flexMessage });

詳細說明可以參考此連結。

結果

點擊按鈕後開啟 LIFF 視窗。

第一次開啟需要授權認證，同意後下次就不會再出現。

LIFF 還有很多 API 可以使用，有興趣的朋友可以參考 LIFF v2 API reference。

後端如何確認 accessToken 是由我們發出的?

後端程式可以透過 accessToken 取得使用者資訊，但在使用 Token 之前應該要先確認此 Token 是由我們的應用發出的，不應該使用未認證過的 Token。

# 前端部分

使用 liff.getAccessToken() 取得 Token 傳到後端。

<div>
    <div id="result"></div>
</div>

function initializeApp() {
    var data = {
        accessToken: liff.getAccessToken()
    };
    fetch('https://ibottestapi.azurewebsites.net/api/liff/verify', {
        body: JSON.stringify(data),
        headers: {
            'content-type': 'application/json'
        },
        method: 'POST'
    }).then(response => {
        return response.json();
    }).then(data => {
        var result = document.getElementById('result');
        result.innerHTML +=
            'scope:' + data.scope + '<br>' +
            'client_id:' + data.client_id + '<br>' +
            'expires_in:' + data.expires_in + '<br>';
    });
}

# 後端部分

收到 Token 後使用 API 驗證 Token 的正確性。

GET https://api.line.me/oauth2/v2.1/verify

public class LIFF
{
    public string accessToken { get; set; }
}

[HttpPost("verify")]
public async Task<string> Verify([FromBody]LIFF model)
{
    using (var httpClient = new HttpClient())
    {
       return await httpClient.GetStringAsync(
           $"https://api.line.me/oauth2/v2.1/verify?access_token={model.accessToken}");
    }
}

# 結果

驗證成功會回傳 scope、client_id、expires_in。