iT邦幫忙

2022 iThome 鐵人賽
DAY 23
0
Software Development

讓 C# 也可以很 Social - 在 .NET 6 用 C# 串接 LINE Services API 的取經之路系列 第 23 篇

[Day 23] .NET 6 C# 與 Line Services API 開發 - LIFF v2 實作

14th鐵人賽 dotnet core linebot line messaging api liff
4110 瀏覽

  • 分享至 

  • xImage
    •  
tags: .NET6 C#, LineBot, Line Messaging API, C#, dotnet core

[Day 23] 讓 C# 也能很 Social - .NET 6 C# 與 Line Services API 開發 - LIFF v2 實作

前言

Hello 各位好，今天的內容是帶各位實際使用 LIFF SDK 做 LIFF APP 的開發，使用 LIFF SDK 即可輕鬆的取得使用者資料，不需自行串接 Line Login API 即可取得使用者資料，話不多說 立馬開始～

LIFF 開發 Developing LIFF APP

LIFF的程式開發 與 一般網頁開發並無差異，只需引入 LIFF SDK 即可。

新增一個新的頁面叫 LIFF.html，內容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LIFF - 讓 C# 也能很 Social 用戶資料</title>
    <!-- jquery CDN include -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <!-- CSS include -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
</body>
</html>

接下我們就一步一步的開始測試 LIFF SDK。

1. 註冊 LIFF

先將 LIFF.html 註冊成新的 LIFF，若有疑問可參考上一篇的內容。

以下屬性中的 Scopes & Scan QR 務必都打開～後面會用到。

另外主頁中的 ShareTargetPicker 功能也打開
(這分享視窗的功能是我覺得 LIFF 中最令人眼前一亮的功能)

2. 嵌入 LIFF SDK 文件

嵌入 LIFF SDK 的方式有

  1. 使用 CDN 路徑
  2. 使用 npm 安裝

不過我們這次前端只使用 html 而已，所以 npm 安裝不適用，所以直接使用 CDN 即可。

根據文件的描述，CDN 有兩種路徑，使用 edge path 則 LIFF SDK 會一直維持在最新的版本，另一種是 fixed path 則是使用某個固定的 SDK 版本，若想要更新需手動更改。

這邊我就直接用 edgee path，在 html 中加入 LIFF SDK CDN path

<!DOCTYPE html>
<html lang="en">
<head>
        .
        .
        .
    <title>LIFF - 讓 C# 也能很 Social 用戶資料</title>
    <!-- LIFF SDK CDN include -->
    <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
        .
        .
        .
</head>
    .
    .
    .

3.LIFF APP Initialize 文件連結

在使用各種 liff sdk api 前，需先使用 liff.init 先將 liff 初始化建立起來，否則有些 sdk裏的功能 無法使用。

  • 使用方式

Code 撰寫

  • Script

    windows.onload = () => {
    const defaultLiffId = '{LIFF ID}';
    $(document).ready(function () {
        liffInit(defaultLiffId);
    });
}

function liffInit(liffId) {
    // withLoginOnExternalBrowser : true 時代表 auto login 啟動，LIFF 初始化後會自動呼叫 liff.login 登入。
    liff.init({ liffId: liffId, withLoginOnExternalBrowser: true }).then(() => {
        // liff init 成功，可以隨意使用 liff sdk apis
        $("#os").text(liff.getOS());
        $("#language").text(liff.getLanguage());
        $("#version").text(liff.getVersion());
        $("#lineVersion").text(liff.getLineVersion());
        $("#isInClient").text(liff.isInClient());
    }).catch((err) => {
        // log error
        console.log(err.code, err.message);
    })
}

  • Html Body

    <center>
    <div class="container">
        <a> -------- 環境 -------- </a>
        <a>OS : <b id="os"></b></a>
        <a>Language : <b id="language"></b></a>
        <a>Version : <b id="version"></b></a>
        <a>Line Version : <b id="lineVersion"></b></a>
        <a>IsInClient : <b id="isInClient"></b></a>
    </div>
</center>

  • 畫面

4.取得使用者資料

LIFF 初始化成功且使用者已登入後，即可取得使用者資料。

LIFF SDK 有以下 function，我們照著文件的方式使用。

  1. liff.getProfile() - 取得 user profile
  2. liff.getDecodedIDToken() - 取得 id token 類型的 user profile

Code 撰寫

  • Script - 新增在 liff init 成功後的 function 內

    // 取得一般的 user profile
liff.getProfile().then(function (profile) {
    console.log(profile);
    $("#user_avatar").attr("src", profile.pictureUrl);
    $("#user_name").text('姓名 : ' + profile.displayName);
    $("#user_id").text('使用者ID : ' + profile.userId);
    $("#user_status").text('狀態文字 : ' + profile.statusMessage);
});

// 取得包成 id token 的 user profile
const idTokenProfile = liff.getDecodedIDToken()
console.log(idTokenProfile);
$("#idToken_user_avatar").attr("src", idTokenProfile.picture);
$("#idToken_user_name").text(idTokenProfile.name);
$("#idToken_user_email").text(idTokenProfile.email);
$("#iss").text(idTokenProfile.iss);
$("#sub").text(idTokenProfile.sub);
$("#aud").text(idTokenProfile.aud);
$("#exp").text(idTokenProfile.exp);
$("#iat").text(idTokenProfile.iat);
$("#amr").text(idTokenProfile.amr);

  • Html Body 新增 (原 profile page 的結構)

     <div class="container">
    <a> -------- ACCESS TOKEN -------- </a>
    <a><img id="user_avatar" src=""></image></a>
    <a><a id="user_name">姓名 : </a></a>
    <a><a id="user_id">使用者ID : </a></a>
    <a><a id="user_status">狀態文字 : </a></a>
</div>

<!-- 此部分使用 id token 取的使用者資料 -->
<div class="container">
    <a> -------- ID TOKEN -------- </a>
    <a><img id="idToken_user_avatar" src=""></image></a>
    <a>name : <b id="idToken_user_name"></b></a>
    <a>email : <b id="idToken_user_email"></b></a>
    <a>iss(token 簽發者) : <b id="iss"></b></a>
    <a>sub(使用者 ID) : <b id="sub"></b></a>
    <a>aud(Channel ID) : <b id="aud"></b></a>
    <a>exp(id_token 過期時間) : <b id="exp"></b></a>
    <a>iat(id_token 產生時間) : <b id="iat"></b></a>
    <a>amr(使用者登入方式 ) : <b id="amr"></b></a>
</div>

  • 畫面

5.開啟 QR Code 掃瞄器 文件連結

對於作業系統與 LINE 版本須符合以下限制，才能使用此功能，另外 LIFF 的大小必須為 FULL 才能開啟 QR code 掃瞄器，請各位將 LIFF Size 改為 FULL 再開始

Code 撰寫

  • Script - 新增 function

    function openQRCodeReader() {
    liff
        .scanCodeV2()
        .then((result) => {
            $("#qrcode_string").text(result.value);
        })
        .catch((error) => {
            $("#qrcode_string").text(error);
            console.log("error", error);
        });
}

  • Body - 在頁面上方新增按鈕與一個文字元件

     <!-- QR Code 按鈕 -->
<div class="container">
    <button onclick="openQRCodeReader()">開啟 QR Code 掃瞄器</button>
    <a id="qrcode_string">QR Code Text</a>
</div>

  • 畫面 - 按下上方按鈕後，會在 LIFF 中開啟第二個視窗，其中是相機畫面。
    (要記得把 LIFF Size 改為 FULL 才能使用此功能!)

掃完後會將該 QR code 所含文字帶出至 result.value 中。

6.傳送訊息 文件連結

此功能與 Line Actions 中的 Message Action 一樣，都是透過使用者的帳號將訊息傳送至聊天室，不過 LIFF 是將訊息傳送至其開啟的聊天室中。

Code 撰寫

  • Script - 新增 sendMessage function

    function sendMessage() {
    message = JSON.parse(`{
        "type" : "text",
        "text" : "LIFF 傳送訊息"
    }`)
    liff
        .sendMessages([
            message
        ])
        .then(() => {
            console.log("message sent");
        })
        .catch((err) => {
            $("#qrcode_string").text(error);
            console.log("error", err);
        });
}

  • Html Body

    <!-- SendMessage 按鈕 -->
<div class="container">
    <button onclick="sendMessage()">傳送訊息</button>
</div>

  • LIFF 畫面

  • 按下傳送訊息按鈕後，關掉 LIFF 回到聊天室即可發現訊息已傳送

各位可以多嘗試其他訊息傳送後的效果～尤其是 Template & Flex，平常使用者可沒辦法主動傳送這些訊息。

7.ShareTargetPicker

ShareTargetPicker 能夠開啟分享畫面，將訊息傳送給好友或群組，可以分享的訊息種種類與上方的 SendMessage 相同，尤其是 Flex，這正是我會說這是最令人眼前一亮的功能，舉個生活上的實例來話，如 星巴克的送禮功能就是利用這種功能達成的 (不過星巴克是使用 LINE MINI APP)。

  • 使用方式

  • 文件內容

Code 撰寫

  • Script
function shareTargetPicker() {
    if (!liff.isApiAvailable('shareTargetPicker')) {
        console.log("請檢查 Line 版本是否為 10.3.0 以上")
        return;
    }
    message = JSON.parse(`{
        "type" : "text",
        "text" : "LIFF ShareTargetPicker 分享訊息"
    }`)
    liff.shareTargetPicker([message], { isMultiple: true, });
}
  • Html Body
<!-- ShareTargetPicker 按鈕 -->
<div class="container">
    <button onclick="shareTargetPicker()">分享訊息</button>
</div>

  • 前端畫面

  • 按下分享訊息按鈕後，會跳出分享畫面，另外一句傳送時帶入的 isMultiple 可決定是否可多選

訊息畫面就讓各位自行練習，同樣可以試試看不同的訊息傳送效果，尤其是有趣的 Template 或 Flex Message。

若需要完整的 LIFF.html 可以參考今天的範例程式碼

結語

LIFF 的出現將 web view 很好的整合進 Line 中，不但整體美感變好，使用者體驗也更舒服，不需要跳出 Line 就能享受更豐富的服務，開發者也能更隨心所欲的在 Line 上大展手腳，也是有這些功能的原因，Line 上的行銷模式如雨後春筍一般不斷冒出，直到現在仍然是一個頗具發展潛力的平台。

這兩篇主要是介紹 LIFF 與 LIFF SDK 裏，比較常見的一些功能 ~ 希望讓有興趣學習的朋友 可以快速上手
如果有些功能 不在這二天的篇幅 ~ 就要請到官方文件中查看～畢竟文件才有最詳細的內容～

那 LIFF 的介紹就到這邊結束了，下面兩篇的內容會是 Line Pay 的串接，請各位好好期待。

範例程式碼

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


上一篇
[Day 22] .NET 6 C# 與 Line Services API 開發 - LIFF v2 介紹
下一篇
[Day 24] .NET 6 C# 與 Line Services API 開發 - Line Pay 串接 (一)
系列文
讓 C# 也可以很 Social - 在 .NET 6 用 C# 串接 LINE Services API 的取經之路 共 30 篇
  1. 26
    [Day 26] .NET 6 C# 與 Line Services API 開發 - 在 Centos 部署 .Net Core API (Kestrel)
  2. 27
    [Day 27] .NET 6 C# 與 Line Services API 開發 - 在 Centos 設定 Kestrel 服務 (systemd)
  3. 28
    [Day 28] .NET 6 C# 與 Line Services API 開發 - 在 Centos 架設 web Server (nginx)
  4. 29
    [Day-29] .NET 6 C# 與 Line Services API 開發 - 在 Centos 設定 Nginx 與 Kestrel 對應 (proxy pass)
  5. 30
    [Day-30] .NET 6 C# 與 Line Services API 開發 - 最後一哩路的終點也是下一個起點
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
zslw2507
iT邦新手 5 級 ‧ 2023-09-20 11:51:00

您好，按照上面步驟，取不到信息，可以幫看看嗎

https://ithelp.ithome.com.tw/upload/images/20230920/20162832t0K0O5iFcl.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LIFF - 讓 C# 也能很 Social 用戶資料</title>
    <!-- LIFF SDK CDN include -->
    <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
    <!-- jquery CDN include -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <!-- CSS include -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
       <!-- 最上方的 bar -->
       <div class="topnav">
        <a href="https://6d7a-103-43-162-143.ngrok-free.app/login.html">Line Login</a>
        <a href="https://6d7a-103-43-162-143.ngrok-free.app/profile.html">User Profile</a>
        <a href="https://6d7a-103-43-162-143.ngrok-free.app/LIFF.html">User lef</a>
        <a href="#">Line Pay</a>
    </div>
    <script>
        windows.onload = () => {
    const defaultLiffId = '2000816959-G0Bmp6pW';
    $(document).ready(function () {
        liffInit(defaultLiffId);
    });
}

function liffInit(liffId) {
    // withLoginOnExternalBrowser : true 時代表 auto login 啟動，LIFF 初始化後會自動呼叫 liff.login 登入。
    liff.init({ liffId: liffId, withLoginOnExternalBrowser: true }).then(() => {
        // liff init 成功，可以隨意使用 liff sdk apis
        $("#os").text(liff.getOS());
        $("#language").text(liff.getLanguage());
        $("#version").text(liff.getVersion());
        $("#lineVersion").text(liff.getLineVersion());
        $("#isInClient").text(liff.isInClient());
    }).catch((err) => {
        // log error
        console.log(err.code, err.message);
    })
}
    </script>

<center>
    <div class="container">
        <a> -------- 環境 -------- </a>
        <a>OS : <b id="os"></b></a>
        <a>Language : <b id="language"></b></a>
        <a>Version : <b id="version"></b></a>
        <a>Line Version : <b id="lineVersion"></b></a>
        <a>IsInClient : <b id="isInClient"></b></a>
    </div>
</center>
    
</body>
</html>
登入發表回應

我要留言

立即登入留言
iThome鐵人賽
參賽組數
902 組
團體組數
37 組
累計文章數
19747 篇
完賽人數
529 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react
熱門問題
熱門回答
熱門文章
IT邦幫忙