Upgrade to Pro — share decks privately, control downloads, hide ads and more …

msal.jsのあれこれ

Avatar for takas takas
May 06, 2022

 msal.jsのあれこれ

Microsoft 365 Virtual Marathon 2022で発表した資料です。
発表中で使用したデモはこちらに格納しています。

Avatar for takas

takas

May 06, 2022
Tweet

More Decks by takas

Other Decks in Technology

Transcript

  1. M365VIRTUALMARATHON.COM #M365VM ▪ 承認コード ▪ クライアントの資格情報 ▪ デバイスコード ▪ 暗黙的な許可

    ▪ On-Behalf-Of ▪ ユーザー名/パスワード ▪ 統合Windows認証 1. AAD認証の仕組み -そもそもAADアプリケーションの認証の仕組み
  2. M365VIRTUALMARATHON.COM #M365VM ▪ アプリケーションID ▪ (テナントID) ▪ リダイレクトURI ▪ スコープ

    1. AAD認証の仕組み - Azure ADアプリケーションと代表的な項目(1)
  3. M365VIRTUALMARATHON.COM #M365VM ▪ アプリケーションID  認証で使用するAzure AD アプリケーションのID ▪ (テナントID)

     認証を行うテナントのID ▪ リダイレクトURI  M365の認証後返却されるURL ▪ スコープ  この認証後アクセスしたいリソース 1. AAD認証の仕組み - Azure ADアプリケーションと代表的な項目(1)
  4. M365VIRTUALMARATHON.COM #M365VM ▪ 認証フローをすべてちゃんと実装しようとすると超手間  それぞれの工程でどのような情報が必要か抑える必要あり ▪ 後述するcode_chllengeなどセキュリティ上必要な対応もあるが「なぜ」や 「どのように」も把握した上で実装する必要あり ▪

    リダイレクトを複数回挟むことになるのでステートの管理も面倒くさい ▪ RFC6749の仕様とにらめっこしたくないな! ▪ 面倒くさい&気にしなければいけないことが多い  =ライブラリに任せよう  ただ仕様とにらめっこしなきゃいけないときもある…😢 2. msalについて - ライブラリを使いたい動機
  5. M365VIRTUALMARATHON.COM #M365VM ▪ @azure/msal-browser  msal2とも呼ばれる  おそらく一番よくお世話になるであろうライブラリ  frameworkに最適な形にしたAngularやReact用の派生ライブラリあり

     @azure/msal-angular など  V2エンドポイントで使用するならこれ  PKCE対応しているライブラリ 2. msalについて - msalシリーズ
  6. M365VIRTUALMARATHON.COM #M365VM ▪ Proof Key for Code Exchange  認可コード横取り攻撃

    ▪ 暗黙的な許可フロー(Implicit Flow)で上記攻撃が可能  認可コードを横取りすることで認証なしにアクセストークンを取得し利用する 補足PKCE - PKCEとは
  7. M365VIRTUALMARATHON.COM #M365VM 2. msalについて - msalの使いかた(Clientの作成) ▪ Clientを作成  msalはUserAgentApplication

     msal-browserはPublicClientApplication const msalConfig = { auth: { clientId: 'xxxxxx', authority: 'https://login.microsoftonline.com/{TenantId}/' } } const msalClient = new msal.PublicClientApplication(msalConfig); const msalConfig = { auth: { clientId: 'xxxxxx', authority: 'https://login.microsoftonline.com/{TenantId}/' } } const msalClient = new Msal.UserAgentApplication(msalConfig); msal.js msal-browser
  8. M365VIRTUALMARATHON.COM #M365VM 2. msalについて - msalの使いかた(RedirectCallbackの実装) ▪ Redirectする場合はRedirect時に実行される処理を実装  msalはhandleRedirectCallback

     msal-browserはhandleRedirectPromise msalClient.handleRedirectCallback((error, res) => { console.error(error); console.log(res); }); // Promiseなのでawaitが使えるし使えるならそっちのほうがおすすめ msalClient.handleRedirectPromise().then(res => { console.log(res) }, error => { console.error(error) }); msal.js msal-browser
  9. M365VIRTUALMARATHON.COM #M365VM 2. msalについて - msalの使いかた(Login) ▪ Loginする  loginRedirect

     loginPopup  ssoSilent // Redirectでログインを行いたい場合 msalClient.loginRedirect(); return; // ログイン画面をPopupで表示したい場合 msalClient.loginPopup().then(res => { console.log(res) }, err => { console.error(err) }); msal.js msal-browser
  10. M365VIRTUALMARATHON.COM #M365VM 2. msal.jsについて - msalの使いかた(Login) // バックグラウンドで取得(リダイレクトやポップアップは発生しない) msalClient.acquireTokenSilent({ scopes:

    ['user.read'] }).then(res => { console.log(res) }, err => { console.error(err) }); // Redirect時にアクセストークン取得 msalClient.acquireTokenRedirect({ scopes: ['user.read'] }) return; // Popupでアクセストークン取得 msalClient.acquireTokenPopup({ scopes: ['user.read'] }).then(res => { console.log(res) }, err => { console.error(err) }); // バックグラウンドで取得(リダイレクトやポップアップは発生しない) msalClient.acquireTokenSilent({ account: loginResponse.account }).then(res => { console.log(res) }, err => { console.error(err) }); // Redirect時にアクセストークン取得 msalClient.acquireTokenRedirect({ scopes: ['user.read'] }) return; // Popupでアクセストークン取得 msalClient.acquireTokenPopup({ scopes: ['user.read'] }).then(res => { console.log(res) }, err => { console.error(error) }); msal.js msal-browser
  11. M365VIRTUALMARATHON.COM #M365VM 2. msal.jsについて - msalの使いかた(Logger) ▪ 内部処理のログを取得する const loggerCallback

    = (logLevel, message, containsPii) => { console.log({logLevel, message, containsPii}) } const msalConfig = { auth: { clientId: 'xxxxx', authority: 'https://login.microsoftonline.com/xxxxx/' }, system: { logger: new Msal.Logger( loggerCallback, { level: 3, // Verbose piiLoggingEnabled: false, correlationId: '1111' } ) } } const msalClient = new Msal.UserAgentApplication(msalConfig); const loggerCallback = (level, message, containsPii) => { console.log({level, message, containsPii}) } const msalConfig = { auth: { clientId: 'xxxxx', authority: 'https://login.microsoftonline.com/xxxxx/' }, system: { loggerOptions: { logLevel: 3, // Verbose loggerCallback } } } const msalClient = new msal.PublicClientApplication(msalConfig); msal.js msal-browser
  12. M365VIRTUALMARATHON.COM #M365VM 3. msalを利用しているライブラリを見てみる - Microsoft Graph Tool Kit ▪

    認証プロバイダとして複数のプロバイダが用意されている  その中にMsalProvider/Msal2Providerあり
  13. M365VIRTUALMARATHON.COM #M365VM 4. msal update in 2021-2022 - v2.14.0~v2.24.0からいくつかピックアップ ▪

    2.16.0  msal-Browser supports parallel silent requests #3837  acquireTokenSilentなどのSilent Requestを複数の同時呼び出しをし、いくつかが実行失敗したとして も成功した一意のThumb Printが使用されるように ▪ 2.17.0  Add configuration for popup window size and placement #3946  Login等で使用されるポップアップ画面の場所やサイズを変更できるように  https://github.com/AzureAD/microsoft-authentication-library-for-js/pull/3946/files  Add SignedHttpRequest class #3058  独自に署名HTTP(S)通信を行う際に使用する感じ?大分尖ったユースケース  https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/signed- http-request.md
  14. M365VIRTUALMARATHON.COM #M365VM 4. msal update in 2021-2022 - v2.14.0~v2.24.0からいくつかピックアップ ▪

    2.18.0  Emit event when user logs in or out from a different tab or window #3981  別タブ、ウィンドウで発生したログインやログアウトのイベントを補足できるように  https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/events.md#syncing-logged-in- state-across-tabs-and-windows  localStorageで且つSSOログインしている時のみしか機能しないのが残念…  Remove requirement of user hint on ssoSilent API #4123  もともとssoSilentはsidかaccountかhintを指定する必要があったがそれがなしでもできるように。  https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/login-user.md  複数のアカウントセッションがない場合にしか使えないという当然と言えば当然な条件はある
  15. M365VIRTUALMARATHON.COM #M365VM 4. msal update in 2021-2022 - v2.14.0~v2.24.0からいくつかピックアップ ▪

    2.20.0  Add acquireTokenByCode API for hybrid spa flow #3978  msal-nodeと組み合わせることでサードパーティーCookieがブロックされていても SSOできるようになった ▪ 2.22.0  Add support for logout_hint #4450  Logoutのフローをヒント指定することで省略することができる ▪ 2.23.0  Add performance telemetry API #4570  パフォーマンスを測定できるようになった  acquireTokenSilent, ssoSilent, acquireTokenByCode等一部のフロー
  16. M365VIRTUALMARATHON.COM #M365VM 4. msal update in 2021-2022 - v2.14.0~v2.24.0からいくつかピックアップ ▪

    2.24.0 (2022/05/02 Update)  Add support for acquiring tokens from the native broker #4531  native broker対応が行われた  Windows Web Account Managerで管理されているトークン情報を参照できる  localStorageやsessionStorageを使用しないトークン管理が可能となる  Chrome(Edge)の拡張機能が必要だったり前提条件はすこしハードル高め  ただ条件付きアクセス使って統制強めの環境下だったら入っている人多いかも?  Teamsのアプリケーション作るときも有用かもしれない?
  17. M365VIRTUALMARATHON.COM #M365VM 4. msal update in 2021-2022 - msalの開発計画について ▪

    msalのマイルストーン  https://github.com/AzureAD/microsoft-authentication-library-for-js/projects/7  これから追加されるであろう機能がなんとなくわかる
  18. M365VIRTUALMARATHON.COM #M365VM ▪ 認証は複雑なフローで実現されている ▪ msalは複雑な認証処理をラップしてくれる ▪ いくつかの派生ライブラリがあるから選定に注意  エンドポイントのバージョンが変わったりする

    ▪ 他のライブラリでmsalが使用されているケースも多い  なかで使用されているmsalによって設定内容が変わるので注意  msalの使い方を覚えておくことで有用なケースも多い ▪ M365の情報を取り扱う上で認証は避けて通れない要素  認証を楽に実装できるライブラリの使い方を抑えておいて開発で楽しよう まとめ
  19. M365VIRTUALMARATHON.COM #M365VM ▪ MSAL での認証フローのサポート  https://docs.microsoft.com/ja-jp/azure/active-directory/develop/msal-authentication-flows ▪ Microsoft ID

    プラットフォームと暗黙的な許可のフロー  https://docs.microsoft.com/ja-jp/azure/active-directory/develop/v2-oauth2-implicit-grant-flow ▪ Microsoft ID プラットフォームと OAuth 2.0 認証コード フロー  https://docs.microsoft.com/ja-jp/azure/active-directory/develop/v2-oauth2-auth-code-flow ▪ microsoftgraph/microsoft-graph-toolkit  https://github.com/microsoftgraph/microsoft-graph-toolkit ▪ MSAL2 プロバイダー  https://github.com/microsoftgraph/msgraph-sdk-javascript ▪ TeamsUserCredential  https://github.com/OfficeDev/TeamsFx/blob/b0910bd3e2593863b58fa535ff996eaba10fe7df/packages/sdk/src/credential/te amsUserCredential.browser.ts#L32 ▪ MSAL Browser Projects  https://github.com/AzureAD/microsoft-authentication-library-for-js/projects/7 ▪ Proof Key for Code Exchange (RFC 7636)  https://www.authlete.com/ja/developers/pkce/ 参考
  20. MICROSOFT 365 VIRTUAL MARATHON 2022 MAY, 4. – 6. 2022

    https://forms.office.com/r/qCXhcZZUgU スピーカーおよびイベント への感想やご意見 アンケートにご協力ください