Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
認証の話
Search
yohfee
November 11, 2021
Programming
280
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.2k
個人開発で使ってるやつを紹介する回
yohfee
1
970
バーチャル背景の話
yohfee
0
180
Tensorflow.jsの話
yohfee
0
330
Other Decks in Programming
See All in Programming
Skillsは効率化、Agentsは"自分の拡張"——Builder時代のエージェント編成(CC Night 2026)
wemra
1
170
Language Server 使ってる? 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
handlename
0
810
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
nrslib
4
1.5k
脅威をエンジニアリングの糧にして――現場編 / Turning Threats into Engineering Fuel — Field Edition
nrslib
0
300
act1-costs.pdf
sumedhbala
0
120
IBM Bobを活用したレガシーアプリの最新化
oniak3ibm
PRO
1
220
エンジニアと一緒にテストコードの設計と実装を改善した話
mototakatsu
0
230
JavaDoc 再入門
nagise
1
420
代数的データ型って何が嬉しいの? #frontend_phpcon_do
kajitack
8
3.8k
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
nrslib
14
5.9k
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
chobishiba
3
610
LLMによるContent Moderationの本番運用の裏側と品質担保への挑戦
suikabar
3
790
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
So, you think you're a good person
axbom
PRO
2
2.1k
Done Done
chrislema
186
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.9k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.6k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
290
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
GitHub's CSS Performance
jonrohan
1033
470k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
150
Agile that works and the tools we love
rasmusluckow
331
22k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
1
2.7k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
350
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
ご清聴ありがとうございました