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.2k
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
560
LINEミニアプリ/LIFFアプリを サクッと作りたいならFirebase
arahabica
3
2k
LIFFで認証しようとしたら意外と奥が深かった話
arahabica
0
1.9k
公式管理画面 vs 非公式管理画面
arahabica
0
540
Share Target Pickerを使ってLIFFアプリを拡散しよう
arahabica
0
990
Share Target Pickerを使って消えるメッセージを作ってみた
arahabica
0
7.6k
非公式LINE管理画面を作ってみた
arahabica
0
440
Clovaで他とは違うスマートスピーカー体験
arahabica
0
140
LINEグループであそぼ
arahabica
1
400
Other Decks in Technology
See All in Technology
AWS Organizations 新機能!マルチパーティ承認の紹介
yhana
1
210
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
230
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
170
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
360
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
200
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
1
140
Geminiとv0による高速プロトタイピング
shinya337
0
180
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
150
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
4.1k
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
440
OPENLOGI Company Profile for engineer
hr01
1
33k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Documentation Writing (for coders)
carmenintech
72
4.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Raft: Consensus for Rubyists
vanstee
140
7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Optimizing for Happiness
mojombo
379
70k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
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