目次
1 LIFFとは
WordPress&WoocommerceはLine連携(Messaging API、Botモード…)など多くの機能を取り入れています。Lineを入口(鍵)として、最終的にsafari・chromeなど多様なブラウザでwebページを表示させることができます。著者はブラウザ主義を貫いていますが、Lineからwebページを表示する際も必ず外部ブラウザへ遷移※1します。
外部ブラウザへ遷移する度に、著者は思うところがありました:「アプリの切替機能を無くす事でユーザーの困惑は減るのではないか?」と…
幸い、Line社も世の中のブラウザに対抗する措置を取っています。ここでLIFF(LINE Front-end Framework)の登場。Line社はミニアプリと言っていますが、一般人から見るとLineに依存するミニブラウザといったらわかりやすいでしょうか。
今回、著者はオリジナル機能として「回数制(チケット)管理機能」も実現しました。その為に初めてLIFFの開発で直面した困難、そして解決するに至るまでの道のりを一部紹介します。基礎は省き上級者向けの内容のみ共有したいと思います。
※1 Line Labsの機能 iOS限定「リンクをデフォルトのブラウザで」を有効にする。
2 同じフロントで複数のLIFF ID
LIFFでは安全対策をたくさん施しています。その一つとしてLIFF URLは唯一であること(LIFF URLとミニアプリは一対一)!即ち、制作した一つのフロント(エンドポイントURL)は唯一のLIFF URLでしか呼び出せないこと。多様性を無くすことでセキュリティは向上するが、開発は量産に適さないという仕組みです。
ここで著者はLIFF URLスキーム のURLパラメータに関する記載を見て思いました:「一つのフロントはエンドポイントURLだが、URLパラメータにて正しいLiffidを引き渡すことができれば安全対策の縛りを回避できるだろう。」
上記の2つ機能は初期表示のフロントは同じですが、異なるリッチメニュー(LIFF URL)から起動されています。
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)でも量産することが実現できると考えています。
次章は、回数制を導入する前、woocommerce注文履歴をLIFF ミニアプリで表示するポイントを紹介します。
そして、さらに詳しいソースコードを求めている方・LIFF開発に興味がありLIFEに関する意見を交換したい方は是非ログインしてコメントを残してください。