LIFF(LINE Front-end Framework)のScopeにLINE Loginが追加できるようになりました #LINE

LIFF(LINE Front-end Framework)の設定にScopeが指定できるようになり、LIFFを起動する際にユーザーにまとめて認可してもらうことができるようになりました!
2019.10.17

LIFF SDK v2がリリースされ、同時にLIFFの設定に Scope が追加されました。

これによりLIFFを使用する上での課題だった LINE Loginと組み合わせると認可が2回必要である というユーザビリティ上の課題を解消することができます。

試してみる

サンプルアプリを用意する

まずはLINE Loginができる適当なWebアプリを用意します。今回はAuth0と組み合わせて用意しました。作り方は以下を参考にしてください。

認証サービス「Auth0」がLINE Loginを正式サポート!設定手順を詳細に解説します! #Auth0JP

ログインする際は connection をオプションで指定すると、ログイン時にAuth0のログイン画面を介さずLINE Loginに直接遷移させることができます。以下はVueでauth0-spa-jsを使用した場合のログインを実行するコードです。

this.$auth.loginWithRedirect({ connection: 'line' });

LIFFはHTTPSのWebサイトしか登録ができないので、適当な場所にホスティングします。今回はFirebase Hostingを使いました。

LIFFの作成

LIFFは、LINE Developer ConsoleのChannelの設定画面(「LIFF」タブ)から作成できます。なお、1つのChannelに複数のLIFFが作成できます。

Scopeという項目が追加されていることが確認できます。openid を有効にします。

作成後、以下のようなLIFF URLが生成されます。このURLにスマホからアクセスするとLINE上でLIFFが起動します。

実行

それではLIFF URLを起動してみましょう。

最初に認可画面が表示されます。

WebアプリがLIFFとして表示されました。ログインしてみます。

ログイン画面(認可画面)を介さずにログイン済みとなりました!

例えば起動時にログインが必要なLIFFアプリを作りたい場合は認可画面が2回出るようなケースを無くすことができます。

認可画面をまとめられる!

認可は必要ですが、ユーザーにとっては地味に煩雑な課題。かつそれが2連続で出てしまうと「操作を間違ったのかな?」と思われてしまうかもしれません。

ユーザー体験としては非常に重要なアップデートだと思います。ぜひ使っていきましょう!