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

[アーティクル]
03/10/2022

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

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

注意

これは、最小限のコードで接続する方法を示す、非常に単純な例です。次の強化型クイックスタートは、より優れた設計パターンを適用するために、このサンプルを使用して構築されます。

前提条件

Visual Studio 2019 (バージョン 16.6.2 またはそれ以降推奨)
Microsoft Azure ポータルに関する知識
インターネット接続
Dataverse インスタンスに有効なユーザーアカウント
アプリケーションへの登録を許可する管理者アクセス
接続に使用する Dataverse 環境への URL
Visual C# 言語の基本的な理解

注意

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

Visual Studio プロジェクトの作成

.NET Core 3.1 を使用して新しい Blazor Server アプリを作成しますが、作成する はまだ選択しません。
認証から変更をン選択して、職場または学校アカウント を選択します。
適切なドロップダウンを選択して、例では自分の環境の名前で CRM520451 を置き替えます。
作成を選びます。

Active Directory でのアプリケーションの構成

規定では、テンプレートは登録済みアプリケーションを作成します。 Dataverse に接続するには、追加のアクセス許可が必要です。 Azure portal を開き、資格情報を使用してログインします。 Active Directory そして アプリの登録 へと移動して、自分のアプリケーションと同じ名前のエントリを選択します。

認証を選んで、暗黙の付与 から選択 (チェック) アクセストークン を選択して、保存をクリックします。
証明書とシークレット を選び、新規クライアントシークレット を選択します。
シークレットに名前 ("Blazor Server クライアント" など) と有効期限を割り当て、次に追加を選択します。
シークレットの横にあるクリップボードアイコンを選択してコピーします。

Blazor Server アプリで、appsettings.json を開いて、"ClientSecret" のエントリを追加します。 Active Directory 設定は次のようになります。

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "{org}.onmicrosoft.com",
    "TenantId": "{tenantId}",
    "ClientId": "{clientId}",
    "ClientSecret": "{secret}",
    "CallbackPath": "/signin-oidc"
  }
}

API 権限 に移動します
権限を追加 を選択して、Dynamics CRM を選びます
委任されたアクセス許可 を選んで、(チェック) user_impersonation を選択して、権限を追加 をクリックします
新しく作成した権限を選択して強調表示してから、組織に管理者の同意を与える を選択します (自分の環境名が表示されます)
状態列でアクセス権限に緑色のチェックボックスがあることを確認します

アプリで Azure AD トークンを使用する準備をする

アプリケーションでは、認証トークンを取得してそれを Web API リクエストに渡すために、いくつかの追加手順が必要です。

データ フォルダを右クリックして、TokenProvider と名前を付けた新しいクラスを追加します。
```
public class TokenProvider
{
    public string AccessToken { get; set; }
}
```
App.razor ファイルを開き、次のステートメントをファイルの先頭に追加します。名前空間を変更して、アプリケーションの名前と一致させます。
```
@using BlazorWebAPIExample.Data
@inject TokenProvider Service
```

@code ブロックを追加して、パラメーターを受け入れてトークンをサービスに移動します。

[Parameter]
public TokenProvider InitialState { get; set; }

protected override void OnInitialized()
{
    Service.AccessToken = InitialState.AccessToken;
    base.OnInitialized();
}

ページ/ _Host.cshtml ファイルを開き、名前空間宣言の後に次の using ステートメントを追加します。
```
@using BlazorCommonDataService.Data
@using Microsoft.AspNetCore.Authentication
```

<body> タグの後に、次のコードを追加し、トークンを取得して渡すようにアプリコンポーネントを更新します。

@{
    var token = new TokenProvider
    {
        AccessToken = await HttpContext.GetTokenAsync("access_token")
    };
}
<app>
    <component type="typeof(App)" param-InitialState="token" render-mode="ServerPrerendered" />
</app>

Dataverse 管理 API の環境名を取得します。名前がわからない場合は、Power Platform 管理センターを開いて、環境に移動して、次に 環境を開く を選びます。 {org} が環境名である https://{org}.crm.dynamics.com のような URL が表示されます。
CDSAPI と言う名前のエントリーを、値として環境 URL を持つ appsettings.json ファイルに追加します。 /api/data/v9.0/ を URL の最後に追加すると、次のようになります。
```
{ "CDSAPI": "https://{org}.crm.dynamics.com/api/data/v9.0/" }
```
この using ステートメントをファイル Startup.cs に追加します。
```
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
```

Startup.cs クラスで、登録を追加して認証トークンを取得し、トークンを使用する準備ができているクライアントを構成します。 services.AddAuthentication と services.AddControllersWithViews の間にこのコードを配置します。

services.Configure<OpenIdConnectOptions>(AzureADDefaults.OpenIdScheme,
    opt =>
    {
        var resourceUri = new Uri(Configuration["CDSAPI"]);
        var resource = $"{resourceUri.Scheme}://{resourceUri.Host}/";
        opt.ResponseType = "code";
        opt.SaveTokens = true;
        opt.Scope.Add("user_impersonation");
        opt.Scope.Add(new Uri(Configuration["CDSAPI"]).Host);
        opt.Resource = resource;
    });
services.AddScoped<TokenProvider>();
services.AddHttpClient("CDS", client =>
{
    client.BaseAddress = new Uri(Configuration["CDSAPI"]);
});

最初の登録では、適切なスコープでトークンを要求できます。 2 番目はトークンを追跡するサービスを登録し、3 番目は事前構成されたベース API アドレスでクライアントを作成します。

Web API を呼び出す

次に、Index.razor コンポーネントを更新して、Web API を呼び出します。

Index.razor ファイルを開き、次のステートメントをトップに追加します。

@using System.Text.Json
@using BlazorWebAPIExample.Data;
@using System.Net.Http.Headers;
@inject IHttpClientFactory Factory
@inject TokenProvider TokenProvider

SurveyPrompt 成分の後にこのマークアップを追加します。

@if (Loading)
{
    <div class="alert alert-warning">Loading...</div>
}
@if (Error)
{
    <div class="alert alert-danger">@ErrorMessage</div>
}
@if (!Loading && !Error)
{
    <div class="alert alert-info">You did it! Your user id is: @UserId</div>
}

最後に、次のコードで @code ブロックを追加します。

public bool Loading;
public string ErrorMessage;
public bool Error => !string.IsNullOrWhiteSpace(ErrorMessage);
public string UserId;

protected override async Task OnInitializedAsync()
{
    Loading = true;
    try
    {
        var client = Factory.CreateClient("CDS");
        client.DefaultRequestHeaders.Authorization =
            new AuthenticationHeaderValue("Bearer", TokenProvider.AccessToken);
        var result = await client.GetAsync("WhoAmI");
        result.EnsureSuccessStatusCode();
        UserId = JsonDocument.Parse(await result.Content.ReadAsStringAsync())
            .RootElement.GetProperty("UserId").GetGuid().ToString();
    }
    catch (Exception ex)
    {
        ErrorMessage = ex.Message;
    }
    finally
    {
        Loading = false;
    }
    await base.OnInitializedAsync();
}

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

プログラムを実行する

F5 キーを押してプログラムを実行します。出力は次のように表示されます。

接続の成功。

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

クイックスタートのサンプルでは、 Visual Studio プロジェクトを作成する簡単な方法を示しており、例外処理やアクセストークンを更新するメソッドは使用していません。この例を拡張して、より複雑な操作を実行し、権限を処理するサービスクラスの HttpClient オブジェクトをラップします。

拡張型クイックスタートトピックは、次の方法を示しています。

例外処理メソッドを実装する
接続文字列で基本認証を使用する
アクセストークンを最新の状態に更新するための再利用可能なメソッドを作成する
データ操作のための再利用可能なメソッドを構築する

次の手順

より優れた設計のためのコードを構造化する方法を説明します。

強化型クイックスタート

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

前提条件

Visual Studio プロジェクトの作成

Active Directory でのアプリケーションの構成

アプリで Azure AD トークンを使用する準備をする

Web API を呼び出す

プログラムを実行する

次の手順

関連項目

フィードバック

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

前提条件

Visual Studio プロジェクトの作成

Active Directory でのアプリケーションの構成

アプリで Azure AD トークンを使用する準備をする

Web API を呼び出す

プログラムを実行する

次の手順

関連項目

フィードバック

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