これは 😺TECHSCORE Advent Calendar 2019😺の8日目の記事です。
今年もあと少しですね。吉田です。
今回は、2019/10/16にリリースされたLIFF v2に関してのお話です。
LIFF v2を利用して、当社サービスSynergy!のフォームにLINEを経由した自動ログイン機能として連携できるか確認してみました。
はじめに
やってしまいました……。最近忙しく、子供も産まれたところなのに、Advent Calendarに参加表明してしまいました。
年に1度のお祭りだし。さっき見たら枠が1つだけ空いていて、なんとなく挑まれている気がしたのです！
やや長いですが🎄Advent Calendar🎄らしく、お楽しみな内容🎅になれば幸いです。ということで、さっそく始めます。
2019/10/16にLIFF v2がリリースされましたね。そのリリースノートで「LIFF v1は、廃止される予定です。」と前バージョンはいきなり非推奨に指定されてしまいました😥。
思ったより早いバージョンアップで驚きましたが、違和感のあった部分が解消されつつ急速に整理が進んでいるように思います。
（本当はLIFF v1で途中まで作っていたのに）気を取り直して、LIFFの概要に触れつつ進めていきます。
LIFFってなにさ!?
LIFFとはLINE Front-end Frameworkの略だそうです。
私は最初「リーフ？」「ライフ？」と思っていましたが、「リフ」と呼ぶようです。
以下のような感じで3タイプのサイズでLINE連携アプリを表示できるFrameworkです。
LIFFアプリの画面サイズ（引用：LINE Developers）
LIFF v1の主な機能：
- userIDやユーザーのプロファイル取得
- トークへのメッセージの送信
- Bluetoothデバイスとのデータ通信
LIFF v2で追加された機能：
- 外部ブラウザ対応
- メールアドレス取得
- QRコード読み取り
- LIFFアプリの動作環境取得
「LIFFアプリの動作環境取得」は外部ブラウザに対応したから必要になった感じですね。
LINE Developersでは、このようにリリースノートで情報発信をおこなっています。
2018/06/06 LIFF v1リリース
2018/10/30 LIFFアプリをLINE Developersコンソールで追加可能に
2019/02/07 LIFF SDKでアクセストークンを取得可能に
2019/10/16 LIFF v2がリリース
2019/11/11 Messaging APIチャネルでのLIFFアプリの登録ができなくなる方針発表
私は2019/11/11の発表まで、LIFFアプリがMessaging APIに紐づく機能だと誤解していました。
だって、去年のプレス発表でコーポレートサイトに
「Messaging API」の新機能、 「LINE Front-end Framework（LIFF）」を公開
って書いてたよね？
まぁ、関係のないトークルームでもURLを知っていればLIFFアプリを呼び出せることに違和感があったので、このリリースノートでの発表で整理されて良かったと思います。
ちなみに、1つのログインチャネルにLIFFアプリは30個まで追加できるそうです。
今回のゴール
今回は、LIFFを用いて、Synergy!フォームの認証を自動実行するまでをゴールにしようと思います。
その途中で、「外部ブラウザでの動作がどのようなものか」についても確認します。
今回の確認範囲
Synergy!フォーム間の遷移は、別のテクニックを利用するので今回の記事では触れませんが、こんな感じの構成を目指します。
クイックスタートに沿って開発
早速、お手本となるLINE Developersの記載に従って設定していきます。
チャネルを作成する
新規「プロバイダー」を作成して、「LINEログイン」チャネルと「Messaging API」チャネルを作成してみました。
ちなみに、チャネル名に「LINE」という文字列が入ったチャネルは作れないから気を付けてくださいね。メッセージが判りにくかったので、少し戸惑いました。
こんな感じで作ってみました。
LINEプロバイダーの状態（一応チャネル名は伏せてます）
LINEログイン：アプリタイプ＝WEB
Messaging API：アプリタイプ＝BOT
という構成になります。
LIFFスターターアプリを試してみる
これは今回不要なのでパスします（早くもお手本通りじゃない）。アプリ部分はSynergy!のフォーム機能を使います。
「それで、良いよね？」と思いつつ次のステップへ。
LIFFアプリを開発する
今回LIFFアプリのベースはSynergy!フォームになるので、先にSynergy!で「LINEへの配信」の「アカウント管理」設定をしておく必要があります。
Synergy!のサポートページを参考に、LINE Developersサイトから参照した[Channel ID]や[Channel Secret]などをSynergy!に設定します。
Synergy!の管理画面での設定
これで、LINEユーザー識別子を格納する項目（カラム）がSynergy!の「顧客マスタDB」に作成されます。
LINE Developersには「Messaging API」チャネルの管理画面に対して、Synergy!に表示されている[Webhook URL]を設定します。
あとはSynergy!が友だち追加やブロックの際にユーザー識別子を適切に管理してくれます。
先ほど作成された「LINEユーザー識別子」の項目を「データベース設計」画面でレコードのキー項目（Synergy!では「更新キー」といいます）として設定します。
後は、Synergy!でこの「LINEユーザー識別子」を認証キーとしてユーザー認証をおこなう「変更・解除」フォームとして作成していきます。
33桁もありますが、「LINEユーザー識別子」だけを認証条件にすると単純すぎるので、LINEの[Channel ID]（このChannel IDはLINEログインチャネルのID）やLINE表示名などの項目を作成し、認証するための追加項目として利用しても良さそうです。
これらの値は以下から取得できます。LIFFの機能による恩恵も受けられそうですね。
- Channel ID：Social API v2.1⇒LIFFでアクセストークンを取得し、Social APIのアクセストークンVerify機能で取得
- LINE表示名：LIFF⇒liff.getProfile()メソッドで取得
さて、ベースが整ったのでLIFFアプリとして機能するように盛り込んでいきますね。
<script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
LIFF v1と同じように、まずはHTMLの<head>タグにjsファイルの参照を追加してから、liff.init()をコールすればOKです。
ふむふむ。「外部ブラウザでLINEログインを利用する場合」は……
LIFFアプリの初期化フロー（引用：LINE Developers）
ここまでのライトな感じから急に複雑になった気がします。
エラー処理が面倒だと思いながら、ザクザク作ってみました。この辺の説明は後程。
LIFFアプリをチャネルに追加する
Synergy!フォームに手を加え終わったら、LINE Developersで「LINEログイン」チャネルにLIFFアプリとして登録します。
[エンドポイントURL]の欄に作成したSynergy!フォームのURLを設定します。登録すると、LIFFのURLスキームが生成され表示されます。
このURLスキームはLIFF v2で推奨となった「https://liff.line.me/{liffId}/」という書式ではなく、非推奨の「line://app/{liffId}」という書式で表示されていました。
リファレンスには前者の書式で表示されると記載されているので、これから変わるのでしょう。
登録したLIFFアプリの設定
LIFFアプリを開く
いよいよアプリケーションの起動です。
スマートフォンで公式アカウントに友だち登録した後に、「エンドポイントのURL」（＝Synergy!フォームのURL）にGoogle Chromeでアクセスしてみます。
外部ブラウザの場合は、生成されたURLスキームではないので注意してください。
LINEのログイン画面（QRコードの場合）
外部ブラウザからのアクセスの場合、LINEのログイン画面が表示されます。QRコードをLINEアプリで読み取ってコード入力するかメールアドレスとパスワードでの認証か選ぶことができます。
ログインすると、スマートフォンのLINEアプリに外部でログインされたことを通知するメッセージが届きます。
初回利用時は以下のアプリに権限を許可する確認画面も表示されます。
LINEログインチャネルに権限を許可する確認画面
「キャンセル」を選択すると、LINEアプリではLIFFアプリが終了するだけですが、外部ブラウザの場合はLIFF.init()に渡したエラー発生時のコールバック処理が実行されます。
「許可する」を選択すると、LINEアカウントに権限の許可設定が記憶されます。この連動設定はLINEアプリから「設定」⇒「アカウント」⇒「連動アプリ」で個別に解除することができます。
「許可する」を選択後、LINEのプロバイダーに紐づいたuserIdを取得し、Synergy!の変更・解除フォームの認証を通過した状態が表示できました。
ログイン後に表示されたSynergy!のフォーム
補足：
- フォーム上部のメニューやスライダーはカスタマイズして作成したものです
- スライダー部はswiper（MITライセンス）を利用しています
- クリエイティブ・コモンズライセンスとなっている葛飾北斎の画像を拝借しています
LIFFによるログイン時のリダイレクトについて
LINEでのログイン認証後、liff.login()の際に渡したパラメータのURLにリダイレクトされます。
今回の例ではパラメータを省略して同じフォームにリダイレクトさせているため、前述の初期化フロー図にある最初のLIFF.init()を再度呼び出した後にLIFFがログイン状態となります。
そのため、前述のフロー図はややこしく感じるかもしれませんが、作成するのは以下の構成のみです。
- liff.init()：初期化する
- liff.isLoggedIn()：ログイン状態の取得
- liff.login()：（未ログインの場合）ログインする
コーディングして動かしてみると意外とシンプルだと思います。
動作環境について
現在（2019/11/22時点）で公表されているLIFFのサポート環境をお伝えしておきます。
【LIFFアプリをLINE内ブラウザで開く場合】
iOS：iOS 10以降(WKWebView使用)
Android：5.0以降
LINE：バージョン9.14.0以降
【LIFFアプリを外部ブラウザで開く場合】
Microsoft Edge、Google Chrome、
Firefox、Safari
しかし、残念ながらMicrosoft Edgeでは初回ログイン後のリダイレクト後のliff.init()が正しく機能しませんでした。二回目以降は成功します。
サポート対象外ですが、Internet Explorer 11でも初回アクセス時はエラーとなり、二回目以降は成功します。
※2020/03/27 追記：Chromium版 Microsoft Edgeではログイン後の画面遷移も正常に機能しました。しかし、クエリパラメータの受け渡しは機能しませんでした。
リッチメニューからLIFFを起動
折角ですので、LINE Official Account Managerでリッチメニューを設定し、LINE公式アカウントからログインしてみます。
ここで問題があることがわかりました。
LINE Developersから引用
LIFFアプリに追加情報を渡すには
LIFFアプリに追加情報を渡すには、URLスキームにクエリパラメータを追加します。たとえば、https://liff.line.me/{liffId}/{エンドポイントURLのパス部分}?key1=value1&key2=value2と指定すると、LIFFアプリのエンドポイントURLに?key1=value1&key2=value2が追加されます。
※このように記載があるのですが、LINEアプリから起動した場合、上記のURL指定方法ではパラメータが正しく渡されませんでした。そこで、旧来の「line://app/{liffId}」というLIFFアプリ用のURLスキームで指定した場合は、パラメータを付与しても正しく動作しました。
※2020/03/27 追記：「https://liff.line.me/{liffId}/{エンドポイントURLのパス部分}?key1=value1&key2=value2」というようにエンドポイントのパス部分を追加する仕様にドキュメントが更新されています。
LINE Official Account Managerでのリッチメニュー設定
前述の外部ブラウザでの動作も含め、LIFF v2になって拡張された動作には、まだ多少の「粗さ」があるように思われます。
とはいえ、リッチメニューから自動ログインできる機能は非常に便利ですので、活用していきたいですね。
今回はLIFFでのログイン処理後に以下の手順でSynergy!フォームでの認証ができるか検証しています。
- LIFFでLINEユーザー識別子を取得
- LIFFでアクセストークンを取得
- Social APIでアクセストークンのチェック
- Social APIで取得したクライアントIDの照合
やや煩雑なチェックに見えるかもしれませんが、JavaScriptの処理とSynergy!フォームの機能で完結でき、それほどのステップ数にはなりません。
むしろ、前述の予期しない動作の確認や、QRコードを表現するサイズや文字を短くする検討の方が大変でした。
LINE表示名を認証に加えることも検討できますが、気分で絵文字を足す人も居るかもしれないし、LINEに外部端末でのログイン通知も来るのでそこまでの必要はないように思います。
今回、調子に乗ってQRコードの会員証画面と、その読み取り画面をSynergy!で作ってみました。
残念ながら自由に公開できる動画サイトがありませんので、デモをお見せできませんが、タッチレスチェックインの仕組みは簡単に作成できました。
※QRコードの読み取りについて
LIFF v2にはQRコードを読み取る機能も搭載されているのですが、今回の想定は事業者側がQRコードを読み取ります。
業務利用の際に従業員のLINEアカウントを利用するというケースは現状では少なそうなので、既存のブラウザから利用する想定で構成しました。
動画のストリームはnavigator.mediaDevices.getUserMedia()で取得しHTML5の<video>要素に表示しています。
QRコードは<video>タグに表示された内容を<canvas>要素内に描画して判定しています。
以下、QRコード関連で利用したライブラリです。
- QRコードの表示：jeromeetienne/jquery-qrcode（MITライセンス）
- QRコードの読み取り：cozmo/jsQR（Apache License 2.0ライセンス）
まとめ
今回は、LIFF v2が公開されたことを受け、Synergy!と連携できるかを確認し、外部ブラウザでの動作についてもお伝えしました。
外部ブラウザからの起動に対応したことで「手軽に認証機能としてLINEを利用する」という手法が提供されました。これがどのようなニーズに繋がるか注視したいと思います。
「デバッグが楽」という開発者向けのメリットはありました。
今回試した感触では、LIFF自体はSynregy!フォームと相性が良く、専用アプリを作成するよりも簡単なので、友だち登録してくれた方のアクセスや傾向を踏まえてメッセージを配信できる、といった相乗効果が見込めそうです。
※本文中に記載の「QRコード」は株式会社デンソーウェーブの登録商標です。
Comments
LINE Developersのニュースで、「2019/11/29：LIFFの一部機能の提供の一時停止について」というお知らせが掲載されています。
LIFFが提供している「QRコード読み取り」や「Bluetoothデバイスとのデータ通信」については、一時的に停止している模様です。
今回の検証では、QRコードの読み取りに外部JSライブラリを利用しているため、これによる影響はありません。
数日のことであればと記事に盛り込みませんでしたが、現時点（2019/12/18）で更新情報がないのでコメントで掲示しておきます。
LINE Developersのニュースで、「2020/03/25：LINE URLスキームの「line://」は非推奨になりました」というお知らせが掲載されましたので、記事の一部を訂正しています。