Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWA x firebase x Auth0 での認証

Kenta TSUNEMI
October 21, 2020
Programming
1
370

PWA x firebase x Auth0 での認証

2020/10/21 PWA Night vol.21 ～認証～

Kenta TSUNEMI

October 21, 2020
Tweet

More Decks by Kenta TSUNEMI

See All by Kenta TSUNEMI
フロントエンド一年生がテストを考える
tocomi
1
310

Other Decks in Programming

See All in Programming
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
1
190
二郎系ラーメンのコールで学ぶ AST 解析
memory1994
PRO
7
1.7k
Going beyond Apache Parquet's default settings
xhochy
0
120
Site Reliability Engineering for GMO
pyama86
8
1.1k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
390
Let's learn code review
riofujimon
2
550
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.1k
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.4k
Hanami and htmx
bkuhlmann
0
210
AmperとFleetを使ったAndroidアプリ
yoppie
0
240
Code Reviews
bkuhlmann
4
890

Featured

See All Featured
Statistics for Hackers
jakevdp
790
220k
How to name files
jennybc
65
93k
A Tale of Four Properties
chriscoyier
152
22k
Fireside Chat
paigeccino
22
2.6k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.7k
YesSQL, Process and Tooling at Scale
rocio
165
13k
The Power of CSS Pseudo Elements
geoffreycrofte
61
5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
10
1k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
222
21k
[RailsConf 2023] Rails as a piece of cake
palkan
26
4k

Transcript

  1. PWA x firebase x Auth0 での認証 2020/10/21 PWA Night vol.21

    ～認証～

  2. 自己紹介 Kenta TSUNEMI tocomi0112 tocomi 2015年に新卒でERPベンダーに入社。 2019年にWebエンジニアに転身。 新規サービスを複数開発する部署で コミュニティサービスを開発中。 趣味は野球観戦、競馬、ゲーム。

  3. Agenda 1. はじめに 2. Auth0 3. Firebase 4. PWA

  4. はじめに

  5. はじめに PWA x Firebase x Auth0での認証について、 実際に作成しているアプリケーションを例に挙げてお話します。

  6. 認証認可 アプリ

  7. 登録 認証フロー メールアドレス、パスワード 認証メール メールの認証アドレスをクリック

  8. ログイン 認証フロー メールアドレス、パスワード アクセストークン (+リフレッシュトークン) アクセストークン カスタムトークン カスタムトークンでサインイン firebaseアクセストークン

  9. トークンリフレッシュ 認証フロー リフレッシュトークン アクセストークン (+リフレッシュトークン) アクセストークン カスタムトークン カスタムトークンでサインイン firebaseアクセストークン

  10. Auth0

  11. Auth0を併用する理由 FirebaseにもAuthenticationの機能はある。 Auth0を併用している理由とは

  12. Auth0を併用する理由 ソーシャルログインの対応範囲 ソーシャルログイン対応を見据えている。実装はこれからの予定。 firebaseで対応しているのは、メジャーどころはGoogle, Facebook, Twitter あたり。 Auth0ではそれに加えてLINEも利用することができる。

  13. Auth0を併用する理由 マネージドな領域の広さ 本人確認やパスワードリセットなど認証にまつわる部分をマネージドな機能と して提供してくれる。 アプリへの組み込みが容易であり、実装・運用コストを削減できる。

  14. Firebase

  15. firebaseとの連携 カスタムトークンを使った連携 カスタムトークンを利用することでAuth0と連携した認証が可能。 カスタムトークンの生成にAuth0のuidを用いることで、 firebaseのユーザーuidがAuth0と同一になる。 カスタムトークン発行後、それを利用してサインインすることで firebaseの各サービスで利用できるアクセストークンが発行される。

  16. firebaseとの連携 カスタムトークンを使った連携 アクセストークン Auth0アクセストークン firebaseカスタムトークン Auth0から受け取ったアクセストークン を使ってカスタムトークンを作成。 カスタムトークン生成に最低限必要なのは ユーザーを一意に識別できるuidのみ。 カスタムトークンの生成にはサーバーサイ

    ドでAdminSDKを利用する必要がある。

  17. firebaseとの連携 カスタムトークンを使った連携 firebaseカスタムトークン firebaseカスタムトークン firebaseアクセストークン 受け取ったカスタムトークンを使って firebaseにサインインする。 サインインしたときにfirebaseにユーザー が作成される。 返却されたトークンを使って、以後は

    firebaseのサービスにアクセスできる。

  18. PWA

  19. PWAでの工夫 永久ログイン コミュニティサービスという特性上、一度ログインしたら再度ログインを挟ま ずにサービスを利用してもらいたい。 リフレッシュトークンを利用することで一度ログインしたらログイン状態を維 持するようトークンのライフサイクルを管理。

  20. PWAでの工夫 永久ログイン firebaseカスタムトークン firebaseカスタムトークン firebaseアクセストークン Auth0アクセストークン アクセストークン (+リフレッシュトークン) リフレッシュトー クン

    Auth0のアクセストークンの期限が切れ ていればリフレッシュトークンを使ってア クセストークンを更新。 Auth0のアクセストークン期限は1時間 (変更可) トークンを更新したあとはログインしたと きのフローと一緒。

  21. PWAでの工夫 永久ログイン firebaseのトークンを直接リフレッシュできないのか？

  22. PWAでの工夫 永久ログイン firebaseリフレッシュトークン firebaseアクセストークン (+リフレッシュトークン) firebaseにもリフレッシュトークンがある ので、それを使ってアクセストークンの更 新が可能。 firebaseのアクセストークンの期限は1時 間(変更不可)

    firebaseカスタムトークン firebaseアクセストークン リフレッシュトークン

  23. おわり