Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
認証の話
Search
yohfee
November 11, 2021
Programming
300
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
認証の話
Sendai Frontend Meetup #7
https://sfeug.connpass.com/event/228512/
yohfee
November 11, 2021
More Decks by yohfee
See All by yohfee
オブザーバビリティ駆動開発って実際どうなの?
yohfee
6
1.9k
個人開発で使ってるやつを紹介する回
yohfee
1
990
バーチャル背景の話
yohfee
0
200
Tensorflow.jsの話
yohfee
0
350
Other Decks in Programming
See All in Programming
AIで開発が速くなった先で、開発チームは何を目指すか
shihochan
1
1.7k
月間100万人のサービス刷新で、 技術選定をHonoに振り切った話
yutobara
8
6.8k
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
dske104
0
190
Workers Cache を知る
syumai
0
370
HTML-in-Canvasで作る未来のWeb UI表現
clockmaker
5
5.2k
AI時代のコードレビューは人に向けるな、仕組みに向けろ
texmeijin
5
3.7k
GemmaをJevのように使ってみる / Use Gemma like Jev
kishida
5
820
FactoryBotをやめればRSpecは速くなるのか?
yuta_onishi_97
0
930
JIS keyboard support in Omarchy
lef237
0
150
残高管理から台帳サービスへの進化
artoy
1
210
Vue Fes Japan の “作る側”に関わってみて
naokihaba
0
170
AI主導のプログラミング学習アプリを作ってみた
econanringo
0
180
Featured
See All Featured
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
400
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
530
How to Think Like a Performance Engineer
csswizardry
28
2.9k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
550
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
850
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
Darren the Foodie - Storyboard
khoart
PRO
4
4k
So, you think you're a good person
axbom
PRO
2
2.2k
Producing Creativity
orderedlist
PRO
348
41k
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
4
4.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
53k
Reality Check: Gamification 10 Years Later
codingconduct
0
2.3k
Transcript
認証の話 Sendai Frontend Meetup #7
スロー労働始めさせられました
認証めんどくさい
\それDeviseでできるよ/ \それSpring Securityでできるよ/ \それASP.NET Core Identityでできるよ/ 普通の要件ならそれほどでもないけど
とはいえユーザ管理自体がリスクといえなくもないご時世 ユーザのプライバシー情報を流出してしましました! MFAに対応してください! セッション管理に脆弱性が! ついったーログインしたい! ライブラリにCVEが報告されました! 関連サービスとSSOして!
でも大抵はサービスの本質的な価値じゃないんだよなぁ ユーザのプライバシー情報を流出してしましました! MFAに対応してください! セッション管理に脆弱性が! ついったーログインしたい! ライブラリにCVEが報告されました! セキュリティ的な側面 ビジネス要件的な側面 関連サービスとSSOして!
だったらIDaaSを使えばいいじゃない • Firebase Authentication • AWS Cognito • Azure Active
Directory • Auth0 • Okta • 他多数
SPAでAzure Active Directoryの話
Demo1 https://github.com/yohfee/sfeug7/tree/main/demo1
13: CDNからmsal-browserを読み込み 15-21: クライアントの設定値 23: クライアントのインスタンスを生成 30-32: ログインの設定値 35: ログインダイアログをポップアップ表示
36: IDトークンやアクセストークン等の認証情報 37: 上記のうち認証されたユーザの概要データ 40-41: ログインに失敗した場合 46: ログアウトダイアログをポップアップ表示
Demo2 https://github.com/yohfee/sfeug7/tree/main/demo2
3: msal-reactを読み込み 4: msal-browserを読み込み 7-13: クライアントの設定値 15: クライアントのインスタンスを生成 19-21: クライアントをプロバイダに設定
2: msal-reactを読み込み 4: サインインボタンのコンポーネント 7: ログインダイアログをポップアップ表示 10: サインアウトボタンのコンポーネント 13: ログアウトダイアログをポップアップ表示
15: ユーザ情報を表示するコンポーネント 29-32: ログイン時だけ表示する 34-:36: ログアウト時だけ表示する
で、どうなの? • ただ使うだけなら簡単 • Reactでもお手軽 • AngularはあるけどVueは無い • 会社AADでもAAD B2Cでも基本的にはオプション変えるだけで対応できる
• GraphAPIとかも使いたいときに楽 • 要件に応じて柔軟な利用ができる • MS謹製のライブラリで安心 • MSが様々なサンプルを公開 • MSの公式ドキュメントが充実
MSの公式ドキュメントが充実
Active Directory全然わからん
ところでAzure ADは SPAじゃなくても勿論使えます Googleログインしか対応してない cookpad/kuroko2に足した例 RailsならOmniAuthに乗っかるだけなので とっても楽チン https://github.com/yohfee/kuroko2/tree/sign_in_with_azure
ご清聴ありがとうございました