このチュートリアルでは、ASP.NET Web API を作成して Azure Web Apps でホストし、Azure Active Directory 認証を有効にした後、PowerApps に ASP.NET Web API を登録する方法について説明します。

前提条件

ASP.NET Web API を作成して Azure にデプロイする

  1. Visual Studio で、[ファイル] > [新しいプロジェクト] の順にクリックし、新しい C# ASP.NET Web アプリケーションを作成します。

    新しい Web アプリ

  2. [Web API] テンプレートを選択します。 [クラウドにホストする] チェック ボックスはオンのままにします。 [認証の変更] をクリックします。

    新しい Web プロジェクト テンプレート

  3. [認証なし] を選択し、[OK] をクリックします。

    [認証なし]

  4. [新しい ASP.NET プロジェクト] ダイアログで [OK] をクリックします。 [Microsoft Azure Web App の構成] ダイアログが表示されます。

    [Microsoft Azure Web App の構成] ]

    Azure アカウントを選択し、Web アプリ名を入力 (または既定値のままに) して、Azure サブスクリプションを選択します。 App Service プラン (サブスクリプション内の Web アプリのコレクション) を選択または作成します。 リソース グループ (サブスクリプション内の Azure リソースのグループ) を選択または作成します。 Web アプリをデプロイするリージョンを選択します。 Web API で必要な場合は、Azure のデータベース サーバーを選択または作成します。 最後に、[OK] をクリックします。

  5. Web API を作成します。

    メモ:

    ASP.NET Web API を初めてご利用の場合は、公式のチュートリアルをいくつかお試しください。

  6. Web API を PowerApps に接続するには、その操作が記述された Swagger ファイルが必要です。 オンライン エディターを使用して独自の Swagger を作成することもできますが、このチュートリアルでは、Swashbuckle というオープンソースのツールを使用します。 Visual Studio プロジェクトに Swashbuckle Nuget パッケージをインストールするには、[ツール] > [NuGet パッケージ マネージャー] > [パッケージ マネージャー コンソール] の順にクリックし、パッケージ マネージャー コンソールで Install-Package Swashbuckle コマンドを入力します。

    Install-Package Swashbuckle

    ヒント:

    Swashbuckle のインストール後で Web API アプリケーションを実行すると、http://<your root URL>/swagger/docs/v1 という URL に Swagger ファイルが生成されます。 生成されたユーザー インターフェイスは http://<your root URL>/swagger でも利用できます。

  7. Web API の準備ができたら、Azure に発行します。 Visual Studio から発行するには、ソリューション エクスプローラーで Web プロジェクトを右クリックし、[発行] をクリックして、[発行] ダイアログ ボックスの指示に従います。

  8. https://<azure-webapp-url>/swagger/docs/v1 に移動して Swagger JSON を取得します。 内容を JSON ファイルとして保存します。 ブラウザーによっては、テキストをコピーして空のテキスト ファイルに貼り付けることが必要になる場合があります。

    重要:

    重複する操作 ID を含む Swagger ドキュメントは無効です。 サンプル C# テンプレートを使用している場合、操作 ID Values_Get が 2 回繰り返されています。 これを修正するには、一方のインスタンスを Value_Get に変更してから再発行します。

    このチュートリアルからサンプルの Swagger をダウンロードすることもできます。 使用する前に、(// で始まる) コメントを必ず削除してください。

Azure Active Directory 認証を設定する

ここでは、いくつかの Azure Active Directory (AAD) アプリケーションを Azure に作成します。 この方法の例については、Azure Resource Manager のチュートリアルを参照してください。 このチュートリアルには AAD アプリケーションが 2 つ必要です。

重要:

両方のアプリが同じディレクトリに含まれている必要があります。

1 つ目の AAD アプリケーション: Web API のセキュリティ保護

1 つ目の AAD アプリケーションは、Web API のセキュリティ保護に使用されます。 webAPI という名前を付けます。 次の値を使用して、前述のリンク先のチュートリアルの手順 (「*Azure Active Directory で認証を有効にする」) に従います。

  • サインオン URL: https://login.windows.net
  • 応答 URL: https://<your-root-url>/.auth/login/aad/callback
  • クライアント キーは必要ありません。
  • アクセス許可を委任する必要はありません。
  • 重要 アプリケーション ID をメモしておいてください。 これは後で必要になります。

2 つ目の AAD アプリケーション: カスタム API のセキュリティ保護と委任されたアクセス

2 つ目の AAD アプリケーションは、カスタム API の登録をセキュリティで保護し、1 つ目のアプリケーションで保護された Web API への委任されたアクセスを取得するために使用します。 このアプリケーションに webAPI-customAPI という名前を付けます。

  • サインオン URL: https://login.windows.net
  • 応答 URL: https://msmanaged-na.consent.azure-apim.net/redirect
  • Web API への委任されたアクセスを取得するためのアクセス許可を追加します。
  • このアプリケーションのアプリケーション ID も後で必要となるため、メモしておきます。
  • クライアント キーを生成し、それを安全な場所に保存します。 このキーは後で必要になります。

Azure Web アプリに認証を追加する

  1. Azure Portal にサインインし、最初のセクションでデプロイした Web アプリを見つけます。
  2. [設定] をクリックして、[認証/承認] を選択します。
  3. [App Service 認証] をオンにし、[Azure Active Directory] を選択します。 次のブレードで、[Express] を選択します。
  4. [既存の AD アプリを選択する] をクリックし、前に作成した webAPI AAD アプリケーションを選択します。

これで、AAD を使用して Web アプリケーションを認証できるようになります。

PowerApps にカスタム API を追加する

  1. Web アプリに使用される securityDefintions オブジェクトと AAD 認証を追加するように Swagger を変更します。 Swagger の host プロパティを含むセクションは次のようになります。
// File header should be above here...

"host": "<your-root-url>",
"schemes": [
    "https"         //Make sure this is https!
],
"securityDefinitions": {
    "AAD": {
        "type": "oauth2",
        "flow": "implicit",
        "authorizationUrl": "https://login.windows.net/common/oauth2/authorize",
        "scopes": {}
    }
},

// The rest of the Swagger follows...
  1. PowerApps に移動し、カスタム API の概要に関するページの説明に従って、カスタム API を追加します。

  2. Swagger のアップロードが完了すると、ウィザードでは、Web API に AAD 認証が使用されていることが自動的に検出されます。

  3. カスタム API の AAD 認証を構成します。

    • クライアント ID: "webAPI-CustomAPI のクライアント ID"
    • シークレット: "webAPI-CustomAPI のクライアント キー"
    • ログイン URL: https://login.windows.net
    • ResourceUri: "webAPI のクライアント ID"
  4. [作成] をクリックし、カスタム API への接続を作成します。

次のステップ

Azure Resource Manager チュートリアルでカスタム API を作成します。

アプリの作成方法の詳細については、データからのアプリの作成に関するページを参照してください。

アプリでフローを使用する方法については、「Start a flow in an app (アプリでのフローの開始)」を参照してください。

カスタム API に関する質問やコメントを投稿するには、コミュニティに参加してください。