msal.jsのあれこれ Takashi Okawa(＠DevTakas) Microsoft MVP for Office Development MICROSOFT 365 VIRTUAL MARATHON 2022 MAY, 4 – 6, 2022

M365VIRTUALMARATHON.COM #M365VM MICROSOFT 365 VIRTUAL MARATHON 2022 SPONSORS

M365VIRTUALMARATHON.COM #M365VM ▪ Product OwnerやったりWeb開発をしたりAzureと戯れたり ▪ M365の情報とAzureを利用したアプリケーション開発をしたりしています。 ▪ しょっちゅう話している技術領域  Angular/Azure AD/Microsoft Graph/Azure/msal/GitHub/Azure DevOps ▪ Twitter: @DevTakas 大川 貴志(Takashi Okawa) Microsoft MVP for Office Development

M365VIRTUALMARATHON.COM #M365VM ▪ msalについての理解を深めてもらって自分の開発に役立ててもらう！ 1. AADの認証の仕組み 2. msalについて  補足「PKCE」 3. msalを利用しているライブラリを見てみる 4. msal update in 2021-2022 5. まとめ おしながき

M365VIRTUALMARATHON.COM #M365VM 1. AAD認証の仕組み

M365VIRTUALMARATHON.COM #M365VM 1. AAD認証の仕組み -そもそもAADアプリケーションの認証の仕組み 去年のM365 VMのすこしおさらい

M365VIRTUALMARATHON.COM #M365VM ▪ 承認コード ▪ クライアントの資格情報 ▪ デバイスコード ▪ 暗黙的な許可 ▪ On-Behalf-Of ▪ ユーザー名/パスワード ▪ 統合Windows認証 1. AAD認証の仕組み -そもそもAADアプリケーションの認証の仕組み

M365VIRTUALMARATHON.COM #M365VM ▪ Azure ADアプリケーションを介して認証を行うことが可能 ▪ M365管理ユーザーやパスワードなどで自前のアプリケーションや システムの保護、コンポーネントの機能拡張が行える ▪ M365データを取り扱うときの必須事項 ▪ 自前のWeb APIも保護できるよ！ 1. AAD認証の仕組み - AAD認証でなにができるのか

M365VIRTUALMARATHON.COM #M365VM ▪ アプリケーションID ▪ (テナントID) ▪ リダイレクトURI ▪ スコープ 1. AAD認証の仕組み - Azure ADアプリケーションと代表的な項目(1)

M365VIRTUALMARATHON.COM #M365VM ▪ アプリケーションID  認証で使用するAzure AD アプリケーションのID ▪ (テナントID)  認証を行うテナントのID ▪ リダイレクトURI  M365の認証後返却されるURL ▪ スコープ  この認証後アクセスしたいリソース 1. AAD認証の仕組み - Azure ADアプリケーションと代表的な項目(1)

M365VIRTUALMARATHON.COM #M365VM 1. AAD認証の仕組み -認証フロー(暗黙的な許可フロー) https://docs.microsoft.com/ja-jp/azure/active-directory/develop/v2-oauth2-implicit-grant-flow より抜粋

M365VIRTUALMARATHON.COM #M365VM 1. AAD認証の仕組み -認証フロー(認証コード付与) https://docs.microsoft.com/ja-jp/azure/active-directory/develop/v2-oauth2-auth-code-flow より抜粋

M365VIRTUALMARATHON.COM #M365VM ▪ URLのやり取りだけでアクセストークンを取得してみる 1. AAD認証の仕組み - Demo

M365VIRTUALMARATHON.COM #M365VM 2. msalについて

M365VIRTUALMARATHON.COM #M365VM Microsoft365開発は認証が肝

M365VIRTUALMARATHON.COM #M365VM とはいえ

M365VIRTUALMARATHON.COM #M365VM ▪ 認証フローをすべてちゃんと実装しようとすると超手間  それぞれの工程でどのような情報が必要か抑える必要あり ▪ 後述するcode_chllengeなどセキュリティ上必要な対応もあるが「なぜ」や 「どのように」も把握した上で実装する必要あり ▪ リダイレクトを複数回挟むことになるのでステートの管理も面倒くさい ▪ RFC6749の仕様とにらめっこしたくないな！ ▪ 面倒くさい&気にしなければいけないことが多い  =ライブラリに任せよう  ただ仕様とにらめっこしなきゃいけないときもある…😢 2. msalについて - ライブラリを使いたい動機

M365VIRTUALMARATHON.COM #M365VM 2. msalについて - msalシリーズ

M365VIRTUALMARATHON.COM #M365VM ▪ msal.js  元祖(?)msal。msal-coreという名前でコード上は管理されている。  暗黙的な許可フローでやり取りするときに利用する  現在メンテモード＋後述するPKCEの問題などもあり、非推奨のライブラリ  稀にこれしか組み込まれていないライブラリがある  V1エンドポイントで使用するならこれ 2. msalについて - msalシリーズ

M365VIRTUALMARATHON.COM #M365VM ▪ @azure/msal-browser  msal2とも呼ばれる  おそらく一番よくお世話になるであろうライブラリ  frameworkに最適な形にしたAngularやReact用の派生ライブラリあり  @azure/msal-angular など  V2エンドポイントで使用するならこれ  PKCE対応しているライブラリ 2. msalについて - msalシリーズ

M365VIRTUALMARATHON.COM #M365VM ▪ @azure/msal-node  node.js上で使用する場合のライブラリ  シークレット認証などバックエンドで利用されるような認証フローの機能を有する  今回は割愛 2. msalについて - msalシリーズ

M365VIRTUALMARATHON.COM #M365VM 補足 PKCE

M365VIRTUALMARATHON.COM #M365VM ▪ Proof Key for Code Exchange  認可コード横取り攻撃 ▪ 暗黙的な許可フロー(Implicit Flow)で上記攻撃が可能  認可コードを横取りすることで認証なしにアクセストークンを取得し利用する 補足PKCE - PKCEとは

M365VIRTUALMARATHON.COM #M365VM 補足PKCE - PKCEの攻撃について 認可コード合ってるヨシ!

M365VIRTUALMARATHON.COM #M365VM 補足PKCE - PKCEの攻撃の防ぎ方(1) ■code_challenge作成 code_verifierをcode_challenge_method(だいたいsha256)でハッシュ変換 code_challengeとcode_challenge_methodを通信に付与 code_challengeとcode_challenge_methodを保存 code_verifierを通信に付与 ■code_challenge突合 送信されたcode_verifierを保存したcode_challenge_methodでハッシュ変換 その後保存したcode_challengeと相違がないか確認される

M365VIRTUALMARATHON.COM #M365VM msal.jsについて - msalの使いかた(AADアプリケーションの設定) code_challengeとcode_challenge_methodを通信に付与 code_verifierはNative Appで都度生成されるためインスタンスの中にしか存在しない code_verifierがないよ…

M365VIRTUALMARATHON.COM #M365VM それを踏まえてAzure ADアプリケーションの作成を見てみる (msalの話に戻ります)

M365VIRTUALMARATHON.COM #M365VM 2. msalについて - msalの使いかた(AADアプリケーションの設定) ▪ 「認証の設定」がライブラリによって異なる msal.js msal-browser

M365VIRTUALMARATHON.COM #M365VM 認証がどれだけ簡単になるか見てみよう

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

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

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

M365VIRTUALMARATHON.COM #M365VM 2. msalについて - msalの使いかた(アクセストークンの取得) ▪ Access Tokenを取得する  acquireTokenRedirect  acquireTokenPopup  acquireTokenSilent

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

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

M365VIRTUALMARATHON.COM #M365VM 2. msal.jsについて - Demo ▪ msal.jsを使ってみる ▪ @azure/msal-browserを使ってみる  PKCEの対策を確認する

M365VIRTUALMARATHON.COM #M365VM msalの使い方を知っていると何が嬉しいの🤔

M365VIRTUALMARATHON.COM #M365VM 3. msalを利用しているライブラリを見てみる

M365VIRTUALMARATHON.COM #M365VM 3. msalを利用しているライブラリを見てみる - Microsoft Graph Client(msgraph-sdk-javascript) ▪ サーバー用クライアント用認証ライブラリが組み込まれている  @azure/identity  @azure/msal-browser

M365VIRTUALMARATHON.COM #M365VM 3. msalを利用しているライブラリを見てみる - Microsoft Graph Tool Kit ▪ 認証プロバイダとして複数のプロバイダが用意されている  その中にMsalProvider/Msal2Providerあり

M365VIRTUALMARATHON.COM #M365VM 3. msalを利用しているライブラリを見てみる - @microsoft/teamsfx ▪ msGraphAuthProvider  @microsoft/microsoft-graph-client が使用されている ▪ TeamsUserCredential  msal-browserが使用されている

M365VIRTUALMARATHON.COM #M365VM 3. msalを利用しているライブラリを見てみる -ライブラリがmsalを利用していることがわかると何が嬉しいのか？ ▪ デモ

M365VIRTUALMARATHON.COM #M365VM 4. msal update in 2021-2022

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

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  複数のアカウントセッションがない場合にしか使えないという当然と言えば当然な条件はある

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等一部のフロー

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のアプリケーション作るときも有用かもしれない？

M365VIRTUALMARATHON.COM #M365VM 4. msal update in 2021-2022 - msalの開発計画について ▪ msalのマイルストーン  https://github.com/AzureAD/microsoft-authentication-library-for-js/projects/7  これから追加されるであろう機能がなんとなくわかる

M365VIRTUALMARATHON.COM #M365VM 5. まとめ

M365VIRTUALMARATHON.COM #M365VM ▪ 認証は複雑なフローで実現されている ▪ msalは複雑な認証処理をラップしてくれる ▪ いくつかの派生ライブラリがあるから選定に注意  エンドポイントのバージョンが変わったりする ▪ 他のライブラリでmsalが使用されているケースも多い  なかで使用されているmsalによって設定内容が変わるので注意  msalの使い方を覚えておくことで有用なケースも多い ▪ M365の情報を取り扱う上で認証は避けて通れない要素  認証を楽に実装できるライブラリの使い方を抑えておいて開発で楽しよう まとめ

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/ 参考

MICROSOFT 365 VIRTUAL MARATHON 2022 MAY, 4. – 6. 2022 https://forms.office.com/r/qCXhcZZUgU スピーカーおよびイベント への感想やご意見 アンケートにご協力ください