[LINE Login/LIFF]メールアドレス登録無しでLINEログインできるWebアプリを作るには

こんにちは、富士榮です。

LINEログインを使うと、WebサイトへLINE IDを使って簡単にログインすることが出来ます。

また、LINEログインにはオートログインという機能があり、特定の環境においては端末にLINEアプリがインストールされていれば、ブラウザでLINE IDとパスワードを打ち込むことなく、Universal Linkやインテントを使ってLINEアプリへの遷移、自動的にログインをすることが出来ます。

しかし、このオートログイン、少々適用条件が厳しめです。

https://developers.line.me/ja/faq/ より

iOSの場合
LINE 5.2.0以降：LINEのアプリ内ブラウザでLINEログインv2の自動ログインが可能
LINE 7.5.0以降：SafariブラウザでLINEログインv2の自動ログインが可能
LINE 7.12.0以降：LINEログインv2.1の自動ログインが可能

Androidの場合
LINE 6.3.0以降：外部ブラウザででLINEログインv2の自動ログインが可能
LINE 6.4.0以降：LINEのアプリ内ブラウザでLINEログインv2の自動ログインが可能
LINE 7.14.0以降：LINEログインv2.1の自動ログインが可能

こうなってくると、私のようにiOSでChromeを使っている人は結局IDとパスワードの入力から逃れられず、ソーシャルログインのメリットが目減りしてしまいます。
（もちろん、セッションが永続するので2度目以降は大丈夫なんですが）

Safariの場合：LINEアプリが立ち上がり自動ログインされる

Chromeの場合：初回はログイン画面が表示され、2回目以降は確認だけ行われる

結局のところ、外部ブラウザからの遷移を考えるからこうなるので、LINEアプリ内のブラウザでWebアプリを開いてもらえばこのような問題は起きない話しです。ただし、これまではユーザにアプリ内ブラウザの利用を強制する方法がなく、リッチメニュー（トークルームの下に表示できるカスタムメニュー）を個別に作って対応したりしていた訳です。

こういう時に便利なのが、LIFF（LINE Front-end Framework）です。

　LIFF概要
　https://developers.line.me/ja/docs/liff/overview/

仕組み的には、LINEのカスタムURLスキームを使ってLINEアプリ内のブラウザを立ち上げる、という単純な仕組みです。これまではLINEアプリ内でカメラを立ち上げたり、特定のボットのタイムラインを開くことは出来たのですが、アプリ内ブラウザを立ち上げることが出来なかったので、LIFFの登場によりLINEアプリを外部からコントロールする幅が大きく広がった、と言えるでしょう。

　LINEで利用できるURLスキームの一覧
　https://developers.line.me/ja/docs/messaging-api/using-line-url-scheme/


LIFFを立ち上げるには
　line://app/{liff_app_id}
を指定します。

LIFFアプリを作成する際、特定のURLを開くような形でLINEプラットフォームへ登録するため、カスタムURLスキームで外部からLIFFアプリが呼び出されると、LINEアプリ内であらかじめ登録したWebページが開かれる、という仕組みです。

この仕組みを応用すれば、LINEログインをさせたいアプリを開いたときはLIFFを経由して強制的にアプリ内ブラウザを起動する、ということが出来るので、呼び出し元ブラウザを意識することなくオートログインをさせることが出来るようになります。

では、早速やってみましょう。

◆LIFFアプリを登録する

LIFFはボット（Messaging API）の一部の機能として提供されていますので、LIFFを登録するためのエンドポイントへのPOSTを行う際は、Messaging APIのチャネルのアクセストークンを使います。

具体的には、こんな感じのクエリを投げます。

エンドポイント	https://api.line.me/liff/v1/apps
メソッド	POST
リクエストヘッダ	authorization	Bearer {Messaging APIのチャネルアクセストークン}
	content-type	application/json
ボディ	{ "view":{ "type":"full", "url":"起動したいWebアプリのURL（要https）" } }

上手くいくと、LIFFアプリIDがボディで返ってきます。
{
　"liffId": "xxxxxx"
}

このボディにセットするURLにLINEログインをさせたいWebアプリのURLを指定すればLINEアプリ内のブラウザでアプリを起動することが出来るので、オートログインができるようになります。

◆LIFF経由でWebアプリを呼び出す

後は呼び出すだけですので、User-Agentを見るなりなんなりしてモバイル系ならカスタムURLスキームで呼び出せば問題ありません。

LIFFアプリを外部ブラウザから呼び出します。

LINEアプリ内でWebアプリが起動され、自動ログオンされます。

ちょっとトリッキーではありますが、現段階で様々な環境のユーザをアプリ内ブラウザへ誘導するにはこの方法しかなさそうなので、覚えておくとよいかと思います。