More Related Content
Similar to msal.js v2を触る (20)
msal.js v2を触る
- 5. (そもそも)msal.jsとは
• Micro Soft Authentication Library
• Azure ADアプリケーションで保護されたWeb APIリソースなど
にアクセスするためのトークン取得支援を行うライブラリ
• Js以外にも.NET/Java等の様々な言語のライブラリが存在
• AzureAD v2.0エンドポイント対応ライブラリ
• V1.0対応エンドポイント対応ライブラリはADAL
- 10. PKCE
- Implicit Flowの問題点
• Proof Key for Code Exchange
• AngularやVueといったSPA構成でよく使用される
「暗黙的な許可フロー(Implicit Flow)」
• Implicit Flowには認可コード横取り攻撃が可能な問題が存在
• Implicit Flowは認可コードを用いることで認証なしに
アクセストークンを取得するフロー
• Implicit Flowは認可コードを用いてアクセストークンを取得する。
悪意のあるアプリケーションは認可コードを横取りすることで
認証なしにアクセストークンを取得することができるようになる
- 12. PKCE
- 改善内容
• code_verifier を使用する
1. 認証時
• 下記を付与した通信を行い認可コード取得
• 「code_verifierを変換した値(code_challenge)」
• 「変換方法(code_challenge_method)」
2. アクセストークン取得時
• 「code_verifier」を付与した通信を行う
• 認可サーバー上で下記を実施し検証を行う。
• 1.で送付されたcode_challenge_methodで、送付されたcode_verifierを変換
• code_challengeと一致するか検証
- 20. msal.js v2の使い方
- 1.クライアントインスタンスの生成
• PublicClientApplication インスタンスの生成
• V1同様生成時に使用するADアプリの設定情報が必要
• アプリケーションクライアントID
• 特定テナントの指定(任意)
• リダイレクトURI(任意)
const _client = new PublicClientApplication({
auth: {
clientId: ‘xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx’,
authority: ‘https://login.microsoftonline.com/<テナントID>/’,
redirectUri: ‘<リダイレクトURI>’
}
})
- 21. msal.js v2の使い方
- 1.クライアントインスタンスの生成(設定内容)
export declare type Configuration = {
auth?: {
clientId: string – AzureADアプリケーションID(必須)
authority?: string – 特定のテナントを使用したい場合に使用
knownAuthorities?: Array<string> - 有効URI配列(B2Cで使用)
cloudDiscoveryMetadata?: string – クラウド検出文字列※1
redirectUri?: string – 認証画面後戻ってくるURL。AzureADアプリに設定されているURLでないといけない
postLogoutRedirectUri?: string – ログアウト後遷移するURL
navigateToLoginRequestUrl?: boolean – リダイレクトページを固定させたいかどうかの指定
};
cache?: {
cacheLocation?: string – トークン格納ストレージの選択 ‘sessionStorage/localStorage’
storeAuthStateInCookie?: boolean – 認証状態のCookie格納
};
system?: {
loggerOptions?: LoggerOptions – ロギング設定※3
networkClient?: INetworkModule – ネットワークうインタフェースの実装(詳細調査中)
windowHashTimeout?: number – ポップアップの待機時間の変更
iframeHashTimeout?: number – iFrameの待機時間の変更
loadFrameTimeout?: number – Frameロード待機時間の変更
};
};
※1:詳細はhttps://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/performance.md 参照
※2: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/09243eb985138d9c39194c3eb84b28cf7a8d8f25/lib/msal-browser/src/request/RedirectRequest.ts 参照
※3: https://docs.microsoft.com/ja-jp/azure/active-directory/develop/msal-logging?tabs=javascript 参照
- 22. msal.js v2の使い方
- 2.ログイン
• 1.で作成したクライアントを使用してログインする
• これもv1時代と流れは大きくは変わらない
• ポップアップかリダイレクト
• リダイレクトの場合はcallbackを引っ掛ける仕掛けが必要
• V1と違ってcallbackがpromise(handleRedirectPromise)になっている
• ポップアップはPromise返却されるので、awaitかthenで引っ掛ける
• スコープの指定やリダイレクトURIの指定など…
//リダイレクト:asyncなFunctionの中で実行した場合。結果はresに格納される
const res = await this._client.handleRedirectPromise();
this._client.loginRedirect({ scopes: [‘user.read’]});
// ポップアップ:asyncなFunctionの中で実行した場合。結果はresに格納される
const res = await this._client.loginPopup({ scopes: [‘user.read’]});
- 23. msal.js v2の使い方
- 3.アカウントの取得
• v1とログインアカウントの取得の仕方が大きく違う
• v1はユーザー取得インターフェースがクライアントにあったが
v2からは消されている。
• ログイン時に返却される情報から抜いてこないといけなくなった
//リダイレクト:asyncなFunctionの中で実行した場合。結果はresに格納されるのでそこから取得
const res = await this._client.handleRedirectPromise();
const account = res.account;
// ポップアップ:asyncなFunctionの中で実行した場合。結果はresに格納されるのでそこから取得
const res = await this._client.loginPopup({ scopes: [‘user.read’]});
const account = res.account;
- 24. msal.js v2の使い方
- 4.アクセストークンの取得
• v1と大きく変わらない
• acquireToken(Silent/Redirect/Popup)で取得する
• Silent/Popupは例のごとくPromiseで値返却
• RedirectはhandleRedirectPromiseで
//リダイレクト:asyncなFunctionの中で実行した場合。結果はresに格納されるのでそこから取得
const res = await this._client.handleRedirectPromise();
const accessToken = res.accessToken;
this._client.acquireTokenRedirect({scopes:[‘user.read’]})
// ポップアップ:asyncなFunctionの中で実行した場合。結果はresに格納されるのでそこから取得
const res = this._client.acquireTokenSilent({scopes:[‘user.read’]})
const accessToken = res.accessToken;
- 27. 参考文献
• AzureAD/microsoft-authentication-library-for-js
• https://github.com/AzureAD/microsoft-authentication-library-for-js
• Microsoft ID プラットフォームの認証ライブラリ
• https://docs.microsoft.com/ja-jp/azure/active-directory/develop/reference-v2-libraries
• Microsoft ID プラットフォームと暗黙的な許可のフロー
• https://docs.microsoft.com/ja-jp/azure/active-directory/develop/v2-oauth2-implicit-grant-flow
• RFC6749 - 4.1.2. Authorization Response
• https://tools.ietf.org/html/rfc6749#section-4.1.2
• RFC7636
• https://tools.ietf.org/html/rfc7636
• OAuth 2.0 Security Best Current Practice
• https://tools.ietf.org/html/draft-ietf-oauth-security-topics-14#section-2.1.2
• PKCE で防げる「認可コード横取り攻撃」とはどのような攻撃か
• https://qiita.com/samiii/items/9574d1e237228c718cd6
• Auth0を利用してOAuth 2.0のPKCEを理解する
• https://dev.classmethod.jp/articles/oauth-2-0-pkce-by-auth0/