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

by 捧隆二

Slide 1

Slide 1 text

Firebase x LINE / Ruby on Rails x LINE でログイン画⾯を無くそう 2021/10/02 ボイスアップラボ捧隆⼆ 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

⾃⼰紹介 u 名前: 捧隆⼆ u 2021年よりLINE API Expert u 所属: ボイスアップラボ所属 u LINEやスマートスピーカーのアプリ制作 u 趣味: 温泉めぐり 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

LIFFアプリが流⾏りつつある… 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

LIFFアプリの作り⽅ 15

Slide 16

Slide 16 text

16 LIFFアプリの作り⽅ Ø 基本はWebアプリの開発です Ø HTML, JavaScript, CSS… Ø WebアプリにLIFF SDKを導⼊すればLIFFアプリ Ø LIFF SDK: JavaScriptライブラリ Ø (雑な)開発の流れ Ø LINE Developers ConsoleでLIFFアプリを登録 Ø Webアプリを作成 Ø WebアプリにLIFF SDKを導⼊し、登録したLIFFアプリの LIFF IDを使って初期化

Slide 17

Slide 17 text

17 LIFF SDKのよく使うメソッド Ø liff.init() Ø LIFFアプリを初期化 Ø liff.getProfile() Ø プロフィールを取得 Ø liff.getAccessToken() Ø ユーザーのアクセストークンを取得

Slide 18

Slide 18 text

18 liff.init() Ø LIFFアプリを初期化

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ログイン画⾯の無くし⽅ 22

Slide 23

Slide 23 text

23 ログイン画⾯がないってどういうこと︖ QRコード追加 ABCパスタ投稿友だち登録メニューをタップ MENU もう認証されているようこそ Naomiさん︕

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

28 なぜ危ない︖ Ø IDの漏洩リスク Ø 他のユーザの情報を表⽰する際に漏れるリスク Ø IDなので変更不能 Ø IDなので暗号論的に安全に⽣成される乱数とは限らない Ø ID: 001があるとID: 002もあるかもしれない。 Ø 推測、総当たり可能性

Slide 29

Slide 29 text

29 セキュアなログイン画⾯の無くし⽅ Ø LIFFでアクセストークンを取得 Ø アクセストークンをサーバに送信 Ø サーバからLINEにアクセストークンを送りプロフィール取得 Ø 問題なければ認証成功

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Slide 32

Slide 32 text

32 認証成功︕︕ 😀

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

34 認証状態を保持する⽅法 Ø LIFFでアクセストークンを取得 Ø アクセストークンをサーバに送信 Ø サーバからLINEにアクセストークンを送りプロフィール取得 Ø 認証成功（ここまでは同じ） Ø userIDに対してアプリ独⾃のアクセストークンを発⾏ Ø このアクセストークンはLINEとは関係ないもの Ø 2回⽬以降は独⾃のアクセストークンを使って認証

Slide 35

Slide 35 text

35 認証状態を保持する⽅法

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

具体的な実現⽅法 40

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Firebase x LINE 43

Slide 44

Slide 44 text

44 Firebase x LINEでログイン画⾯を無くす Ø 使⽤技術 Ø Firebase Authentication Ø Firebaseの認証機能を⼀⼿に担う Ø 通常はEmail認証やGoogle認証などに対応 Ø カスタムトークン作成機能 Ø Firebase Authenticationの1機能 Ø カスタム認証システムとの統合のための機能

Slide 45

Slide 45 text

45 Firebase x LINEでログイン画⾯を無くす Ø 処理の流れ Ø LIFFでアクセストークンを取得 Ø アクセストークンをCloud Functions for Firebaseに送信 Ø Cloud Functions for FirebaseでLINEの認証処理 Ø userIdに対応するカスタムトークン作成 Ø クライアントでカスタムトークンを使⽤し、Firebaseにログイン

Slide 46

Slide 46 text

実際のコード 46

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Ruby on Rails x LINE 48

Slide 49

Slide 49 text

49 Ruby on Rails x LINEでログイン画⾯を無くす Ø 使⽤技術 Ø Devise Ø Railsのデファクトの認証ライブラリ(gem) Ø 認証関連は⾃作する部分はできるだけ減らして、デファクトを活⽤ Ø devise_token_auth Ø Deviseを利⽤しつつ、APIによる認証を可能にするライブラリ(gem)

Slide 50

Slide 50 text

50 Ø 処理の流れ Ø LIFFでアクセストークンを取得 Ø アクセストークンをサーバに送信 Ø サーバでLINEの認証処理 Ø userIdに対応するトークン作成(devise_token_auth) Ø クライアントからサーバにアクセスする時にトークンをヘッダにつける Ruby on Rails x LINEでログイン画⾯を無くす

Slide 51

Slide 51 text

51 devise_token_auth Ø デフォルトはemailによる認証 Ø Emailとパスワードを送信し認証が成功すると、 Bodyにプロフィールが返り、 Headerにアクセストークンが返る

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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