Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Firebase x LINE / Ruby on Rails x LINEでログイン画面を無くそう
Search
捧隆二
October 03, 2021
Technology
0
1.6k
Firebase x LINE / Ruby on Rails x LINEでログイン画面を無くそう
LIFF/LINEミニアプリでユーザの操作なしでセキュアに認証する方法を実際のコードを交えながら解説しました。
捧隆二
October 03, 2021
Tweet
Share
More Decks by 捧隆二
See All by 捧隆二
LIFF API のセキュリティ的な話
arahabica
0
230
LINEミニアプリ/LIFFアプリを サクッと作りたいならFirebase
arahabica
3
1.3k
LIFFで認証しようとしたら意外と奥が深かった話
arahabica
0
1.2k
公式管理画面 vs 非公式管理画面
arahabica
0
440
Share Target Pickerを使ってLIFFアプリを拡散しよう
arahabica
0
810
Share Target Pickerを使って消えるメッセージを作ってみた
arahabica
0
6.8k
非公式LINE管理画面を作ってみた
arahabica
0
340
Clovaで他とは違うスマートスピーカー体験
arahabica
0
100
LINEグループであそぼ
arahabica
1
330
Other Decks in Technology
See All in Technology
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.5k
2023 Japan AWS Jr.Championsに選出されての振り返りとこれから
hiropy877
1
130
OpenTelemetry実践 はじめの一歩
taxin
0
310
BDD(Cucumber)コミュニティが無料提供しているコンテンツの紹介と現在起きている危機
nihonbuson
4
730
Evolutionary Optimization of Model Merging Recipes
fuyu_quant0
3
520
Autify Company Deck
autifyhq
1
30k
Ask-LLM論文紹介: How to Train Data-Efficient LLMs
s_ota
0
110
技育祭2024春 LT Finatextホールディングス
kevinrobot34
1
160
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
Oracle Database で機械学習を始めよう! Oracle Machine Learning
oracle4engineer
PRO
1
140
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
230
10分でわかるfreeeのQA
freee
0
230
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Web development in the modern age
philhawksworth
201
10k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
Facilitating Awesome Meetings
lara
39
5.5k
The Invisible Side of Design
smashingmag
293
49k
The Brand Is Dead. Long Live the Brand.
mthomps
48
21k
KATA
mclloyd
14
11k
Music & Morning Musume
bryan
39
5.5k
The Language of Interfaces
destraynor
150
23k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Code Reviewing Like a Champion
maltzj
512
39k
Transcript
Firebase x LINE / Ruby on Rails x LINE でログイン画⾯を無くそう
2021/10/02 ボイスアップラボ 捧隆⼆ 1
Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法
Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 2
Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法
Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 3
⾃⼰紹介 u 名前: 捧隆⼆ u 2021年よりLINE API Expert u 所属:
ボイスアップラボ所属 u LINEやスマートスピーカーのアプリ制作 u 趣味: 温泉めぐり 4
Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法
Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 5
LIFFアプリが流⾏りつつある… 6
LIFFアプリが流⾏りつつある… 7 LIFFアプリ︖︖ 聞いたことないけど︖
Ø 「ワクチンはLINEでも予約できます」 Ø 実はLIFFアプリ 実は増えてます 8
Ø 「会員証はLINEでも登録できます」 Ø 実はLIFFアプリ 実は増えてます 9
Ø LINEアプリ上で動くWebアプリ Ø 通常、LINE公式アカウントのリッチメニューから開かれる LIFFアプリとは 10
Ø ネイティブアプリのインストール不要 Ø でもLINEで通知できる Ø ログイン画⾯が不要 LIFFアプリの利点 11
Ø ネイティブアプリのインストール不要 Ø でもLINEで通知できる Ø ログイン画⾯が不要 楽そう LIFFアプリの利点 12
13 LIFFアプリの利点 楽そう Ø ネイティブアプリのインストール不要 Ø でもLINEで通知できる Ø 会員登録ページが不要 Ø
ログイン画⾯が不要
Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法
Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 14
LIFFアプリの作り⽅ 15
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 LIFF SDKのよく使うメソッド Ø liff.init() Ø LIFFアプリを初期化 Ø liff.getProfile() Ø
プロフィールを取得 Ø liff.getAccessToken() Ø ユーザーのアクセストークンを取得
18 liff.init() Ø LIFFアプリを初期化
19 liff.getProfile() Ø プロフィールを取得
20 liff.getAccessToken() Ø ユーザーのアクセストークンを取得
Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法
Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 21
ログイン画⾯の無くし⽅ 22
23 ログイン画⾯がないってどういうこと︖ QRコード 追加 ABCパスタ 投稿 友だち登録 メニューを タップ MENU
もう認証 されている ようこそ Naomiさん︕
24 危ないログイン画⾯の無くし⽅ Ø liff.getProfile()で取得したプロフィールをサーバに送信 Ø サーバでそれをそのまま保存
25 危ないログイン画⾯の無くし⽅ Ø liff.getProfile()で取得したプロフィールをサーバに送信 Ø サーバでそれをそのまま保存 Ø IDをそのまま信⽤してしまっている
26 危ないログイン画⾯の無くし⽅ Ø liff.getProfile()で取得したプロフィールをサーバに送信 Ø サーバでそれをそのまま保存 Ø IDをそのまま信⽤してしまっている 危ない︕
27 なぜ危ない︖ Ø IDの漏洩リスク Ø 他のユーザの情報を表⽰する際に漏れるリスク Aさん Bさん Cさん Ranking
28 なぜ危ない︖ Ø IDの漏洩リスク Ø 他のユーザの情報を表⽰する際に漏れるリスク Ø IDなので変更不能 Ø IDなので暗号論的に安全に⽣成される乱数とは限らない
Ø ID: 001があるとID: 002もあるかもしれない。 Ø 推測、総当たり可能性
29 セキュアなログイン画⾯の無くし⽅ Ø LIFFでアクセストークンを取得 Ø アクセストークンをサーバに送信 Ø サーバからLINEにアクセストークンを送りプロフィール取得 Ø 問題なければ認証成功
30 セキュアなログイン画⾯の無くし⽅ Ø 公式のドキュメントに詳細載ってます
31
32 認証成功︕︕ 😀
33 認証状態を保持したくなる Ø リクエストのたびにLINEに問い合わせたくない Ø 処理が遅くなる。LINEに必要以上の負荷。 LINE Your Server 紹介⽂編集
LINE Your Server お気に⼊り LINE Your Server 店舗予約
34 認証状態を保持する⽅法 Ø LIFFでアクセストークンを取得 Ø アクセストークンをサーバに送信 Ø サーバからLINEにアクセストークンを送りプロフィール取得 Ø 認証成功(ここまでは同じ)
Ø userIDに対してアプリ独⾃のアクセストークンを発⾏ Ø このアクセストークンはLINEとは関係ないもの Ø 2回⽬以降は独⾃のアクセストークンを使って認証
35 認証状態を保持する⽅法
36 Create Your App’s Access Token Your App’s Access Token
37 Authenticate 2回⽬以降のリクエスト Your App’s Access Token OK
38 Authenticate 2回⽬以降のリクエスト Your App’s Access Token OK 分かったような 分からんような
Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法
Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 39
具体的な実現⽅法 40
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
Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法
Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 42
Firebase x LINE 43
44 Firebase x LINEでログイン画⾯を無くす Ø 使⽤技術 Ø Firebase Authentication Ø
Firebaseの認証機能を⼀⼿に担う Ø 通常はEmail認証やGoogle認証などに対応 Ø カスタムトークン作成機能 Ø Firebase Authenticationの1機能 Ø カスタム認証システムとの統合のための機能
45 Firebase x LINEでログイン画⾯を無くす Ø 処理の流れ Ø LIFFでアクセストークンを取得 Ø アクセストークンをCloud
Functions for Firebaseに送信 Ø Cloud Functions for FirebaseでLINEの認証処理 Ø userIdに対応するカスタムトークン作成 Ø クライアントでカスタムトークンを使⽤し、Firebaseにログイン
実際のコード 46
Ø ⾃⼰紹介 Ø LIFFアプリが流⾏りつつある… Ø LIFFアプリの作り⽅ Ø ログイン画⾯の無くし⽅ Ø 具体的な実現⽅法
Ø firebase x LINE Ø Ruby on Rails x LINE ⽬次 47
Ruby on Rails x LINE 48
49 Ruby on Rails x LINEでログイン画⾯を無くす Ø 使⽤技術 Ø Devise
Ø Railsのデファクトの認証ライブラリ(gem) Ø 認証関連は⾃作する部分はできるだけ減らして、 デファクトを活⽤ Ø devise_token_auth Ø Deviseを利⽤しつつ、APIによる認証を可能にする ライブラリ(gem)
50 Ø 処理の流れ Ø LIFFでアクセストークンを取得 Ø アクセストークンをサーバに送信 Ø サーバでLINEの認証処理 Ø
userIdに対応するトークン作成(devise_token_auth) Ø クライアントからサーバにアクセスする時にトークンを ヘッダにつける Ruby on Rails x LINEでログイン画⾯を無くす
51 devise_token_auth Ø デフォルトはemailによる認証 Ø Emailとパスワードを送信し 認証が成功すると、 Bodyにプロフィールが返り、 Headerにアクセストークンが返る
52 devise_token_auth Ø 2回⽬以降は Headerにアクセストークンをつけて リクエストすれば、 認証状態を維持できる
53 devise_token_auth Ø LIFFを使う場合は Emailとパスワードの代わりに、 userId(uid)とアクセストークンを 使って認証する。
54 devise_token_auth Ø 2回⽬以降はもうLINEは関係ないので 同じようにアクセスできます。
実際のコード 55
ご静聴ありがとうございました 56