$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
認証の話
Search
yohfee
November 11, 2021
Programming
0
250
認証の話
Sendai Frontend Meetup #7
https://sfeug.connpass.com/event/228512/
yohfee
November 11, 2021
Tweet
Share
More Decks by yohfee
See All by yohfee
個人開発で使ってるやつを紹介する回
yohfee
1
910
バーチャル背景の話
yohfee
0
140
Tensorflow.jsの話
yohfee
0
320
Other Decks in Programming
See All in Programming
C-Shared Buildで突破するAI Agent バックテストの壁
po3rin
0
390
AIコーディングエージェント(NotebookLM)
kondai24
0
200
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
matsu_chara
2
220
令和最新版Android Studioで化石デバイス向けアプリを作る
arkw
0
410
LLM Çağında Backend Olmak: 10 Milyon Prompt'u Milisaniyede Sorgulamak
selcukusta
0
130
Flutter On-device AI로 완성하는 오프라인 앱, 박제창 @DevFest INCHEON 2025
itsmedreamwalker
1
120
20251127_ぼっちのための懇親会対策会議
kokamoto01_metaps
2
440
AIエージェントを活かすPM術 AI駆動開発の現場から
gyuta
0
430
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
pd1xx
1
730
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
syumai
7
2.2k
ローターアクトEクラブ アメリカンナイト:川端 柚菜 氏(Japan O.K. ローターアクトEクラブ 会長):2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
2720japanoke
0
730
認証・認可の基本を学ぼう後編
kouyuume
0
240
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.9k
Thoughts on Productivity
jonyablonski
73
5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.8k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
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
ご清聴ありがとうございました