• Community
  • Contact
    • Apply Contributor
  • Privacy Policy
    • Cookie Policy
2025/05/24 Saturday
  • Login
  • Register
beKOUE
  • 日本語
  • 中文 (中国)
  • Español
  • Connecting
  • KOBE
  • Akashi
  • Technology
No Result
View All Result
beKOUE
  • Connecting
  • KOBE
  • Akashi
  • Technology
No Result
View All Result
beKOUE
No Result
View All Result
オンラインショップ|オーダーメイド

Home » LIFF: Mass Inheritance, Therefore, Front Reuse

LIFF: Mass Inheritance, Therefore, Front Reuse

LIFF 第一章

管理者 by 管理者
2023/2/15
in Wordpress
0 0
A A
0
0
SHARES
198
VIEWS
ShareTweetスキャン

Table of Contents

  • 1. What is LIFF?
  • 2. Multiple LIFF IDs on the same front
  • 3. LIFF App Settings
  • 4. Conclusion

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.

Soccer | Physical | Rokko Island | Kids | Toddler Gymnastics

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.

Tags: AdvancedjavascriptLIFFLinePHP
ShareTweetScan
MeIN|Akashi|Futami|Kids|Dance|Since 2016
Previous Post

[2023] Woocommerce Order Received Electronic Receipt to Line

Next Post

2023] woocommerce order history within Line

管理者

管理者

The author was born in China in 1985. After graduating from university in 2008, he got a job at a Japanese company in China. After moving to the head office in Tokyo in 2011, he contributed to the company as a system engineer and programmer, mainly subcontracting from major Japanese companies. At the same time, he is improving his Japanese, various programming and language skills. In 2016, he traveled around the world as the last turning point in his twenties. After experiencing a wide variety of cultures, he moved to the undeveloped land of Kansai, determined to restart everything from scratch. He opened bekoue.com equipped with all the technology cultivated in IT in order to transmit the big city of Kobe to the world. He is sending out the charm of Kansai and Kobe to the world every day.

Related Posts

Wordpress

Line Woocommerce Circulation System Online

2023/4/13
0
141

About coupon tickets There are many occasions in the world where you can use coupon tickets, such as for bathing at a super public bath, bus tickets, event tickets, and so on. With the cooperation of Gooall, a sports school (hereinafter referred to as "Gooall"), we would like to introduce an online coupon system that has been put into practical use with Line & woocommerce. First, the online frequency system. Before introducing the system, we will briefly explain how it works in Gooall's paper-based system. Students themselves select...

Read more
【2023年版】LIFF 量産 継承 よって フロント再利用

2023] woocommerce order history within Line

2023/2/15
329
【2023年版】Woocommerce 注文 受け Lineへ電子レシートを送信

[2023] Woocommerce Order Received Electronic Receipt to Line

2023/2/15
185
Next Post
【2023年版】LIFF 量産 継承 よって フロント再利用

2023] woocommerce order history within Line

神戸市:「ICTを活用した中学校体育館の夜間開放」2月から対象校

Kobe City: "Nighttime Opening of Junior High School Gymnasiums Utilizing ICT" Target Schools from February

Please login to join discussion

Popular

  • 週末のお楽しみが今年も始まる!「神戸港ウィークエンド花火」2月

    Weekend fun starts again this year! Kobe Port Weekend Fireworks” in February

    0 shares
    Share 0 Tweet 0
  • A total of 32 gorgeous and gorgeous Danjiri parade in the city, “2025” in each area of Higashinada Ward

    0 shares
    Share 0 Tweet 0
  • First time in 10 years for the exhibition to be held at Hyogo Prefectural Museum of Art! Paul Klee Exhibition — Creation

    0 shares
    Share 0 Tweet 0
  • Nostalgic Characters from the Showa Era! Sanrio Exhibition at the Museum of Contemporary Art Kobe

    0 shares
    Share 0 Tweet 0
  • Kobe City: Notice of “Kobe City Temporary Special Benefit for Living Assistance

    0 shares
    Share 0 Tweet 0

Newest

Dogs and Cats at Akashi Animal Center Panel Exhibition” at the 2nd floor lobby of Akashi City Hall

2025/5/22
0

Nozomi Itagaki Soprano Concert “Rokko Island Diva” 202505

2025/5/22
0

Event Cancellation】R.I.C Party -CENTRAL- Rokko Island on 5/21

2025/5/22
0

Strengths and Attractiveness Discovery! Self Branding Course – Rokko Island

2025/5/22
0
「自然×街」のコントラストが魅力!六甲山上駅からすぐの『天覧台

The contrast between “nature and the city” is appealing! Tenran-dai” located near Rokko Sanjo Station

2025/5/19
1
オンラインショップ|オーダーメイド
beKOUE

  • Connecting
  • KOBE
  • Akashi
  • Technology
  • MeINPartner
  • GooallPartner
  • shAopEC Site
  • GlobalFactory
  • Booking
  • Community
  • Contact
  • Privacy Policy

Copyright 2025 by be Co., Ltd.

No Result
View All Result
  • 日本語
  • 中文 (中国)
  • Español
  • Connecting
  • KOBE
  • Akashi
  • Technology
  • Login
  • Sign Up
  • Community
  • Contact
  • Privacy Policy

Copyright 2025 by be Co., Ltd.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Sign Up with Facebook
Sign Up with Google
Sign Up with Linked In
OR

Fill the forms below to register

*By registering on this site, you can use the Terms of Service andPrivacy PolicyYou are deemed to have agreed.
All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
Our site uses cookies. By continuing to use, we assume that you agree to our use of cookies. See Cookie Policy.
error: Alert: コンテンツは保護されています !!!