#author("2020-08-15T13:32:52+00:00","","") #mynavi(Azureメモ) #setlinebreak(on); * 概要 [#dadf4db4] #html(<div class="pl10">) Azure に配置した Grafana でAD(Active Directory)認証を行う手順を記載する。 尚、当記事では Grafana 自体は App Service で作成する。 #html(</div>) * 目次 [#g9c9f576] #contents - 関連 -- [[Azureメモ]] - 参考 -- [[Microsoft ID プラットフォーム を使用したアプリのサインイン フロー>https://docs.microsoft.com/ja-jp/azure/active-directory/develop/app-sign-in-flow]] -- [[Microsoft ID プラットフォームを使用した認証と承認>https://docs.microsoft.com/ja-jp/azure/active-directory/develop/authentication-vs-authorization#authentication-and-authorization-using-microsoft-identity-platform]] -- [[Microsoft ID プラットフォームと OAuth 2.0 認証コード フロー>https://docs.microsoft.com/ja-jp/azure/active-directory/develop/v2-oauth2-auth-code-flow]] -- [[認証コード フローと暗黙的なフロー(Web Apps)>https://docs.microsoft.com/ja-jp/azure/active-directory/develop/v2-app-types#web-apps]] -- [[Azure AD OAuth2 authentication>https://grafana.com/docs/grafana/latest/auth/azuread/]] -- [[Microsoft ID プラットフォームと暗黙的な許可のフロー (暗黙的な許可フローの有効有効化)>https://docs.microsoft.com/ja-jp/azure/active-directory/develop/v2-oauth2-implicit-grant-flow#send-the-sign-in-request]] -- [[Azure Active Directory を使ってアプリケーションに対するグループ要求を構成する>https://docs.microsoft.com/ja-jp/azure/active-directory/hybrid/how-to-connect-fed-group-claims#configure-the-azure-ad-application-registration-for-group-attributes]] -- [[アプリケーションにアプリ ロールを追加してトークンで受け取る>https://docs.microsoft.com/ja-jp/azure/active-directory/develop/howto-add-app-roles-in-azure-ad-apps]] * ADアプリ 及び シークレットの作成 [#m5cf0c30] #html(<div class="pl10">) シークレットの作成は、App Service アプリ(Grafana)の作成後でも可能だが、 結局は再デプロイが必要になるので(※)、先に ADアプリ 及び シークレットは別アプリとして作成しておく。 ※OAuth用の設定値が必要になるので。 #html(){{ <style> .images div { vertical-align: top; margin-right: 20px; } .images img { border: 1px solid #333; } </style> }} #html(<div class="images">) #html(<div class="ib">) [Active Directory] を選択 &ref(create_secret1-1.png,nolink); #html(</div><div class="ib">) [アプリの登録] を選択 &ref(create_secret1-2.png,nolink); #html(</div><div class="ib">) [新規登録] を選択 &ref(create_secret1-3.png,nolink); #html(</div><div class="ib">) アプリケーション名を入力して登録 &ref(create_secret1-4.png,nolink); #html(</div><div class="ib">) クライアントID 及び テナントID を確認しておく &ref(create_secret1-5.png,nolink); #html(</div><div class="ib">) [証明書とシークレット] → [新しいクライアントシークレット] を選択 &ref(create_secret1-6.png,nolink); #html(</div><div class="ib">) 説明を入力して [追加] &ref(create_secret1-7.png,nolink); #html(</div><div class="ib">) 登録したクライアントシークレットを確認しておく。(追加直後しか確認できないので注意) &ref(create_secret1-8.png,nolink); #html(</div><div class="ib">) [認証] → [プラットフォームの追加] &ref(create_secret1-9.png,nolink); #html(</div><div class="">) #html(<div class="ib">) リダイレクトURI 等を登録する。 &ref(create_secret1-10.png,nolink); #html(</div><div class="ib">) | 項目 | 設定値 |h | リダイレクトURI | https://Grafanaアプリケーション名.azurewebsites.net/login/azuread | | ログアウトURL| https://Grafanaアプリケーション名.azurewebsites.net/logout | | 暗黙的な許可フロー | シークレットを 他の Service App と共用する場合は2つともチェックを入れておく | ※ Grafanaアプリケーション名は 後述の 0_env.sh の $webappName と同じもの。 #html(</div>) #html(</div>) #html(</div>) ** アプリケーションロールの作成 [#qfb72dfa] #html(<div class="pl10">) 左側メニューの [マニフェスト] から、登録したアプリケーションのマニフェストを以下の通り更新する(アプリケーションロールの追加) ※ユニークIDは uuidgen 等を使用して3つ生成しておく。 ※ https://grafana.com/docs/grafana/latest/auth/azuread/ #mycode2(){{ : "appRoles": [ { "allowedMemberTypes": [ "User" ], "description": "Grafana Editor Users", "displayName": "Grafana Editor", "id": "ユニークなID", "isEnabled": true, "lang": null, "origin": "Application", "value": "Editor" }, { "allowedMemberTypes": [ "User" ], "description": "Grafana read only Users", "displayName": "Grafana Viewer", "id": "ユニークなID", "isEnabled": true, "lang": null, "origin": "Application", "value": "Viewer" }, { "allowedMemberTypes": [ "User" ], "description": "Grafana admin Users", "displayName": "Grafana Admin", "id": "ユニークなID", "isEnabled": true, "lang": null, "origin": "Application", "value": "Admin" } ], : "groupMembershipClaims": "ApplicationGroup", : }} #html(</div>) #html(</div>) // ADアプリ 及び シークレットの作成 * ユーザ作成 及び ロールの割当 [#f573268d] #html(<div class="pl10">) ** ユーザの作成 [#d6279ac1] #html(<div class="pl10">) [Azure Active Directory] → [ユーザ] から下図の通りユーザを登録。 #html(<div class="ib border">) &ref(create-users.png,nolink); #html(</div>) #html(</div>) ** ロールの割り当て [#jdcb9361] #html(<div class="pl10">) [Azure Active Directory] → [エンタープライズ アプリケーション] から対象のアプリを選択後に [ユーザーとグループ] を選択して、ユーザにアプリケーションロールを割り当てる。 ※デフォルトで Viewer権限 になるので、割り当てるのは Admin と Editor に該当するユーザだけでOK。 #html(<div class="ib border">) &ref(attach_role.png,nolink); #html(</div>) #html(</div>) #html(</div>) * リソースの作成 [#p10153b6] #html(<div class="pl10">) ** ファイル作成 [#r711498e] #html(<div class="pl10">) シェルの内容は [[Azure App Service に Grafana をデプロイ]] の内容をベースにしている為、以下には変更点のみ記載する。 #html(){{ <div id="tabs1"> <ul> <li><a href="#tabs1-1">0_env.sh</a></li> <li><a href="#tabs1-2">3_app_resources.sh</a></li> </ul> }} // START tabs1-1 #html(<div id="tabs1-1">) 以下を追加 #mycode2(){{ : : # OAuth用 adClientId="クライアントID" adClientSecret="クライアントシークレット" tenantId="テナントID" }} #html(</div>) // END tabs1-1 // START tabs1-2 #html(<div id="tabs1-2">) 環境変数を追加(GF_AUTH_AZUREAD_XXXXX) #mycode2(){{ : : # App Service 環境変数設定 echo "az webapp config appsettings ( $webappName )" az webapp config appsettings set \ -g $resourceGroup -n $webappName \ --settings "GF_SERVER_ROOT_URL=https://${webappName}.azurewebsites.net" \ "GF_SECURITY_ADMIN_PASSWORD=admin" "GF_DATABASE_TYPE=mysql" "GF_DATABASE_HOST=${vmIpAddress}:3306" \ "GF_DATABASE_NAME=grafana" "GF_DATABASE_USER=grafana" "GF_DATABASE_PASSWORD=grafana" \ "WEBSITES_PORT=3000" \ "GF_AUTH_AZUREAD_NAME=Azure AD" \ "GF_AUTH_AZUREAD_ENABLED=true" \ "GF_AUTH_AZUREAD_CLIENT_ID=${adClientId}" \ "GF_AUTH_AZUREAD_CLIENT_SECRET=${adClientSecret}" \ "GF_AUTH_AZUREAD_AUTH_URL=https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/authorize" \ "GF_AUTH_AZUREAD_TOKEN_URL=https://login.microsoftonline.com/$tenantId}/oauth2/v2.0/token" \ }} #html(</div>) // END tabs1-2 #html(</div>) // END tabs1 #html(<script>$(function() { $("#tabs1").tabs(); });</script>) #html(</div>) ** リソース作成 [#w558c42c] #html(<div class="pl10">) #myterm2(){{ ./1_resources.sh --create }} #html(</div>) #html(</div>) * 動作確認 [#ka88153d] #html(<div class="pl10">) ブラウザから https://Grafanaアプリケーション名.azurewebsites.net にアクセスして動作確認を行う。 #html(<div class="images">) #html(<div class="ib">) 試しに Adminロールを割り当てたユーザでログインしてみる。 &ref(grafana-login1.png,nolink); #html(</div><div class="ib">) &ref(grafana-login2.png,nolink); #html(</div><div class="ib">) &ref(grafana-login3.png,nolink); #html(</div><div class="ib">) &ref(grafana-login4.png,nolink); #html(</div><div class="ib">) Admin 権限でログインされている事を確認。 &ref(grafana-login5.png,nolink); #html(</div>) #html(</div>) #html(</div>) * 補足 [#t61a4455] #html(<div class="pl10">) ** Grafana Auth Proxy によるロールマッピングについて [#uaa1d395] #html(<div class="pl10">) いちいち [Sign in with Microsoft] を押すのが面倒なのでプロキシを噛ませてHTTPヘッダで認証できないかやってみたが、 Grafana の Auth Proxy は ロールマッピングには対応していない模様。 https://grafana.com/docs/grafana/latest/auth/overview/ #html(<div class="ib" style="border:1px solid #333;">) &ref(grafana_rolemapping_etc.png,nolink); #html(</div>) #html(</div>) ** ADグループ単位のロール割り当てについて [#cc9e34ff] #html(<div class="pl10">) Active Directory プランによっては、ADグループ単位でのロール割り当ては出来ない。 ※AZURE AD PREMIUM P2 などが必要。 #html(<div class="ib" style="border:1px solid #333;">) &ref(attach_role_etc1.png,nolink); #html(</div>) #html(</div>) #html(</div>)