LIFFアプリ試してみた

2023.12.01

2023.12.01

Fabeee社員ブログ

LIFFアプリ試してみた

お疲れ様です。たまです。

今回は、LIFFアプリを社内勉強会で発表しましたのでLIFFについての解説と開発手順についてご紹介したいと思います。

Lineロゴ

LIFFアプリとは

・LIFF(リフまたはライフ)とはLINEが提供するウェブアプリのプラットフォーム、LINE Front-end Frameworkの略で、LIFFアプリはそのLIFFを利用した Web アプリケーションのことを指します。

 この LIFF と React や Vue などを利用することで、フロントエンド側で簡単に LINE ログインや LINE メッセージ送信などを実装することができます。

デモアプリが公開されておりますのでご紹介します。

ヘアサロンデモ

テーブルオーダーデモ

 

LINEミニアプリとは

似たようなものにLINEミニアプリがあります。LINEミニアプリはLIFF上で実行されるウェブアプリで、サブセット的存在です。LINEミニアプリを使うことでユーザーは公式アカウントを追加したり、ネイティブアプリをわざわざインストールする必要なくサービスを利用できます。LINEギフトなどが該当します。

 

LIFFとLINEミニアプリの違い

LIFFアプリ LINEミニアプリ
動作環境 スマホ版LINEとブラウザで動作 スマホ版LINEでのみ動作
審査 不要 必須
アクセス方法 公式アカウントから 公式アカ/友達共有/QR/NFC/LINE上などから
ユーザー情報 ログインさせる必要あり ログイン不要で取得可

 

LIFF/LINEミニアプリでできること

・外部ウェブサイトの表示

LINEアプリ内で外部ウェブサイトを表示することができます。例えば、LINEアプリ上でニュースサイトやSNSサイトを閲覧することができます。

・ログイン機能の実装

LINEアプリ内でのログイン機能を実装することができます。ユーザーはLINEアカウントでログインし、アプリ内で利用できるようになります。

・LINEのプッシュ通知の送信

LINE Messaging APIを使用して、LINEアプリに対してプッシュ通知を送信することができます。

・ユーザー情報の取得

LINE Messaging APIを使用して、ユーザーのプロフィール情報や友達リストを取得することができます。

・リッチメニューの実装

LINEアプリ内でリッチメニューを表示することができます。ユーザーはメニューをタップすることで、アプリ内の機能にアクセスすることができます。

 

LIFF/LINEミニアプリ活用事例

・ECサイト

商品の販売を行うことができます。例えば、LINEアプリ上で商品を閲覧し、購入手続きを完了することができます。

・来店予約

予約の受付を行うことができます。例えば、美容室や飲食店などでの予約受付に活用されています。

・整理券発行

整理券の発行を行うことができます。例えば、病院や店舗などの順番待ちに活用されています。

・クーポン配布

クーポンの配布を行うことができます。例えば、LINEアプリ上でクーポンを受け取り、実店舗で利用することができます。

 

LIFF開発手順 ~ LINE Developersに登録する ~

  1. まず、LINE Developersに登録して、プロバイダー及びチャネルを作成します。
  2. プロバイダー名を入力して作成すると下記のような画面になります。
  3. チャネルを作成する。LIFFを使用するので今回はLINEログインチャネルを選択します。
  4. チャンネル作成画面では、会社の所在国やチャンネル名/説明などを入力して作成します

LINE Developers

 

LIFF開発手順 ~ LIFFの作成 ~

  1. 作成したチャネルのLIFFタブを選択し、下部の追加ボタンを押下
  2. 入力画面では「LIFFアプリ名」「エンドポイントURL」「Scope」などを入力します

※補足

・今回はScopeにopenidとprofileを選択しています。

・エンドポイントURLではユーザーがLIFFアプリ(LIFFURL)にアクセスした際のリダイレクト先URLを入力します。

 

LIFFでユーザー情報を取得(ログイン)するには

IDトークンを使用する

liff.getIDToken()で取得したIDトークンをサーバーに送信した場合は、サーバーでIDトークンを検証する(POST /oauth2/v2.1/verifyことで、ユーザーのプロフィール情報を安全に取得できます。

アクセストークンを使用する

liff.getAccessToken()で取得したアクセストークンをサーバーに送信した場合は、サーバーでアクセストークンの有効性を検証し(GET oauth2/v2.1/verify)、さらにチャネルIDとアクセストークンの有効期限を検証することで、ユーザーのプロフィール情報を安全に取得できます(GET /v2/prifile)

LIFFSDKで使用する

liff.getDecodedIDToken()で取得したユーザーのプロフィール情報を使用する。

※今回はidトークンを使用しました、シーケンスはこちら

 

コードは割愛しますが、ログイン処理まで実装すると以下のような挙動が出来ます!

 

まとめ

これでログイン処理は実装することができました。

今回はここまでですが、ここからどんなサービスにするかLIFFを活用して開発進めていこうと思います!

 

Fabeee編集部

Fabeee編集部

こちらの記事はFabeee編集部が執筆しております。