神户
明石
目录
1 什么是LIFF？
WordPress和Woocommerce整合了许多功能，如Line整合（Messaging API，Bot模式…）。以Line为入口（键），网页最终可以在各种浏览器中显示，包括safari和chrome。作者是一个面向浏览器的用户，在显示Line的网页时，用户总是过渡到一个外部浏览器*1。
每次他切换到外部浏览器时，作者都会想：’取消应用切换功能不是可以减少用户的困惑吗？而且…
幸运的是，Line也采取了措施来应对世界上的浏览器。这就是LIFF（LINE前端框架）的由来：Line称其为迷你应用程序，但对普通人来说，如果它是一个依赖于Line的迷你浏览器，就更容易理解了。
这一次，作者还实现了 “频率（票据）管理功能”，作为一项原创功能。本文介绍了首次开发LIFF时面临的一些困难，以及解决这些困难的路径。我们希望省略基础知识，只为高级用户分享内容。
1 线实验室功能 iOS-only “在默认浏览器中链接 “被启用。
2 同一战线上有多个LIFF ID。
LIFF有许多安全措施。其中之一是只有一个LIFF网址（一对一的LIFF网址和小应用程序）！这是最重要的。这意味着，一个前台（端点URL）只能被一个LIFF URL调用。这种方案通过消除多样性提高了安全性，但开发不适合大规模生产。
在这里，作者回顾了LIFF URL方案 中对URL参数的描述：”一个前台是端点URL，但如果能在URL参数中传递正确的Liffid，就可以规避安全绑定。
上述两个功能具有相同的初始前置，但从不同的丰富菜单（LIFF URLs）中激活。
3 LIFF应用设置
链接到LIFF URL的端点URL是唯一的，但URL参数可以是可变的，所以让liffID在URL参数中加载。
在前端的URL参数中使用liffID来初始化正确的LIFF应用。
jQuery(function ($) {
// URLSearchParamsオブジェクトを取得
// http://var.blog.jp/archives/72768336.html
var params = url.searchParams;
if (params.get('liffId')) {
liffId = params.get('liffId');
}
$(document).ready(function () {
let myLiffId = liffId;
initializeLiffOrDie(myLiffId);
});
function initializeLiff(myLiffId) {
liff
.init({
liffId: myLiffId,
//外部ブラウザでのLIFFアプリ初期化時にliff.login()メソッドを自動で実行する
withLoginOnExternalBrowser: true,
})
.then(() => {
initializeApp();
})
.catch((err) => {
console.error(err);
document.getElementById("liffAppContent").classList.add("hidden");
document
.getElementById("liffInitErrorMessage")
.classList.remove("hidden");
});
}
function initializeApp() {
if (!liff.isLoggedIn()) {
liff.login({ redirectUri: location.href });
} else {
document.getElementById("liffAppContent").classList.remove("hidden");
}
idToken = liff.getAccessToken();
getUserData(idToken);
}
}在Liff中获取idToken并将其发送到服务器端。然后在服务器端对LineUserId进行认证；有义务在前端不解析idToken。在这里使用与到目前为止的Line整合中相同的方法来分析idToken。
protected function get_line_userid()
{
$ch = curl_init();
curl_setopt($ch, CURLOPT_HTTPHEADER, array("Authorization: Bearer {$this->json_obj['id_token']}"));
curl_setopt($ch, CURLOPT_URL, 'https://api.line.me/v2/profile');
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'GET');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$line_profile = curl_exec($ch);
curl_close($ch);
// Line情報を取得
$line_profile = json_decode($line_profile, true);
if (!$line_profile || !isset($line_profile['userId'])) {
return false;
}
return $line_profile['userId'];
}4 结论。
在LIFF端点中嵌入LIFF ID。我们相信，如果我们能让ajax完成向服务器端发送和接收的艰巨工作，就可以用同样的前端（端点URL）实现大规模生产。
下一章将展示在LIFF小程序中显示woocommerce订单历史的关键点，然后介绍频率系统。
而如果你想获得更详细的源代码，或者对LIFF的发展感兴趣，想对LIFE交换意见，请登录后留言。
MeIN
Gooall
shAop
Global