LIFF: Mass Inheritance, Therefore, Front Reuse

1 What is LIFF?

WordPress & Woocommerce incorporates many features such as Line integration (Messaging API, Bot mode…). With Line as the entry point (key), the web page can finally be displayed in a variety of browsers such as safari, chrome, etc. The author is a browserist. The author is a browser-oriented user, and when displaying a web page from Line, the user always transitions to an external browser*1.

Every time I switch to an external browser, I think to myself: “Wouldn’t eliminating the app switching function reduce user confusion? And…

Fortunately, Line Inc. is also taking steps to compete with the browsers of the world. This is where LIFF ( LINE Front-end Framework) comes in: Line calls it a mini-app, but to the general public, it would be easier to understand if it were a mini-browser dependent on Line.

This time, the author has also realized a “frequency system (ticket) management function” as an original feature. The following is a partial description of the difficulties faced in developing LIFF for the first time, and the path taken to solving them. I would like to skip the basics and share only the details for advanced users.

1 Line Labs feature iOS-only “ Link in default browser” is enabled.

2 Multiple LIFF IDs on the same front

LIFF has many safety measures in place. One of them is that there is only one LIFF URL (LIFF URL and mini-applications are one-to-one)! That is, a single front (endpoint URL) that you create can only be called by one LIFF URL. This scheme improves security by eliminating diversity, but development is not suitable for mass production.

The author’s description of the URL parameter of the LIFF URL scheme made me think: “One front is the endpoint URL, but if we can pass the correct Liffid in the URL parameter, we can bypass the security bindings.

The above two functions have the same initially displayed front, but are launched from different rich menus (LIFF URLs).

3 LIFF App Settings

The endpoint URL that links to the LIFF URL is unique, but the URL parameter can be variable, so let’s mount the liffID in the URL parameter.

Use the liffID in the URL parameter on the front side to initialize the correct LIFF app.

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);
    }
}

Get the idToken in the Liff and send it to the server side. Then authenticate the LineUserId on the server side. idToken parsing is mandated not to be done on the front side. The idToken should be parsed using the same method as in the previous Line integration.

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 Conclusion

Embed the LIFF ID in the LIFF endpoint. We believe that mass production can be achieved with the same front (endpoint URL) if we can get ajax to do the hard work of sending and receiving to the server side.

The next chapter will show the point of displaying woocommerce order history in a LIFF mini-application, before introducing the frequency system.

And if you are looking for more detailed source code or interested in LIFF development and want to exchange ideas about LIFE, please log in and leave a comment.