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

PWA x firebase x Auth0 での認証

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Kenta TSUNEMI Kenta TSUNEMI
October 21, 2020
Programming
590
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
配列にまつわる型検査をしたら思ったより大変だった話
Avatar for Kenta TSUNEMI tocomi
0
110
型チェック 速度改善 奮闘記⌛
Avatar for Kenta TSUNEMI tocomi
4
1.2k
CSSセレクタを戦わせてみた⚔️
Avatar for Kenta TSUNEMI tocomi
0
56
フロントエンド一年生がテストを考える
Avatar for Kenta TSUNEMI tocomi
1
370

Other Decks in Programming

See All in Programming
의존성 주입과 모듈화
Avatar for Sungyong An fornewid
0
110
安いハードウェアでVulkan
Avatar for Fadis fadis
1
930
AIと共にエンジニアとPMの “二刀流”を実現する
Avatar for Naruo Yoshiki naruogram
0
130
レガシーPHP転生 〜父がドメインエキスパートだったのでDDD+Claude Codeでチート開発します〜
Avatar for panda_program panda_program
0
590
PHPで TLSのプロトコルを実装してみるをもう一度しゃべりたい
Avatar for higaki higaki_program
0
180
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
1.8k
Codex CLIのSubagentsによる並列API実装 / Parallel API Implementation with Codex CLI Subagents
Avatar for 冨澤宝斗 takatty
2
860
AI時代のPhpStorm最新事情 #phpcon_odawara
Avatar for yusuke yusuke
0
130
ファインチューニングせずメインコンペを解く方法
Avatar for pokutuna pokutuna
0
280
Symfonyの特性(設計思想)を手軽に活かす特性(trait)
Avatar for ICKX ickx
0
130
おれのAgentic Coding 2026/03
Avatar for TsukasaSekiguchi tsukasagr
1
140
年間50登壇、単著出版、雑誌寄稿、Podcast出演、YouTube、CM、カンファレンス主催……全部やってみたので面白さ等を比較してみよう / I’ve tried them all, so let’s compare how interesting they are.
Avatar for nrs nrslib
4
720

Featured

See All Featured
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
670
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
190
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
110
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
260
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.4k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
310
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.1k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k

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