クイックスタート: Blazor Server Web API サンプル (C#)

[アーティクル]
11/16/2023

このクイックスタートでは、Blazor Server アプリケーションを作成して、Web APIを使用した Microsoft Dataverse 環境に接続します。

認証して、HttpClient を使用して WhoAmI 関数を含む GET リクエストを送信します。この応答は、WhoAmIResponse ComplexType です。通話完了後、WhoAmIResponse プロパティが表示されます。

注意

これは、最小限のコードで接続する方法を示す、非常に単純な例です。

前提条件

Visual Studio 2022 年には ASP.NET とウェブ開発 ワークロードが必要です。
.NET 7.0 SDK.
Microsoft Azure ポータルに関する知識。
インターネット接続。
Dataverse インスタンスに有効なユーザーアカウント。
アプリケーションへの登録を許可する管理者アクセス。
接続に使用する Dataverse 環境への URL。
Visual C# 言語の基本的な理解。

注意

認証するには、アプリを Microsoft Entra ID に登録する必要があります。登録はテンプレート作成の一部として自動的に行われますが、Azure portal では追加の更新が必要になります。

Visual Studio プロジェクトを作成する

Visual Studio 2022 を開いて、新しいプロジェクトの作成を選択します。
新規プロジェクトの作成 ダイアログで、Blazor Server App を検索します。テンプレートを選び、次へを選びます。
新規プロジェクトの構成 ダイアログで、プロジェクト名 と場所を設定します。続いて次へを選択します。

この例では、 プロジェクト名 として DataverseWebApiBlazorServerQuickStart を使用します。
詳細情報 ダイアログで、フレームワーク と 認証の種類 を指定します。

この例では、フレームワークは .NET 7.0 (Standard Term Support) です。

重要

認証の種類 を Microsoft ID プラットフォーム に設定する。
作成を選択してプロジェクトを作成します。
プロジェクトテンプレートにより、必要なコンポーネント ダイアログが開きます。次へを選択します。
Microsoft ID プラットフォーム ダイアログで、選択した Azure アカウントに Microsoft Entra ID のアプリケーションを管理する権限があり、選択したテナントが Power Platform 環境に関連付けられたものであることを確認してください。
新規作成を選択します。
アプリケーションの登録 ダイアログで、 表示名 を設定し、登録をクリックしてダイアログを閉じます。

この例では、 Dataverse Web Api Blazor Server Quick Start という名前を使用しています。後のステップで、この名前を使用してアプリケーションを検索します。
次へを選択します。

注意

このステップでは何もする必要はありません。

この手順では、Microsoft Graph または別の API に接続する機能が提供されますが、このクイックスタートでは別の API に接続する必要はありません。
次へを選択します。このステップでは、プロジェクトに加えられた変更を要約します。
完了を選択します。

依存関係の構成の進行状況 ダイアログには、アプリケーションを登録するためにテンプレートによって実行される自動化された手順が表示されます。
閉じる を選択して、ダイアログボックスを閉じます。

Microsoft Entra ID でのアプリケーションの構成

Visual Studio テンプレートは、提供された情報を使用して登録アプリケーションを作成しました。 Dataverse に接続するには、追加のアクセス許可が必要です。

Power Platform 管理センターから、管理センター > Microsoft Entra ID を選択します。
Microsoft Entra 管理センター で、アプリの登録 内で作成されたアプリケーションを名前で検索します。
アプリケーションを開き、API 権限 を選択します。 アクセス許可の追加 を選択します。
API 権限の要求 フライアウトで、自分の組織が使用する API タブを選択して、Dataverse を検索します。
Dataverse を選択すると、Dynamics CRM API が開きます。
user_impersonation 委任されたアクセス許可を選択してから、アクセス許可の追加を選択します。
認証とシークレット を選択してから 新しいクライアントシークレット を選択します。
クライアントシークレットの追加 フライアウトで、説明と 有効期限を入力してから、追加を選択します。

重要

今すぐシークレットをコピーします。このページから移動するとアクセスできなくなります。

Visual Studio で、Blazor Server アプリプロジェクト内で、appsettings.json を開き、シークレット値を使用して ClientSecret のエントリを追加します。 appsettings.json ファイルのコンテンツは、次のようになります。

{
"AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "<your org>.onmicrosoft.com",
    "TenantId": "<your tenantid>",
    "ClientId": "<your clientid>",
    "CallbackPath": "/signin-oidc",
    "ClientSecret": "<your secret>"
},
"Logging": {
    "LogLevel": {
    "Default": "Information",
    "Microsoft.AspNetCore": "Warning"
    }
},
"AllowedHosts": "*"
}

アプリの編集

Dataverse への呼び出しを有効にするには、アプリケーションで 3 つのファイルを編集する必要があります。

appsettings.json
Program.cs
Pages/FetchData.razor

appsettings.json

他のファイルには、Dataverse Web API へのアクセスに使用されるベース URI への参照が必要な場所がいくつかあります。このデータを appsettings.json に追加すると、このデータを 1 か所に設定できるようになります。

以下の "AllowedHosts": "*" を追加します。<your org> は、Dataverse Web APIにアクセスするためのベース URL を表します。これが何かわからない場合は、Web API URL とバージョンを参照してください。

  "AllowedHosts": "*",
  "DataverseConfig": {
    "BaseUri": "https://<your org>.api.crm.dynamics.com/"
  }

注意

次のことを確認してください:

JSON が有効になるように、"AllowedHosts": "*" の後にコンマを追加します。
BaseUri 値を "/" で終了します。

Program.cs

設定で Web API ベース URI の値にアクセスするには、以下の行を Main メソッドで、// Get BaseUri from appsettings.json でコメント化して行の下に追加します。
var builder = WebApplication.CreateBuilder(args);
```
public static void Main(string[] args)
{
  var builder = WebApplication.CreateBuilder(args);

  // Get BaseUri from appsettings.json
  string dataverseBaseUri = builder.Configuration.GetSection("DataverseConfig").GetValue<string>("BaseUri");
```
行の下に次の 2 行を追加します。
.AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd"))
```
// Add services to the container.
builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
  .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd"))
    .EnableTokenAcquisitionToCallDownstreamApi(new string[] { $"{dataverseBaseUri}user_impersonation" })
    .AddInMemoryTokenCaches();
```
- MicrosoftIdentityWebApiAuthenticationBuilder.EnableTokenAcquisitionToCallDownstreamApi Method は、Web アプリが API を呼び出すためのトークンを取得するサポートを追加します。 user_impersonation スコープを渡すことにより、ユーザーは Dataverse Web API を使用する機能に同意できます。
- AddInMemoryTokenCaches メソッドリクエストに対して発行されたトークンのキャッシュを有効にします。

Pages/FetchData.razor

デフォルトの Pages/FetchData.razor コンポーネントは、天気予報データを取得します。これを完全に交換していきます。

次のコードをコピーして、Pages/FetchData.razor 内のすべてのコードを置き換えます。

@page "/fetchdata"
@using Microsoft.Identity.Client;
@using Microsoft.Identity.Web
@using System.Text.Json;
@inject MicrosoftIdentityConsentAndConditionalAccessHandler ConsentHandler
@inject IHttpClientFactory HttpClientFactory
@inject Microsoft.Identity.Web.ITokenAcquisition TokenAcquisitionService
@inject IConfiguration configuration;

<PageTitle>WhoAmI</PageTitle>

<h1>WhoAmI</h1>

<p>This component demonstrates fetching data from Dataverse.</p>

@if (WhoIAm == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Property</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>BusinessUnitId</td>
                <td>@WhoIAm.BusinessUnitId</td>
            </tr>
            <tr>
                <td>OrganizationId</td>
                <td>@WhoIAm.OrganizationId</td>
            </tr>
            <tr>
                <td>UserId</td>
                <td>@WhoIAm.UserId</td>
            </tr>
        </tbody>
    </table>
}

@code {
    private WhoAmIResponse WhoIAm;
    private HttpClient _httpClient;

    protected override async Task OnInitializedAsync()
    {
        string baseUrl = configuration["DataverseConfig:BaseUri"];

        // Get the HttpClient
        _httpClient = HttpClientFactory.CreateClient();
        
        // Get the token
        var token = string.Empty;
        try
        {
            token = await TokenAcquisitionService.GetAccessTokenForUserAsync(new string[] { $"{baseUrl}user_impersonation" });
        }
        // Microsoft Identity Web specific exception class for use in Blazor or Razor pages to process the user challenge. 
        // Handles the MsalUiRequiredException.
        catch (MicrosoftIdentityWebChallengeUserException ex)
        {
            ConsentHandler.HandleException(ex);
        }
        catch (Exception)
        {
            throw new Exception("Error getting access token.");
        }

        // Set the auth token
        _httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", token);

        // Send the request
        var dataRequest = await _httpClient.GetAsync($"{baseUrl}api/data/v9.2/WhoAmI");

        if (dataRequest.IsSuccessStatusCode)
        {
            var jsonString = System.Text.Json.JsonDocument.Parse(await dataRequest.Content.ReadAsStreamAsync());
            WhoIAm = JsonSerializer.Deserialize<WhoAmIResponse>(jsonString);
        }
        else
        {
            throw new Exception("Error sending request.");
        }
    }

    // Used with System.Text.Json.JsonSerializer.Deserialize to deserialize response body
    public class WhoAmIResponse
    {
        public Guid BusinessUnitId { get; set; }
        public Guid OrganizationId { get; set; }
        public Guid UserId { get; set; }
    }

}

プログラムを実行する

このアプリケーションの準備ができました。

F5 キーを押してプログラムを実行します。プログラムを初めて実行すると、次の同意ダイアログが表示されます。
承諾を選択します。
データの取り込み を選択します。

出力は次のように表示されます。

ご報告: Web API に正常に接続されました。

このクイックスタートでは、Dataverse のデータに接続する Blazor Server Web アプリケーションを作成する簡単な方法を示します。

サービスドキュメントを理解することで、Dataverse Web API 機能の詳細を学びます。

Web API の種類および操作

クイックスタート: Blazor Server Web API サンプル (C#)

前提条件

Visual Studio プロジェクトを作成する

Microsoft Entra ID でのアプリケーションの構成

アプリの編集

appsettings.json

Program.cs

Pages/FetchData.razor

プログラムを実行する

関連情報

フィードバック

その他のリソース

クイック スタート: Blazor Server Web API サンプル (C#)

前提条件

Visual Studio プロジェクトを作成する

Microsoft Entra ID でのアプリケーションの構成

アプリの編集

appsettings.json

Program.cs

Pages/FetchData.razor

プログラムを実行する

関連情報

フィードバック

その他のリソース

クイックスタート: Blazor Server Web API サンプル (C#)