第111回 雲勉【オンライン】Azure AD と Static Web Apps でWebサイトに認証機能を導入する

下記、勉強会での資料です。
https://youtu.be/AEIqiNPe8i8

Transcript

1. 第111回 雲勉【オンライン】 Azure AD と Static Web Apps で Web サイトに認証機能を導入する 平田 健士郎
2. アジェンダ • ⾃⼰紹介 • 注意点 • 話すこと/話さないこと • Azure AD と Static Web Apps で Web サイトに認証を導⼊するケース • デモ • デモ環境の作成⽅法ご説明 • まとめ
3. ⾃⼰紹介
4. ⾃⼰紹介 平⽥ 健⼠郎 (ひらた けんじろう) ▪ クラウドインテグレーション事業部 構築第⼋セクション ▪ 業務内容はクラウドインフラの設計/構築/運⽤ ▪ アイレット⼊社約1年半 ▪ 前職で MSP を 2 年を経験してそこで初めてクラウドに触れる ▪ 業務では AWS 中⼼だが Azure 案件の経験もあり ←奥さんに描いてもらった似顔絵
5. 注意点
6. 注意点① Azure AD (Azure Active Directory) は Microsoft Entra ID に 名称が変更される予定ですが、この登壇時点ではまだ名称変更されて いないため、この登壇では「Azure AD」と名称を統⼀します。 https://www.microsoft.com/ja-jp/security/business/identity-access/azure-active-directory
7. 注意点② 当資料内の動画、画像で実際の Azure のリソースが表⽰されます が、動画公開時は全て削除しております。 ご了承ください。
8. 話すこと/話さないこと
9. 話すこと •Static Web Apps と Azure AD の簡単な説明 •Static Web Apps での静的 Web サイトの作成⽅法 •Azure AD の認証を Static Web Apps に組み込む⽅法 •特定の Azure AD テナントのみ認証を許可する⽅法 話さないこと •Azure の基礎的な操作⽅法 •OpenID Connect 等の認証プロトコルの深掘りした話
10. Azure AD と Static Web Apps で Web サイトに認証を導⼊するケース
11. こんなケースがあったとします 社内向けに簡単な Web サイトを作るん だけど、 社内のユーザーだけが認証されるよう にして外部から見えないようにしたい なー
12. こんなケースがあったとします Web サイトを稼働させている サーバー内で専用の認証機能を導入し てユーザーを作る？ [面倒くさい] Web サイト専用にユーザーを作成すること になるため管理が増えて煩雑化 👎
13. こんなケースがあったとします 社内で利用している Azure AD の認証 を使い回す形で Web サイトに組み込 めたら楽なのでは！？ [楽！] 既存の Azure AD で SSO ができるのでユー ザー管理の手間が増えないため楽 👍
14. Static Web Apps で作成した 静的 Web サイトに AzureAD で認証を導入します！
15. Static Web Apps とは 静的 Web サイトのホスティングサービス • 手軽に 静的 Web サイトを作成できる (無料プランもある) • サーバーレス • GitHub Actions 等の CI/CD ワークフロー
16. Azure AD とは クラウドベースの ID およびアクセス管理サービス クラウドサービスやオンプレミスに認証・認可を提供 認証 : 身元を確認すること 認可 : 権限を与えること シングルサインオン (SSO) や多要素認証の導入などができる
17. デモ
18. イメージ
19. イメージ Static Web Apps の URL に対して ブラウザからアクセスする
20. イメージ 認証が要求されるため サインインする
21. イメージ サインインできれば Static Web Apps のコンテンツが表示される
22. 実際の様子を動画でお見せします！
23. 動画については YouTube をご覧ください 上記の QR コードで登壇動画の該当の時間にジャンプできます
24. こんな感じです！
25. さらに発展した使い方の 例を紹介します
26. 発展系の例 (今回はこれは作りません) (例) 今話題の ChatGPT を Azure 内で利用できる 「Azure OpenAI Service」を 利用するサービスを社内の人 のみに公開する
27. 発展系の例 (今回はこれは作りません) (例) 今話題の ChatGPT を Azure 内で利用できる 「Azure OpenAI Service」を 利用するサービスを社内の人 のみに公開する
28. というわけで 先ほど動画でお見せした 環境の作り方をご説明します
29. デモ環境の作成⽅法ご説明
30. 説明する環境の構成図
31. ソースコードの作成 clphirata-kumoben-azuread-staticapp/ ├ index.html ├ README.md └ styles.css
32. ソースコードの作成 clphirata-kumoben-azuread-staticapp/ ├ index.html ├ README.md └ styles.css
33. ソースコードの作成 clphirata-kumoben-azuread-staticapp/ ├ index.html ├ README.md └ styles.css
34. ソースコードの作成 clphirata-kumoben-azuread-staticapp/ ├ index.html ├ README.md └ styles.css
35. GitHub リポジトリ作成 リポジトリ名 : clphirata-kumoben-azuread-staticapp
36. GitHub リポジトリにコードを push clphirata-kumoben-azuread-staticapp/ ├ index.html ├ README.md └ styles.css
37. Static Web Apps の作成 • Static Web Apps 名に「clphirata-kumoben-staticapp」を指定 • Standard プランを選択 (後で説明) • ソースとなる GitHub リポジトリを指定 • Static Web Apps 作成
38. Static Web Apps の作成 • Static Web Apps 名に「clphirata-kumoben-staticapp」を指定 • Standard プランを選択 (後で説明) • ソースとなる GitHub リポジトリを指定 • Static Web Apps 作成 自動デプロイされてコンテンツが表示できるようになる • Static Web Apps を作成したら GitHub リポジトリからソースを取得してデプロイ • コンテンツ表示を確認
39. Static Web Apps の作成 • Static Web Apps 名に「clphirata-kumoben-staticapp」を指定 • Standard プランを選択 (後で説明) • ソースとなる GitHub リポジトリを指定 • Static Web Apps 作成 動画で様子をお見せします！ 自動デプロイされてコンテンツが表示できるようになる • Static Web Apps を作成したら GitHub リポジトリからソースを取得してデプロイ • コンテンツ表示を確認
40. Static Web Apps の作成 動画については YouTube をご覧ください 上記の QR コードで登壇動画の該当の時間にジャンプできます
41. GitHub Actions による 自動デプロイ Static Web Apps を作成して ソースに GitHub リポジトリを指定 することで GitHub Actions という 機能を使って 自動デプロイ を実現 できる
42. GitHub Actions による 自動デプロイ 同時に GitHub のソースコードに GitHub Actions 設定用の yuml ファイルが作成される
43. GitHub Actions による 自動デプロイ 同時に GitHub のソースコードに GitHub Actions 設定用の yuml ファイルが作成される 中身はこんな感じ → (今回はこの部分はメインではない ため詳細は割愛します)
44. GitHub Actions による 自動デプロイ GitHub のソースコードに GitHub Actions 設定用の yuml ファイルが作成されたので、 ローカルをリモートに合わせるため git pull を行います。
45. ここまで作れました
46. ここから Web サイトの認証に 既存の Azure AD テナントを使うため の設定を行います。
47. ここから Web サイトの認証に 既存の Azure AD テナントを使うため の設定を行います。 が、その前に
48. Static Web Apps では 既存の認証プロバイダーを使うための 機能が デフォルトで備わっています
49. Static Web Apps で既存の認証を使う機 能 Static Web Apps には作成段階で何もしなくても デフォルトで既存の認証プロバイダーを使う機能が備わってい ます。
50. 作成時点で 3 つの認証プロバイダーが設定されています 認証プロバイダー Azure AD GitHub Twitter Static Web Apps で既存の認証を使う機 能
51. それぞれ専用のログイン URL が用意されています 認証プロバイダー ログイン URL Azure AD https://**********.azurestaticapps.net/.auth/login/aad GitHub https://**********.azurestaticapps.net/.auth/login/github Twitter https://**********.azurestaticapps.net/.auth/login/twitter 動画で様子をお見せします！ Static Web Apps で既存の認証を使う機 能
52. Static Web Apps で既存の認証を使う機 能 動画については YouTube をご覧ください 上記の QR コードで登壇動画の該当の時間にジャンプできます
53. え、じゃあこれで やりたいことは実現できたの？
54. 実はそうではありません
55. Static Web Apps の認証機能 ↓ 先ほどの動画でサインインしたアカウント
56. Static Web Apps の認証機能 ←この Azure アカウントの Azure AD テナントのユーザーではない ↓ 先ほどの動画でサインインしたアカウント
57. Static Web Apps の認証機能 Static Web Apps の デフォルトの認証機能だけでは この世のどこかの Azure AD のユーザー であれば誰でも認証できてしまう状態
58. 最初にお見せした要望の話 社内向けに簡単な Web サイトを作るん だけど、 社内のユーザーだけが認証されるよう にして外部から見えないようにしたい なー
59. 社内向けに簡単な Web サイトを作るん だけど、 社内のユーザーだけが認証されるよう にして外部から見えないようにしたい なー 最初にお見せした要望の話 特定の Azure AD テナントのみ 認証を許可したい
60. ここからは 特定の Azure AD テナントのみ 認証を許可するための設定をします
61. Azure AD でアプリの登録 (新規登録) 「アプリの登録」 Azure AD と他のリソースを連携するための設定箇所 ここで特定の Azure AD テナントに 今回作成した Static Web Apps を登録することで 特定の Azure AD テナントのみ認証を許可する設定をします。
62. Azure AD でアプリの登録 (新規登録)
63. Azure AD でアプリの登録 (新規登録) 指定した Azure AD テナントで Static Web Apps が認証できるように登録する
64. Azure AD でアプリの登録 (新規登録) 指定した Azure AD テナントで Static Web Apps が認証できるように登録する 動画で様子をお見せします！
65. Azure AD でアプリの登録 (新規登録) 動画については YouTube をご覧ください 上記の QR コードで登壇動画の該当の時間にジャンプできます
66. Azure AD でアプリの登録 (認証) 「アプリの登録」で登録したアプリにて 認証 の設定を行います。 ここで設定する項目は以下です ・リダイレクト URI ・ログアウト URL ・承認エンドポイントによって発行してほしいトークン->ID トークン
67. Azure AD でアプリの登録 (認証) 「アプリの登録」で登録したアプリにて認証の設定を行います。 ここで設定する項目は以下です。 ・リダイレクト URI ・ログアウト URL ・承認エンドポイントによって発行してほしいトークン->ID トークン これらについて説明します
68. ・リダイレクト URI ・ログアウト URL ・承認エンドポイントによって発行してほしいトークン->ID トークン これらは OpenID Connect という 認証プロトコルで使われる要素です
69. ・リダイレクト URI ・ログアウト URL ・承認エンドポイントによって発行してほしいトークン->ID トークン これらは OpenID Connect という 認証プロトコルで使われる要素です Static Web Apps で特定の Azure AD テナントでの認証を許可 するには「カスタム認証」という設定が必要なのですが、 このカスタム認証で OpenID Connect という認証プロトコルに 関する設定箇所があります。
70. OpenID Connect の認証 https://learn.microsoft.com/ja-jp/azure/active-directory/architecture/auth-oidc Azure Active Directory を使用した OpenID Connect 認証
71. ・リダイレクト URI https://learn.microsoft.com/ja-jp/azure/active-directory/develop/reply-url リダイレクト URI、すなわち応答 URL は、アプリが正しく承認され、 認証コードまたはアクセス トークンが付与されると、承認サーバーが ユーザーを送り出す場所です。 承認サーバーは、リダイレクト URI に このコードまたはトークンを送信するため、アプリ登録プロセスの一環 として正しい場所を登録することが重要です。
72. ・リダイレクト URI https://learn.microsoft.com/ja-jp/azure/active-directory/develop/reply-url リダイレクト URI、すなわち応答 URL は、アプリが正しく承認され、 認証コードまたはアクセス トークンが付与されると、承認サーバーが ユーザーを送り出す場所です。 承認サーバーは、リダイレクト URI に このコードまたはトークンを送信するため、アプリ登録プロセスの一環 として正しい場所を登録することが重要です。
73. ・リダイレクト URI https://learn.microsoft.com/ja-jp/azure/active-directory/develop/reply-url リダイレクト URI、すなわち応答 URL は、アプリが正しく承認され、 認証コードまたはアクセス トークンが付与されると、承認サーバーが ユーザーを送り出す場所です。 承認サーバーは、リダイレクト URI に このコードまたはトークンを送信するため、アプリ登録プロセスの一環 として正しい場所を登録することが重要です。
74. ・ログアウト URL https://learn.microsoft.com/ja-jp/azure/active-directory/develop/scenario-web-app-sign-user- sign-in?tabs=aspnetcore#sign-out サインアウトするには、Web アプリによってユーザーが Microsoft ID プラットフォーム logout エンドポイントにリダイレクトされる必要も あります。 Web アプリによってユーザーが logout エンドポイントにリダイレクト されると、このエンドポイントでは、ユーザーのセッションがブラウザ ーから消去されます。
75. ・リダイレクト URI ・ログアウト URL Static Web Apps では上記がデフォルトで用意されています ※ Azure AD の場合 リダイレクト URI https://***********.azurestaticapps.net/.auth/login/aad/callback ログアウト URL https://***********.azurestaticapps.net/.auth/logout/aad/callback
76. ・承認エンドポイントによって発行してほしいトークン->ID トークン https://learn.microsoft.com/ja-jp/azure/active-directory/develop/id-tokens ID トークンは承認サーバーによって発行され、ユーザーについての情報 を伝えるクレームを含んでいます。 これらは、アクセス トークンの代 わりに、またはアクセス トークンと共に送信できます。 ID トークンに 含まれる情報により、ユーザーが主張するとおりの人物であることをク ライアントで確認できます。
77. ・承認エンドポイントによって発行してほしいトークン->ID トークン https://learn.microsoft.com/ja-jp/azure/active-directory/develop/id-tokens ID トークンは承認サーバーによって発行され、ユーザーについての情報 を伝えるクレームを含んでいます。 これらは、アクセス トークンの代 わりに、またはアクセス トークンと共に送信できます。 ID トークンに 含まれる情報により、ユーザーが主張するとおりの人物であることをク ライアントで確認できます。 ID トークンが必要だから 発行してね、 という設定が必要
78. Azure AD でアプリの登録 (認証) というわけで以下の設定が必要です ・リダイレクト URI ・ログアウト URL ・承認エンドポイントによって発行してほしいトークン->ID トークン 動画で様子をお見せします！
79. Azure AD でアプリの登録 (認証) 動画については YouTube をご覧ください 上記の QR コードで登壇動画の該当の時間にジャンプできます
80. Azure AD でアプリの登録 (シークレッ ト) アプリ (本件では Static Web Apps) が Azure AD と接続するための資格情報とし てクライアントシークレットを発行します。 ① ②
81. Azure AD でアプリの登録 (シークレッ ト) アプリ (本件では Static Web Apps) が Azure AD と接続するための資格情報とし てクライアントシークレットを発行します。
82. Azure AD でアプリの登録 (シークレッ ト) アプリ (本件では Static Web Apps) が Azure AD と接続するための資格情報とし てクライアントシークレットを発行します。
83. Azure AD でアプリの登録 (その他の情 報) Static Web Apps に設定が必要な以下の値を取得します。 ・アプリケーション (クライアント) ID ・ディレクトリ (テナント) ID ①
84. Azure AD 側の設定は済んだため Static Web Apps の設定に戻ります！
85. Static Web Apps で変数の保存 Static Web Apps でクライアントID と シークレットの値を変数として保存をしま す 値は暗号化して保存されます https://learn.microsoft.com/ja-jp/azure/static-web-apps/application-settings
86. Static Web Apps で変数の保存 設定箇所
87. Static Web Apps で変数の保存 クライアント ID 変数設定
88. Static Web Apps で変数の保存 シークレット値 変数設定
89. Static Web Apps で変数の保存 Save で保存
90. Static Web Apps のアプリ構成ファイルを作成 Static Web Apps のアプリ構成ファイル staticwebapp.config.json https://learn.microsoft.com/ja-jp/azure/static-web-apps/configuration
91. Static Web Apps のアプリ構成ファイルを作成 Static Web Apps のアプリ構成ファイル staticwebapp.config.json https://learn.microsoft.com/ja-jp/azure/static-web-apps/configuration 今回使う構成ファイルを元に 必要な箇所だけご説明します
92. Static Web Apps のアプリ構成ファイルを作成 { "auth": { "identityProviders": { "azureActiveDirectory": { "registration": { "openIdIssuer": "https://login.microsoftonline.com/[テナント ID]/v2.0", "clientIdSettingName": "AZURE_CLIENT_ID", "clientSecretSettingName": "AZURE_CLIENT_SECRET" } } } }, "routes": [ { "route": "/*", "allowedRoles": [ "authenticated" ] } ], "responseOverrides": { "401": { "statusCode": 302, "redirect": "/.auth/login/aad" } } } 認証系の設定
93. Static Web Apps のアプリ構成ファイルを作成 { "auth": { "identityProviders": { "azureActiveDirectory": { "registration": { "openIdIssuer": "https://login.microsoftonline.com/[テナント ID]/v2.0", "clientIdSettingName": "AZURE_CLIENT_ID", "clientSecretSettingName": "AZURE_CLIENT_SECRET" } } } }, "routes": [ { "route": "/*", "allowedRoles": [ "authenticated" ] } ], "responseOverrides": { "401": { "statusCode": 302, "redirect": "/.auth/login/aad" } } } 認証系の設定 ID プロバイダーとして AzureAD を指定
94. Static Web Apps のアプリ構成ファイルを作成 { "auth": { "identityProviders": { "azureActiveDirectory": { "registration": { "openIdIssuer": "https://login.microsoftonline.com/[テナント ID]/v2.0", "clientIdSettingName": "AZURE_CLIENT_ID", "clientSecretSettingName": "AZURE_CLIENT_SECRET" } } } }, "routes": [ { "route": "/*", "allowedRoles": [ "authenticated" ] } ], "responseOverrides": { "401": { "statusCode": 302, "redirect": "/.auth/login/aad" } } } 認証系の設定 ID プロバイダーとして AzureAD を指定 認証の設定 openIdIssuer : OpenID Connect 発行者 URI
95. Static Web Apps のアプリ構成ファイルを作成 { "auth": { "identityProviders": { "azureActiveDirectory": { "registration": { "openIdIssuer": "https://login.microsoftonline.com/[テナント ID]/v2.0", "clientIdSettingName": "AZURE_CLIENT_ID", "clientSecretSettingName": "AZURE_CLIENT_SECRET" } } } }, "routes": [ { "route": "/*", "allowedRoles": [ "authenticated" ] } ], "responseOverrides": { "401": { "statusCode": 302, "redirect": "/.auth/login/aad" } } } 認証系の設定 ID プロバイダーとして AzureAD を指定 認証の設定 clientIdSettingName : 認証情報 clientSecretSettingName : 認証情報
96. Static Web Apps のアプリ構成ファイルを作成 { "auth": { "identityProviders": { "azureActiveDirectory": { "registration": { "openIdIssuer": "https://login.microsoftonline.com/[テナント ID]/v2.0", "clientIdSettingName": "AZURE_CLIENT_ID", "clientSecretSettingName": "AZURE_CLIENT_SECRET" } } } }, "routes": [ { "route": "/*", "allowedRoles": [ "authenticated" ] } ], "responseOverrides": { "401": { "statusCode": 302, "redirect": "/.auth/login/aad" } } } ルーティングの設定 /* に対して適用する authenticated (認証済み) の場合のみ allowedRoles (ルートへのアク セスを許可する
97. Static Web Apps のアプリ構成ファイルを作成 { "auth": { "identityProviders": { "azureActiveDirectory": { "registration": { "openIdIssuer": "https://login.microsoftonline.com/[テナント ID]/v2.0", "clientIdSettingName": "AZURE_CLIENT_ID", "clientSecretSettingName": "AZURE_CLIENT_SECRET" } } } }, "routes": [ { "route": "/*", "allowedRoles": [ "authenticated" ] } ], "responseOverrides": { "401": { "statusCode": 302, "redirect": "/.auth/login/aad" } } } サーバーからエラー コードが返される場合のカスタム応答を設定 401：Unauthorized コードの時に 302 : Temporary Redirect コードにオーバーライドして "/.auth/login/aad" にリダイレクトする
98. Static Web Apps のアプリ構成ファイルを作成 作成した構成ファイルを GitHub に push したら GitHub Actions により Static Web Apps にデプロイされることにより 意図した設定 (特定の Azure AD のみ認証可能な状態) が反映されます 動画で様子をお見せします！(これが最後)
99. 動画については YouTube をご覧ください 上記の QR コードで登壇動画の該当の時間にジャンプできます
100. 説明した環境の構成図 この構成の作り方についてご説明させていただきました
101. まとめ
102. まとめ • AzureAD でアプリケーションへの認証と認可を提供できます
103. まとめ • AzureAD でアプリケーションへの認証と認可を提供できます • Static Web Apps は既存の認証を利用する機能がデフォルトで が実装されています
104. まとめ • AzureAD でアプリケーションへの認証と認可を提供できます • Static Web Apps は既存の認証を利用する機能がデフォルトで が実装されています • 特定の AzureAD テナントで認証を許可する設定が可能です
105. まとめ • AzureAD でアプリケーションへの認証と認可を提供できます • Static Web Apps は既存の認証を利用する機能がデフォルトで が実装されています • 特定の AzureAD テナントで認証を許可する設定が可能です • これらによって簡単に社内向け Web サイトを作成して認証を組 み込むことが可能です
106. ご清聴ありがとうございました