この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
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連続で出てしまうと「操作を間違ったのかな？」と思われてしまうかもしれません。
ユーザー体験としては非常に重要なアップデートだと思います。ぜひ使っていきましょう！
1
