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
PWA x firebase x Auth0 での認証
Search
Kenta TSUNEMI
October 21, 2020
Programming
1
510
PWA x firebase x Auth0 での認証
2020/10/21 PWA Night vol.21 ~認証~
Kenta TSUNEMI
October 21, 2020
Tweet
Share
More Decks by Kenta TSUNEMI
See All by Kenta TSUNEMI
配列にまつわる型検査をしたら思ったより大変だった話
tocomi
0
65
型チェック 速度改善 奮闘記⌛
tocomi
4
930
CSSセレクタを戦わせてみた⚔️
tocomi
0
27
フロントエンド一年生がテストを考える
tocomi
1
350
Other Decks in Programming
See All in Programming
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
940
tsconfigのオプションで変わる型世界
keisukeikeda
1
120
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
290
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
140
テスト分析入門/Test Analysis Tutorial
goyoki
11
2.7k
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
220
DevTalks 25 - Create your own AI-infused Java apps with ease
kdubois
2
120
漸進。
ssssota
0
910
Use Perl as Better Shell Script
karupanerura
0
640
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
620
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
110
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.6k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Balancing Empowerment & Direction
lara
1
83
The World Runs on Bad Software
bkeepers
PRO
68
11k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Facilitating Awesome Meetings
lara
54
6.4k
Done Done
chrislema
184
16k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Speed Design
sergeychernyshev
30
970
Transcript
PWA x firebase x Auth0 での認証 2020/10/21 PWA Night vol.21
~認証~
自己紹介 Kenta TSUNEMI tocomi0112 tocomi 2015年に新卒でERPベンダーに入社。 2019年にWebエンジニアに転身。 新規サービスを複数開発する部署で コミュニティサービスを開発中。 趣味は野球観戦、競馬、ゲーム。
Agenda 1. はじめに 2. Auth0 3. Firebase 4. PWA
はじめに
はじめに PWA x Firebase x Auth0での認証について、 実際に作成しているアプリケーションを例に挙げてお話します。
認証認可 アプリ
登録 認証フロー メールアドレス、パスワード 認証メール メールの認証アドレスをクリック
ログイン 認証フロー メールアドレス、パスワード アクセストークン (+リフレッシュトークン) アクセストークン カスタムトークン カスタムトークンでサインイン firebaseアクセストークン
トークンリフレッシュ 認証フロー リフレッシュトークン アクセストークン (+リフレッシュトークン) アクセストークン カスタムトークン カスタムトークンでサインイン firebaseアクセストークン
Auth0
Auth0を併用する理由 FirebaseにもAuthenticationの機能はある。 Auth0を併用している理由とは
Auth0を併用する理由 ソーシャルログインの対応範囲 ソーシャルログイン対応を見据えている。実装はこれからの予定。 firebaseで対応しているのは、メジャーどころはGoogle, Facebook, Twitter あたり。 Auth0ではそれに加えてLINEも利用することができる。
Auth0を併用する理由 マネージドな領域の広さ 本人確認やパスワードリセットなど認証にまつわる部分をマネージドな機能と して提供してくれる。 アプリへの組み込みが容易であり、実装・運用コストを削減できる。
Firebase
firebaseとの連携 カスタムトークンを使った連携 カスタムトークンを利用することでAuth0と連携した認証が可能。 カスタムトークンの生成にAuth0のuidを用いることで、 firebaseのユーザーuidがAuth0と同一になる。 カスタムトークン発行後、それを利用してサインインすることで firebaseの各サービスで利用できるアクセストークンが発行される。
firebaseとの連携 カスタムトークンを使った連携 アクセストークン Auth0アクセストークン firebaseカスタムトークン Auth0から受け取ったアクセストークン を使ってカスタムトークンを作成。 カスタムトークン生成に最低限必要なのは ユーザーを一意に識別できるuidのみ。 カスタムトークンの生成にはサーバーサイ
ドでAdminSDKを利用する必要がある。
firebaseとの連携 カスタムトークンを使った連携 firebaseカスタムトークン firebaseカスタムトークン firebaseアクセストークン 受け取ったカスタムトークンを使って firebaseにサインインする。 サインインしたときにfirebaseにユーザー が作成される。 返却されたトークンを使って、以後は
firebaseのサービスにアクセスできる。
PWA
PWAでの工夫 永久ログイン コミュニティサービスという特性上、一度ログインしたら再度ログインを挟ま ずにサービスを利用してもらいたい。 リフレッシュトークンを利用することで一度ログインしたらログイン状態を維 持するようトークンのライフサイクルを管理。
PWAでの工夫 永久ログイン firebaseカスタムトークン firebaseカスタムトークン firebaseアクセストークン Auth0アクセストークン アクセストークン (+リフレッシュトークン) リフレッシュトー クン
Auth0のアクセストークンの期限が切れ ていればリフレッシュトークンを使ってア クセストークンを更新。 Auth0のアクセストークン期限は1時間 (変更可) トークンを更新したあとはログインしたと きのフローと一緒。
PWAでの工夫 永久ログイン firebaseのトークンを直接リフレッシュできないのか?
PWAでの工夫 永久ログイン firebaseリフレッシュトークン firebaseアクセストークン (+リフレッシュトークン) firebaseにもリフレッシュトークンがある ので、それを使ってアクセストークンの更 新が可能。 firebaseのアクセストークンの期限は1時 間(変更不可)
firebaseカスタムトークン firebaseアクセストークン リフレッシュトークン
おわり