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
310
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
Transcript
18 slides
認証の話 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
ご清聴ありがとうございました
More Decks by yohfee
See All by yohfee
オブザーバビリティ駆動開発って実際どうなの?
yohfee
6
1.9k
個人開発で使ってるやつを紹介する回
yohfee
1
1k
バーチャル背景の話
yohfee
0
210
Tensorflow.jsの話
yohfee
0
350
Other Decks in Programming
See All in Programming
例外からRich Errorsまで Kotlinエラーハンドリングの進化を読み解く
shiita0903
0
130
AI-Powered Domain-Driven Design
ziobrando
0
440
TanStack Vue Query と Pinia Colada から学ぶ非同期状態の型設計
aoshi
0
670
Next.js: The final boss of Web Performance
guaca
0
400
AI時代のシニアエンジニアとは
yosuke_furukawa
PRO
15
12k
どうしても Eloquent でリポジトリパターンをやりたいんだ #phpcon_niigata / phpcon-niigata-2026
shogogg
0
130
SODA - FACT BOOK(EN)
sodainc
1
240
作って学ぶSpring BootのAuto Configuration / JJUG Night Seminar 2026-10-19
rshindo
0
230
선언형 햅틱 라이브러리 진동을 소개합니다
l2hyunwoo
1
310
Seven New Principles of Software Engineering
yegor256
0
490
AIがコードを書いてくれる時代、我々は何を確かめるのか
yosuke_furukawa
PRO
13
5.9k
ビジネスロジックを堅牢に~Scala 3のドメインプリミティブ~
j5ik2o
0
160
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
6.4k
Building an army of robots
kneath
307
47k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
310
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
570
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
370
SEO for Brand Visibility & Recognition
aleyda
0
4.9k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
1
310
Believing is Seeing
oripsolob
1
280
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
12k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k