LIFF(LINE Front-end Framework)のScopeにLINE Loginが追加できるようになりました #LINE
LIFF SDK v2がリリースされ、同時にLIFFの設定に Scope が追加されました。
これによりLIFFを使用する上での課題だった LINE Loginと組み合わせると認可が2回必要である というユーザビリティ上の課題を解消することができます。
試してみる
サンプルアプリを用意する
まずはLINE Loginができる適当なWebアプリを用意します。今回はAuth0と組み合わせて用意しました。作り方は以下を参考にしてください。
ログインする際は 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連続で出てしまうと「操作を間違ったのかな?」と思われてしまうかもしれません。
ユーザー体験としては非常に重要なアップデートだと思います。ぜひ使っていきましょう!