.Netラボ6月のLTで発表した資料です

1. msal.jsを使う
2019.6 .Netラボ

2. 誰？
@DevTakas
Angular / Azure / .Net Core / Azure DevOps

3. 誰？
ブログやってます
http://takasdev.hatenablog.com/
「はまったりひらめいたり…とか…」

4. 認証
ぶっちゃけめんどい

5. めんどい認証フロー

6. 認証のフローはシンプルだがややこしい
• エンドポイントにリクエスト投げてトークン取得。ほーん。
• しかし案外やることや求められることが多い
• クライアントIDを指定してください！とか
• リダイレクトURLに返却されるのでCallbackで引っ掛けて！とか
• 何やればいいのか今さら1から調べて実装する？
• Azure ADを使って認証を行いたい？
• MSから提供されているライブラリがあるので使いましょう！

7. ライブラリ
• adal
• ADのv1エンドポイント用認証ライブラリ
• 職場または学校アカウントを使用した認証機能が提供される
• msal
• 現在の主戦場はAzure AD B2C
• ADのv2エンドポイントでも使用できる認証ライブラリ
• https://docs.microsoft.com/ja-jp/azure/active-directory/develop/sample-v2-code
• 個人マイクロソフトアカウントの認証も可能
• Graph使いたかったらこっちのほうがとっつきやすいかも？
• .Net / JavaScriptのライブラリあり
• これからはmsalが主役になってくる！はず・・・
• ADALのGitHub最終更新2018年だし・・・

8. ライブラリ
• ADALのエンドポイントをv2にしてトークン取るのはブログで
書いたので見てみてください（ダイマ
• http://takasdev.hatenablog.com/entry/2019/06/16/223103

9. msal.jsで主に必要な情報
• ClientId
• AzureADアプリケーションのアプリケーションID
• Scopes
• アクセス許可 – Azure AD のアプリケーションで設定できる
• Authority
• サインインオーディエンス
• https://login.microsoft.com/common or .com/<TENANT ID>
• 指定することもあるしないこともある
• マルチテナント対応していない場合はテナントID指定URL
• B2Cの場合も指定したほうが良い場合が多い

10. msal.jsのログインフロー
1. UserAgentApplicationインスタンス生成
• msalのコンフィグ情報を食わせた状態でインスタンスを生成
• clientId(必須) / authority / scopes …
2. ログイン
• loginPopup
• ダイアログ内でログイン処理が行われる
• 認証結果はPromiseで返却される
• SPAアプリケーションはこっちかな？
• LoginRedirect
• ページ遷移してログイン処理が行われる
• UserAgentApplicationのHandleRedirectCallBackで引っ掛ける

11. msal.jsのログインフロー
3. acquireToken
• アクセストークンの取得処理
• Scopesを指定して問題なければトークンが取得できる
• 指定したScopesがAD Appで使用できない = 許可されていない
• MS Graphのスコープは下記参照
• https://docs.microsoft.com/en-us/graph/permissions-reference

12. msal.jsで取得されたトークン
• https://jwt.io で中身を見てみる

13. まとめ
• ADの認証を簡易に制御/実装をするためのライブラリがある！
• ADAL
• MSAL
• ライブラリを使って認証アプリケーションをサクッと作ろう！