LIFFを使って店舗で会員証を表示するサンプル #LINE_API

はじめに

こんにちは、中村です。

今回は、LINE Front-end Framework（以下、LIFF）を利用して会員証を作ってみました。OMO施作としてECサイトの会員/店舗で使用する会員証を連携することによってユーザー・店舗双方にメリットがあるのかなと思っています。

LIFFとは

LINE Front-end Framework（LIFF）は、LINE内で動作するウェブアプリのプラットフォームです。LIFFに登録したウェブアプリ（LIFFアプリ）をLINE内で起動すると、LINEのユーザーIDなどをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできます。

LIFFを使った会員証

LIFF登録するためには、ウェブアプリをホスティングする必要があります。AWSでホスティングする場合は、CloudfrontとS3が最適でしょう。フレームワークは、Nuxt.jsを使ってみます。

ホスティング

Cloudformationテンプレートを用意しています。
こちらをご利用ください。

Nuxt.js

Nuxt.jsのドキュメントを参考にプロジェクトを作成していきましょう。npxは、npm5.2.0からバンドルされていますのでnpmのバージョンを確認してください。

$ npx create-nuxt-app sample-liff-members-card

LIFF SDKを読み込む方法はHTMLに記載でもいいのですが、nuxt.config.jsを編集することでNuxt.js内で利用できます。

head: {
    :
    :
    script: [
      { src: 'https://d.line-scdn.net/liff/1.0/sdk.js', type: 'text/javascript'}
    ]
},

LIFF

ソースコードを用意しています。
こちらをご利用ください。
vue-qrcodeを利用しています。

今回はとてもシンプルな仕組みです。ユーザーがLIFFからアクセスしていない場合はエラーが表示され、LIFFで表示した場合は、userIdを利用したQRコードが表示されます。

NuxtでLIFF SDKを読み込んでいるので、created()のタイミングでliffを初期化してLINEのユーザーIDやエラーを取得します。

created() {
    window.liff.init(
      data => {
        this.userId = data.context.userId
      },
      err => {
        this.err = true;
        this.errMsg = err;
      }
    )
 }

実際の利用シーンでは、ECサイトや予約サイト側のユーザーとの紐付けが必要な場合がほとんどだと思いますので、サイト側へLINEログインの実装・LIFFから認証情報取得のAPIの開発などが必要だと思います。 上記の対応をすることで、アクセスしてきたLINEユーザーが会員かどうかを判定し仮会員証なのか、正規会員証なのかを表示します。そうすることで店舗ではLIFFを開くだけでまずは会計時に利用するハードルを下げれるのではないかと思います。

テスト

LIFFから開いたパターンなので正常にLINEのユーザーIDが取得でき、QRが表示されています。

ホスティングしているURLを直接リクエストした場合には、LIFFの初期化が失敗するのでエラーが表示されています。

まとめ

簡単ですがサンプルを作成してみました。先日LINEより発表があったMini appもありますのでこのようなケースが増えていきそうだなと思っています。