Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
PWA x firebase x Auth0 での認証 2020/10/21 PWA Night vol.21 ~認証~
Slide 2
Slide 2 text
自己紹介 Kenta TSUNEMI tocomi0112 tocomi 2015年に新卒でERPベンダーに入社。 2019年にWebエンジニアに転身。 新規サービスを複数開発する部署で コミュニティサービスを開発中。 趣味は野球観戦、競馬、ゲーム。
Slide 3
Slide 3 text
Agenda 1. はじめに 2. Auth0 3. Firebase 4. PWA
Slide 4
Slide 4 text
はじめに
Slide 5
Slide 5 text
はじめに PWA x Firebase x Auth0での認証について、 実際に作成しているアプリケーションを例に挙げてお話します。
Slide 6
Slide 6 text
認証認可 アプリ
Slide 7
Slide 7 text
登録 認証フロー メールアドレス、パスワード 認証メール メールの認証アドレスをクリック
Slide 8
Slide 8 text
ログイン 認証フロー メールアドレス、パスワード アクセストークン (+リフレッシュトークン) アクセストークン カスタムトークン カスタムトークンでサインイン firebaseアクセストークン
Slide 9
Slide 9 text
トークンリフレッシュ 認証フロー リフレッシュトークン アクセストークン (+リフレッシュトークン) アクセストークン カスタムトークン カスタムトークンでサインイン firebaseアクセストークン
Slide 10
Slide 10 text
Auth0
Slide 11
Slide 11 text
Auth0を併用する理由 FirebaseにもAuthenticationの機能はある。 Auth0を併用している理由とは
Slide 12
Slide 12 text
Auth0を併用する理由 ソーシャルログインの対応範囲 ソーシャルログイン対応を見据えている。実装はこれからの予定。 firebaseで対応しているのは、メジャーどころはGoogle, Facebook, Twitter あたり。 Auth0ではそれに加えてLINEも利用することができる。
Slide 13
Slide 13 text
Auth0を併用する理由 マネージドな領域の広さ 本人確認やパスワードリセットなど認証にまつわる部分をマネージドな機能と して提供してくれる。 アプリへの組み込みが容易であり、実装・運用コストを削減できる。
Slide 14
Slide 14 text
Firebase
Slide 15
Slide 15 text
firebaseとの連携 カスタムトークンを使った連携 カスタムトークンを利用することでAuth0と連携した認証が可能。 カスタムトークンの生成にAuth0のuidを用いることで、 firebaseのユーザーuidがAuth0と同一になる。 カスタムトークン発行後、それを利用してサインインすることで firebaseの各サービスで利用できるアクセストークンが発行される。
Slide 16
Slide 16 text
firebaseとの連携 カスタムトークンを使った連携 アクセストークン Auth0アクセストークン firebaseカスタムトークン Auth0から受け取ったアクセストークン を使ってカスタムトークンを作成。 カスタムトークン生成に最低限必要なのは ユーザーを一意に識別できるuidのみ。 カスタムトークンの生成にはサーバーサイ ドでAdminSDKを利用する必要がある。
Slide 17
Slide 17 text
firebaseとの連携 カスタムトークンを使った連携 firebaseカスタムトークン firebaseカスタムトークン firebaseアクセストークン 受け取ったカスタムトークンを使って firebaseにサインインする。 サインインしたときにfirebaseにユーザー が作成される。 返却されたトークンを使って、以後は firebaseのサービスにアクセスできる。
Slide 18
Slide 18 text
PWA
Slide 19
Slide 19 text
PWAでの工夫 永久ログイン コミュニティサービスという特性上、一度ログインしたら再度ログインを挟ま ずにサービスを利用してもらいたい。 リフレッシュトークンを利用することで一度ログインしたらログイン状態を維 持するようトークンのライフサイクルを管理。
Slide 20
Slide 20 text
PWAでの工夫 永久ログイン firebaseカスタムトークン firebaseカスタムトークン firebaseアクセストークン Auth0アクセストークン アクセストークン (+リフレッシュトークン) リフレッシュトー クン Auth0のアクセストークンの期限が切れ ていればリフレッシュトークンを使ってア クセストークンを更新。 Auth0のアクセストークン期限は1時間 (変更可) トークンを更新したあとはログインしたと きのフローと一緒。
Slide 21
Slide 21 text
PWAでの工夫 永久ログイン firebaseのトークンを直接リフレッシュできないのか?
Slide 22
Slide 22 text
PWAでの工夫 永久ログイン firebaseリフレッシュトークン firebaseアクセストークン (+リフレッシュトークン) firebaseにもリフレッシュトークンがある ので、それを使ってアクセストークンの更 新が可能。 firebaseのアクセストークンの期限は1時 間(変更不可) firebaseカスタムトークン firebaseアクセストークン リフレッシュトークン
Slide 23
Slide 23 text
おわり