.NET6 C#, LineBot, Line Messaging API, C#, dotnet core
Hello 各位好,今天的內容是帶各位實際使用 LIFF SDK 做 LIFF APP 的開發,使用 LIFF SDK 即可輕鬆的取得使用者資料,不需自行串接 Line Login API 即可取得使用者資料,話不多說 立馬開始~
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。
先將 LIFF.html 註冊成新的 LIFF,若有疑問可參考上一篇的內容。
以下屬性中的 Scopes & Scan QR 務必都打開~後面會用到。
另外主頁中的 ShareTargetPicker 功能也打開
(這分享視窗的功能是我覺得 LIFF 中最令人眼前一亮的功能)
嵌入 LIFF SDK 的方式有
不過我們這次前端只使用 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>
.
.
.
在使用各種 liff sdk api 前,需先使用 liff.init 先將 liff 初始化建立起來,否則有些 sdk裏的功能 無法使用。
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>
畫面
LIFF 初始化成功且使用者已登入後,即可取得使用者資料。
LIFF SDK 有以下 function,我們照著文件的方式使用。
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>
畫面
對於作業系統與 LINE 版本須符合以下限制,才能使用此功能,另外 LIFF 的大小必須為 FULL 才能開啟 QR code 掃瞄器,請各位將 LIFF Size 改為 FULL 再開始
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 中。
此功能與 Line Actions 中的 Message Action 一樣,都是透過使用者的帳號將訊息傳送至聊天室,不過 LIFF 是將訊息傳送至其開啟的聊天室中。
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,平常使用者可沒辦法主動傳送這些訊息。
ShareTargetPicker 能夠開啟分享畫面,將訊息傳送給好友或群組,可以分享的訊息種種類與上方的 SendMessage 相同,尤其是 Flex,這正是我會說這是最令人眼前一亮的功能,舉個生活上的實例來話,如 星巴克的送禮功能就是利用這種功能達成的 (不過星巴克是使用 LINE MINI APP)。
使用方式
文件內容
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, });
}
<!-- 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 連結,方便大家參考。
您好,按照上面步驟,取不到信息,可以幫看看嗎
<!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>