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
1
520

PWA x firebase x Auth0 での認証

2020/10/21 PWA Night vol.21 ～認証～
Avatar for Kenta TSUNEMI

Kenta TSUNEMI

October 21, 2020
Tweet

More Decks by Kenta TSUNEMI

See All by Kenta TSUNEMI
配列にまつわる型検査をしたら思ったより大変だった話
Avatar for Kenta TSUNEMI tocomi
0
70
型チェック 速度改善 奮闘記⌛
Avatar for Kenta TSUNEMI tocomi
4
950
CSSセレクタを戦わせてみた⚔️
Avatar for Kenta TSUNEMI tocomi
0
30
フロントエンド一年生がテストを考える
Avatar for Kenta TSUNEMI tocomi
1
360

Other Decks in Programming

See All in Programming
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
Avatar for Tetsuya Kikuchi tkikuc
11
2.1k
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
Avatar for ANDPAD inc andpad
0
250
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
Avatar for kuro kuro_kurorrr
0
120
2度もゼロから書き直して、やっとブラウザでぬるぬる動くAIに辿り着いた話
Avatar for Tomohiro Inoue tomoino
0
160
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
Avatar for どすこい daisuketakeda
1
120
都市をデータで見るってこういうこと　PLATEAU属性情報入門
Avatar for nokonoko1203 nokonoko1203
1
530
AIネイティブなプロダクトをGolangで挑む取り組み
Avatar for nmatsumoto4 nmatsumoto4
0
120
レガシーシステムの機能調査・開発におけるAI利活用
Avatar for takuya ohtonari takuya_ohtonari
0
610
LINEヤフー データグループ紹介
Avatar for LINEヤフー株式会社 採用情報 lycorp_recruit_jp
0
750
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
Avatar for ivargrimstad ivargrimstad
1
800
データベースコネクションプール(DBCP)の変遷と理解
Avatar for k.fujikawa8 fujikawa8
1
270
GoのWebAssembly活用パターン紹介
Avatar for syumai syumai
3
10k

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.9k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
31
1k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
790
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
650
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k

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