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

PWA x firebase x Auth0 での認証

Avatar for Kenta TSUNEMI Kenta TSUNEMI
October 21, 2020
Programming
620
1

PWA x firebase x Auth0 での認証

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

Avatar for Kenta TSUNEMI

Kenta TSUNEMI

October 21, 2020

More Decks by Kenta TSUNEMI

See All by Kenta TSUNEMI
TypeScript Compiler はどのように未使用変数を検出しているのか？
Avatar for Kenta TSUNEMI tocomi
0
120
配列にまつわる型検査をしたら思ったより大変だった話
Avatar for Kenta TSUNEMI tocomi
0
130
型チェック 速度改善 奮闘記⌛
Avatar for Kenta TSUNEMI tocomi
4
1.2k
CSSセレクタを戦わせてみた⚔️
Avatar for Kenta TSUNEMI tocomi
0
78
フロントエンド一年生がテストを考える
Avatar for Kenta TSUNEMI tocomi
1
380

Other Decks in Programming

See All in Programming
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
Avatar for rick rick_ds
0
480
Go 1.27 における memory allocation の高速化
Avatar for ANDPAD inc andpad
0
110
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
Avatar for Ryo Tomidokoro hanhan1978
4
1.7k
S3 を使うアプリケーションをローカル完結で動かすことに全力を注いでみた / Running S3 Apps Offline
Avatar for Daisuke Garaike contour_gara
0
390
Apache Hive: そしてCloud Native Lakehouseへ
Avatar for okumin okumin
1
210
OpenSpecのproposalにbrainstormingを持たせてみた
Avatar for Toranosuke Minamikawa tigertora7571
1
210
AI時代のPHPer生存戦略 ～「言語、もうなんでもよくない？」に本気で向き合う～
Avatar for viviON vivion
0
300
ビデオ通話が繋がる0.2秒で何が起きているのか
Avatar for Miyamoto Naoyuki supurazako
2
180
継続モナドとリアクティブプログラミング
Avatar for ゆきくらげ yukikurage
3
690
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
Avatar for Tomohisa Takaoka tomohisa
0
1.4k
Claude Code全社展開のためにやったことn選～プラグイン302個・コミッター271人を支えるために～
Avatar for Kenichi Takahashi kenchan
5
1.4k
壊れたパーサから始める関数型設計と構成的なパーサ #fp_matsuri
Avatar for ライガー raiga0310
2
450

Featured

See All Featured
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
160
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
600
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
630
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
460
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
570
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.6k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
56k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
240
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.5k

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. おわり