GithubHelp home page GithubHelp logo

tk3214-ms / poc-appconf Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 67 KB

Microsoft サーバーレスフローからセキュアに App Configuration パラメータにアクセスする

License: MIT License

JavaScript 100.00%

poc-appconf's Introduction

目次

前提

以下 Power Apps から App Configuration 上のキーバリューにセキュアアクセスするシナリオを実現する為のステップバイステップガイドを提供します。

00

本シナリオで想定しているフローは以下の通りです。

  1. Power Apps アプリ上で２つの値(App Configuration構成ストアの”キー”と”ラベル”を指定し、ボタン押下アクションを実行し、Power Automate を開始する。
  2. Power Automate から認証ポリシーで保護された Logic Apps フローを実行試行し、Power Automate HTTP アクションに設定した Entra ID アプリケーション情報が認証ポリシーと合致すれば、Logic Apps フローがパラメーター指定され開始する。
  3. Logic Apps から Function App を実行試行し、Function に設定された認証設定／プロバイダー情報に Logic Apps に設定された Managed Identities 情報と合致すれば、Function App がパラメーター指定され開始する。
  4. Function App が App Configuration に接続試行を行い、Function に設定された Managed Identities の RBAC 設定が App Configuration に設定されていれば、App Configuration からのバリュー取得試行を行う。
  5. パラメーター指定されたキー／ラベルを元にバリューがFunction App に返され、同じく HTTP アクション実行後の Body を待機する Logic Apps／Power Automate に返され、最終的に Power Apps の ReturnBody 変数に格納される。

上記シナリオはユーザーインターフェース上での実行～ユーザーインターフェース上への値の応答までをエンド・ツー・エンドで実現する為のものですが、実際は Logic Apps のパラメーターとして利用する等、要件に応じて実装対象を検討します。

構成に必要な設定値一覧

以下構成手順を進めて頂く中で設定／収集する設定値一覧テーブルです。

煩雑になりがちですのでお手元のメモ代わりにご利用下さい。

設定名 例 設定値 備考
Memo.DirectoryID xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx Azure AD テナントID
Memo.AppConf.Endpoint https://xxx.azconfig.io App Configuration のエンドポイント値
Memo.Func.ManagedID xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx Function App のシステム割り当てマネージドIDのオブジェクトID
Memo.LA.ManagedID xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx Logic App のシステム割り当てマネージドIDのオブジェクトID
Memo.LA.EntraApp.ID xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx Logic App 認証用のEntra ID アプリのアプリケーションID
Memo.LA.EntraApp.URI api:sample-api Logic App 認証用のEntra ID アプリのAPI URI
Memo.PA.EntraApp.ID xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx Power Automate 認証用のEntra ID アプリのアプリケーションID
Memo.PA.EntraApp.SC XxxxxxxXXXxxxxxxxxxx Power Automate 認証用のEntra ID アプリのシークレット
Memo.LA.POSTURL https://xxx.logic.azure.com~api-version=2016-10-01 Logic App HTTP コール用URL

構成手順

リソースの作成

App Configuration リソースの作成

a. Azure ポータルから以下設定値で App Configuration リソースを作成します。

01

設定名 設定値
Subscription リソースを作成するサブスクリプションを指定
Resource Group リソースを作成するリソースグループを指定、もしくは新規作成
Location リソースを作成するリージョンを指定
Resource Name 任意のアプリ識別名を入力
Pricing Tier Free

b. Endpoint値をMemo.AppConf.Endpointとしてメモします。

02

Functions リソースの作成

a. Azure ポータルから以下設定値でFunctions リソースを作成します。

03

設定名 設定値
Subscription リソースを作成するサブスクリプションを指定
Resource Group リソースを作成するリソースグループを指定、もしくは新規作成
Function App Name 任意のアプリ識別名を入力
Code or Container Code
Runtime stack Node.js
Version 18 LTS
Region リソースを作成するリージョンを指定
Operating System Windows
Hosting Consumption

b. Node.jsアプリで参照するアプリケーション設定を追加します。

04

設定名 設定値
AZURE_APPCONFIG_ENDPOINT Memo.AppConf.Endpoint
AzureWebJobsFeatureFlags EnableWorkerIndexing

c. システム割り当てマネージドIDを有効化し、Memo.Func.ManagedIDとしてObject IDをメモします。

05

Logic Apps リソースの作成

a. Azureポータルから以下設定値でLogic Appsリソースを作成します。

06

設定名 設定値
Subscription リソースを作成するサブスクリプションを指定
Resource Group リソースを作成するリソースグループを指定、もしくは新規作成
Logic App name 任意のアプリ識別名を入力
Region リソースを作成するリージョンを指定
Enable Log Analytics No
Plan type Consumption

b. システム割り当てマネージドIDを有効化し、Memo.LA.ManagedIDとしてObject IDをメモします。

07

App Configuration／Function App間の保護

App Configuration への RBAC 設定

Function AppのマネージドID(Memo.Func.ManagedID)に対してApp Configuration Data Ownerロールを割り当てます。

08

Function App／Logic Apps間の保護

Function App への認証設定

作成したFunction Appの”Authentication”メニューを展開し、”Add provider”を選択後、以下設定値で認証プロバイダー設定を追加します。

設定名 設定値
Identity Provider Microsoft
App registration type Provide the details of an existing app registration
Application(client) Id Memo.LA.ManagedID
Client Secret 空白
Issuer URL https://sts.windows.net/`Memo.DirectoryID`
Allowed token audiences https://management.azure.com
Restrict access Require authentication
Unauthenticated requests HTTP 401

09

Logic Apps／Power Automate間の保護

Logic Apps 認証用 Entra ID アプリ作成

a. Azure ポータルで Azure Active Directory メニューを開き、”App registration”を選択し新規アプリを以下設定値で登録します。

設定名 設定値
Name 任意のアプリ識別名を入力
Supported account types Accounts in this organizational directory only
Redirect URI 空白

b. 作成したアプリのApplication IDをMemo.LA.EntraApp.IDとしてメモします。

10

c. 作成したアプリの”Expose an API”メニューからApplication ID URIを設定しMemo.LA.EntraApp.URIとしてメモします。

11

d. API スコープを追加します。

12

Power Automate 認証用 Entra ID アプリ作成

a. Azure ポータルで Azure Active Directory メニューを開き、”App registration”を選択し新規アプリを以下設定値で登録します。

設定名 設定値
Name 任意のアプリ識別名を入力
Supported account types Accounts in this organizational directory only
Redirect URI 空白

b. 作成したアプリのApplication IDをMemo.PA.EntraApp.IDとしてメモします。

13

c. 作成したアプリにクライアントシークレットを作成し、生成された値をMemo.PA.EntraApp.SCとしてメモします。

14

Logic Apps への認証ポリシー構成

a. 作成したLogic Appリソースの”Authorization”メニューより”Add policy”を選択後、以下設定値でポリシーを作成します。

クレーム種別 名前 値
Standard Issuer https://sts.windows.net/`Memo.DirectoryID`
Standard Audience Memo.LA.EntraApp.ID
Custom appid Memo.PA.EntraApp.ID

15

Function Appへのアプリ展開

Visual Studio Code からの Function プロジェクトの展開

本レポジトリをフォーク、もしくはコードをダウンロードし、ディレクトリをVisual Studio Codeで開いた上で Azure 上 Function App リソースへコードデプロイします。

Develop Azure Functions by using Visual Studio Code

Logic Apps フローの作成

”HTTP要求をパラメーター付きで受け取り、Function Appをトリガーし状態コード、及びBodyをHTTP応答する”フローを作成します。

16

各フロー内アクションの設定値は以下の通りです。

  • When a HTTP request is received

17

設定名 設定値
HTTP POST URL 自動生成
Request Body JSON Schema {
"key":"",
"label":""
}
※Use sample payload to generate schemaから上記サンプルスキーマを入力し生成

フロー保存時に自動生成されるHTTP POST URLを以下規則に則り編集し、Memo.LA.POSTURLとしてメモします。

編集前 編集後
https://prod-15.japaneast.logic.azure.com:443/workflows/xxxxxxxxxxxxxxxxxxxxxxxxxx/triggers/manual/paths/invoke?api-version=2016-10-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=xxxxxxxxxxxxxxxxxxxxx https://prod-15.japaneast.logic.azure.com:443/workflows/xxxxxxxxxxxxxxxxxxxxxxxxxx/triggers/manual/paths/invoke?api-version=2016-10-01
  • LogicAppHttpTrigger

18

設定名 設定値
Request Body 空白
Method GET
Queries {
"key":HTTPトリガーからkeyを参照,
"label":HTTPトリガーからlabelを参照
}
Authentication type Managed identity
Managed identity System-assigned managed identity
Audience https://management.azure.com
  • Response on Success

19

設定名 設定値
Status Code 200
Headers 空白
Body FunctionアクションからBodyを参照

Power Automateフローの作成

”Power Appsから要求をパラメーター付きで受け取り、Logic Appsフローをトリガーし返ってきたBodyを応答する”フローを作成します。

20

各フロー内アクションの設定値は以下の通りです。

  • PowerApps (V2)

21

設定名 設定値
key key value
label label value
  • HTTP

22

設定名 設定値
方法 POST
URI Memo.LA.POSTURL
本文 {
"key": PowerAppsトリガーからkeyを参照,
"label": PowerAppsトリガーからlabelを参照
}
認証 Active Directory OAuth
テナント Memo.DirectoryID
対象ユーザー Memo.LA.EntraApp.ID
クライアントID Memo.PA.EntraApp.ID
資格情報の種類 シークレット
シークレット Memo.PA.EntraApp.SC
  • PowerApp または Flow に応答する

23

設定名 設定値
Return HTTPアクションから本文を参照

Power Apps アプリの作成

ここまで作成してきた Power Automate フロー、並びに Logic Apps フローにパラメータ付きで要求を送信する為の Power Apps アプリを作成します。 主要な画面上の項目は以下の通りです。

24

各項目に設定した関数は以下の通りです。

項目名 プロパティ 関数
Dropdown1 Items ["SecurityPolicy01","SecurityPolicy02"]
Dropdown1_1 Items ["v1","v2"]
Button1 OnSelect Set(ReturnBody,'POC-AppConf-Bridge'.Run(Dropdown1.SelectedText.Value,Dropdown1_1.SelectedText.Value).return)
Label3 Text ReturnBody

事前に作成した Power Automate フローを関連付けておきます。

25

参考情報

Securing Azure Functions

Set up Azure App Service access restrictions

Enable authentication for function calls

Authenticate with managed identities

Use flow in PowerApps to upload files or return data tables

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.