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
2.3k
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
600
LINEミニアプリ/LIFFアプリを サクッと作りたいならFirebase
arahabica
3
2.1k
LIFFで認証しようとしたら意外と奥が深かった話
arahabica
0
1.9k
公式管理画面 vs 非公式管理画面
arahabica
0
550
Share Target Pickerを使ってLIFFアプリを拡散しよう
arahabica
0
1k
Share Target Pickerを使って消えるメッセージを作ってみた
arahabica
0
7.7k
非公式LINE管理画面を作ってみた
arahabica
0
440
Clovaで他とは違うスマートスピーカー体験
arahabica
0
140
LINEグループであそぼ
arahabica
1
400
Other Decks in Technology
See All in Technology
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
370
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
240
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.8k
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
160
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
110
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
140
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
78k
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
120
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
実装で解き明かす並行処理の歴史
zozotech
PRO
1
660
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
170
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.1k
Featured
See All Featured
Context Engineering - Making Every Token Count
addyosmani
5
220
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Designing Experiences People Love
moore
142
24k
Agile that works and the tools we love
rasmusluckow
331
21k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Speed Design
sergeychernyshev
32
1.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
How GitHub (no longer) Works
holman
315
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
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