Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Firebase x LINE / Ruby on Rails x LINEでログイン画面を無くそう

C9237e9aa6c8fe028a484c9621991423?s=47 Arahabica
October 03, 2021

Firebase x LINE / Ruby on Rails x LINEでログイン画面を無くそう

LIFF/LINEミニアプリでユーザの操作なしでセキュアに認証する方法を実際のコードを交えながら解説しました。

C9237e9aa6c8fe028a484c9621991423?s=128

Arahabica

October 03, 2021
Tweet

Transcript

  1. Firebase x LINE / Ruby on Rails x LINE でログイン画⾯を無くそう

    2021/10/02 ボイスアップラボ 捧隆⼆ 1
  2. Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法

    Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 2
  3. Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法

    Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 3
  4. ⾃⼰紹介 u 名前: 捧隆⼆ u 2021年よりLINE API Expert u 所属:

    ボイスアップラボ所属 u LINEやスマートスピーカーのアプリ制作 u 趣味: 温泉めぐり 4
  5. Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法

    Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 5
  6. LIFFアプリが流⾏りつつある… 6

  7. LIFFアプリが流⾏りつつある… 7 LIFFアプリ︖︖ 聞いたことないけど︖

  8. Ø 「ワクチンはLINEでも予約できます」 Ø 実はLIFFアプリ 実は増えてます 8

  9. Ø 「会員証はLINEでも登録できます」 Ø 実はLIFFアプリ 実は増えてます 9

  10. Ø LINEアプリ上で動くWebアプリ Ø 通常、LINE公式アカウントのリッチメニューから開かれる LIFFアプリとは 10

  11. Ø ネイティブアプリのインストール不要 Ø でもLINEで通知できる Ø ログイン画⾯が不要 LIFFアプリの利点 11

  12. Ø ネイティブアプリのインストール不要 Ø でもLINEで通知できる Ø ログイン画⾯が不要 楽そう LIFFアプリの利点 12

  13. 13 LIFFアプリの利点 楽そう Ø ネイティブアプリのインストール不要 Ø でもLINEで通知できる Ø 会員登録ページが不要 Ø

    ログイン画⾯が不要
  14. Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法

    Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 14
  15. LIFFアプリの作り⽅ 15

  16. 16 LIFFアプリの作り⽅ Ø 基本はWebアプリの開発です Ø HTML, JavaScript, CSS… Ø WebアプリにLIFF

    SDKを導⼊すればLIFFアプリ Ø LIFF SDK: JavaScriptライブラリ Ø (雑な)開発の流れ Ø LINE Developers ConsoleでLIFFアプリを登録 Ø Webアプリを作成 Ø WebアプリにLIFF SDKを導⼊し、登録したLIFFアプリの LIFF IDを使って初期化
  17. 17 LIFF SDKのよく使うメソッド Ø liff.init() Ø LIFFアプリを初期化 Ø liff.getProfile() Ø

    プロフィールを取得 Ø liff.getAccessToken() Ø ユーザーのアクセストークンを取得
  18. 18 liff.init() Ø LIFFアプリを初期化

  19. 19 liff.getProfile() Ø プロフィールを取得

  20. 20 liff.getAccessToken() Ø ユーザーのアクセストークンを取得

  21. Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法

    Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 21
  22. ログイン画⾯の無くし⽅ 22

  23. 23 ログイン画⾯がないってどういうこと︖ QRコード 追加 ABCパスタ 投稿 友だち登録 メニューを タップ MENU

    もう認証 されている ようこそ Naomiさん︕
  24. 24 危ないログイン画⾯の無くし⽅ Ø liff.getProfile()で取得したプロフィールをサーバに送信 Ø サーバでそれをそのまま保存

  25. 25 危ないログイン画⾯の無くし⽅ Ø liff.getProfile()で取得したプロフィールをサーバに送信 Ø サーバでそれをそのまま保存 Ø IDをそのまま信⽤してしまっている

  26. 26 危ないログイン画⾯の無くし⽅ Ø liff.getProfile()で取得したプロフィールをサーバに送信 Ø サーバでそれをそのまま保存 Ø IDをそのまま信⽤してしまっている 危ない︕

  27. 27 なぜ危ない︖ Ø IDの漏洩リスク Ø 他のユーザの情報を表⽰する際に漏れるリスク Aさん Bさん Cさん Ranking

  28. 28 なぜ危ない︖ Ø IDの漏洩リスク Ø 他のユーザの情報を表⽰する際に漏れるリスク Ø IDなので変更不能 Ø IDなので暗号論的に安全に⽣成される乱数とは限らない

    Ø ID: 001があるとID: 002もあるかもしれない。 Ø 推測、総当たり可能性
  29. 29 セキュアなログイン画⾯の無くし⽅ Ø LIFFでアクセストークンを取得 Ø アクセストークンをサーバに送信 Ø サーバからLINEにアクセストークンを送りプロフィール取得 Ø 問題なければ認証成功

  30. 30 セキュアなログイン画⾯の無くし⽅ Ø 公式のドキュメントに詳細載ってます

  31. 31

  32. 32 認証成功︕︕ 😀

  33. 33 認証状態を保持したくなる Ø リクエストのたびにLINEに問い合わせたくない Ø 処理が遅くなる。LINEに必要以上の負荷。 LINE Your Server 紹介⽂編集

    LINE Your Server お気に⼊り LINE Your Server 店舗予約
  34. 34 認証状態を保持する⽅法 Ø LIFFでアクセストークンを取得 Ø アクセストークンをサーバに送信 Ø サーバからLINEにアクセストークンを送りプロフィール取得 Ø 認証成功(ここまでは同じ)

    Ø userIDに対してアプリ独⾃のアクセストークンを発⾏ Ø このアクセストークンはLINEとは関係ないもの Ø 2回⽬以降は独⾃のアクセストークンを使って認証
  35. 35 認証状態を保持する⽅法

  36. 36 Create Your App’s Access Token Your App’s Access Token

  37. 37 Authenticate 2回⽬以降のリクエスト Your App’s Access Token OK

  38. 38 Authenticate 2回⽬以降のリクエスト Your App’s Access Token OK 分かったような 分からんような

  39. Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法

    Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 39
  40. 具体的な実現⽅法 40

  41. 41 具体的な実現⽅法 Ø Firebase x LINE Ø Ruby on Rails

    x LINE https://github.com/Arahabica/line-firebase-auth-sample https://github.com/Arahabica/liff-rails-sample https://qiita.com/Arahabica/items/8f5c7472ded92128535f
  42. Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法

    Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 42
  43. Firebase x LINE 43

  44. 44 Firebase x LINEでログイン画⾯を無くす Ø 使⽤技術 Ø Firebase Authentication Ø

    Firebaseの認証機能を⼀⼿に担う Ø 通常はEmail認証やGoogle認証などに対応 Ø カスタムトークン作成機能 Ø Firebase Authenticationの1機能 Ø カスタム認証システムとの統合のための機能
  45. 45 Firebase x LINEでログイン画⾯を無くす Ø 処理の流れ Ø LIFFでアクセストークンを取得 Ø アクセストークンをCloud

    Functions for Firebaseに送信 Ø Cloud Functions for FirebaseでLINEの認証処理 Ø userIdに対応するカスタムトークン作成 Ø クライアントでカスタムトークンを使⽤し、Firebaseにログイン
  46. 実際のコード 46

  47. Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法

    Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 47
  48. Ruby on Rails x LINE 48

  49. 49 Ruby on Rails x LINEでログイン画⾯を無くす Ø 使⽤技術 Ø Devise

    Ø Railsのデファクトの認証ライブラリ(gem) Ø 認証関連は⾃作する部分はできるだけ減らして、 デファクトを活⽤ Ø devise_token_auth Ø Deviseを利⽤しつつ、APIによる認証を可能にする ライブラリ(gem)
  50. 50 Ø 処理の流れ Ø LIFFでアクセストークンを取得 Ø アクセストークンをサーバに送信 Ø サーバでLINEの認証処理 Ø

    userIdに対応するトークン作成(devise_token_auth) Ø クライアントからサーバにアクセスする時にトークンを ヘッダにつける Ruby on Rails x LINEでログイン画⾯を無くす
  51. 51 devise_token_auth Ø デフォルトはemailによる認証 Ø Emailとパスワードを送信し 認証が成功すると、 Bodyにプロフィールが返り、 Headerにアクセストークンが返る

  52. 52 devise_token_auth Ø 2回⽬以降は Headerにアクセストークンをつけて リクエストすれば、 認証状態を維持できる

  53. 53 devise_token_auth Ø LIFFを使う場合は Emailとパスワードの代わりに、 userId(uid)とアクセストークンを 使って認証する。

  54. 54 devise_token_auth Ø 2回⽬以降はもうLINEは関係ないので 同じようにアクセスできます。

  55. 実際のコード 55

  56. ご静聴ありがとうございました 56