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
590
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
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
370
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
170
Kubernetes における cgroup driver のしくみ: runwasi の bugfix より
z63d
2
240
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
210
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
250
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
9.2k
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.5k
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
820
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
260
テストを軸にした生き残り術
kworkdev
PRO
0
180
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
280
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
290
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The World Runs on Bad Software
bkeepers
PRO
70
11k
What's in a price? How to price your products and services
michaelherold
246
12k
KATA
mclloyd
32
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Practical Orchestrator
shlominoach
190
11k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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