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
290
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.7k
個人開発で使ってるやつを紹介する回
yohfee
1
990
バーチャル背景の話
yohfee
0
190
Tensorflow.jsの話
yohfee
0
340
Other Decks in Programming
See All in Programming
AI時代のPHPer生存戦略 ~「言語、もうなんでもよくない?」に本気で向き合う~
vivion
0
790
実装をデザインガイドラインに追従させるための取り組み / 260731-dip-mosh-design-system
dachi023
0
2.5k
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計|Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
tomohisa
1
990
freeeにおけるEvalsの実践例の紹介
freee
PRO
0
120
PHP初心者セッション2026 〜生成AIでは見えない裏側を知る:今だからLAMPを通して仕組みを学ぶ〜
kashioka
0
950
これって Effect でできたのでは? / TSKaigi Mashup Kansai #2
susisu
0
250
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
shiki_kakaku
0
1.8k
AI Readyの正体はデータマネジメントだ メダリオン2.0の最前線
freee
PRO
0
280
プロポーザルを書いてもらう
pvcresin
0
550
Flow は今どうなっているか
mizdra
PRO
0
600
20260722_microCMSで考える、AI時代のコンテンツ運用設計
yosh1
0
420
5分で問診!Composer セキュリティ健康診断
codmoninc
0
1k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
123
22k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.5k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
390
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.8k
Everyday Curiosity
cassininazir
0
280
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
1
400
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.7k
Crafting Experiences
bethany
1
250
What's in a price? How to price your products and services
michaelherold
247
13k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
390
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
2.4k
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
ご清聴ありがとうございました