Tutorial: Erstellen einer ASP.NET-Core-Blazor-WebAssembly-App unter Verwendung von Microsoft Dataverse

Artikel
11/16/2023

Verwenden Sie die Schritte in diesem Tutorial, um eine Blazor WebAssembly-App zu erstellen, die eine Verbindung zur Dataverse herstellt. Der Fokus dieses Artikels liegt darauf, die notwendigen Schritte zu verstehen, um einen Benutzer mit einer bestimmten Dataverse-Instanz zu authentifizieren und Daten abzurufen.

Blazor WebAssembly ist eines von zwei Hosting-Modellen, die für ASP.NET Core Blazor verfügbar sind. Das andere ist Blazor Server. Eine vollständige Beschreibung der Unterschiede finden Sie unter ASP.NET-Core Blazor Hosting-Modelle.

Dieses Tutorial hängt von den Anweisungen im Artikel Sichern einer eigenständigen ASP.NET-Core Blazor WebAssembly-App mit Microsoft Entra ID ab. Weil Dataverse zur Authentifizierung Microsoft Entra ID nutzt, wird in diesem Tutorial beschrieben, wie Sie die mit der bereitgestellten App-Vorlage erstellte Basis-App so ändern, dass eine Verbindung zu Dataverse hergestellt werden kann.

Goal

Wenn Sie dieses Tutorial abgeschlossen haben, verfügen Sie über eine Blazor WebAssembly App, die Daten aus der Dataverse Account-Tabelle anzeigt, auf die der authentifizierte Benutzende Zugriff hat.

Stellt das Ziel dieses Tutorials dar.

Anforderungen

Für den Abschluss dieses Tutorials benötigen Sie:

Zugriff auf eine Dataverse-Umgebung mit einer Datenbank
Ein Dataverse-Benutzer mit einer Sicherheitsrolle, die Lesezugriff auf die Tabellen Account und Contact bietet
Verstehen der C#-Programmiersprache
Verstehen des ASP.NET-Core Blazor ist hilfreich, aber nicht erforderlich
Die neueste Version von Visual Studio 2022 mit der ASP.NET und Webentwicklung-Workload installiert.

Schritt 1: Überprüfen Sie die Voraussetzungen und Informationen über die Datenbank

Stellen Sie sicher, dass Ihre Umgebung ordnungsgemäß konfiguriert ist und Sie wissen, wo die Aktionen in Schritt 2 ausgeführt werden müssen.

Dataverse-Datenbank überprüfen

Melden Sie sich bei Power Apps an.
Wählen Sie im Navigationsbereich die Option Lösungen aus.
Wenn keine Liste der installierten Lösungen angezeigt wird, wählen Sie mit der Umgebungsauswahl oben eine andere Umgebung mit einer Datenbank aus. Andernfalls erstellen Sie eine neue Umgebung.

Dataverse-Web-API-URI abrufen

Sie benötigen die Stamm-URL des Instanz-Web-API-Dienstes. Diese URL finden Sie auf der Seite „Entwicklerressourcen“ Ihrer Dataverse-Umgebung.

Befolgen Sie die Anweisungen in Anzeigen oder Herunterladen der Entwicklerressourcen, um die URL zu kopieren.

Sie sieht so aus: https://yourorgname.api.crm.dynamics.com/api/data/v9.2/

Navigieren zum Microsoft Entra ID-Portal

Melden Sie sich bei Power Apps an.
Wählen Sie das Waffel-Symbol oben links und Administrator aus.
Wählen Sie in der linken Navigation des Microsoft 365 Admin Center Alle anzeigen und Identität aus.
Erweitern Sie im Microsoft Entra Admin Center den Knoten Anwendungen im linken Navigationsbereich und wählen Sie App-Registrierungen aus.

Hier beginnen Sie mit Schritt 2.

Schritt 2: Erstellen Sie eine eigenständige Blazor WebAssembly-App mit Microsoft Entra ID zur Authentifizierung

Der Artikel Sichern einer eigenständigen ASP.NET-Core Blazor WebAssembly-App mit Microsoft Entra ID enthält eine vollständige Anleitung zum Erstellen der App.

In diesen Schritten wird beschrieben, wie Sie eine App-Registrierung in Microsoft Entra ID erstellen und einen .NET Core-CLI-Befehl ausführen, um das Gerüst für die Basis-App mit Unterstützung für Microsoft Entra ID-Authentifizierung zu generieren.

Hinweis

Bei diesen Anleitungen wird der .NET Core-CLI-Befehl verwendet, um die App zu generieren. Es gibt eine Visual Studio-Projektvorlage zum Erstellen einer Blazor WebAssembly-App, aber dieses Tutorial wurde nicht anhand dieser Vorlage überprüft.

Gehen Sie zu Sichern einer eigenständigen ASP.NET-Core Blazor WebAssembly-App mit Microsoft Entra ID und folgen Sie den Anweisungen dort, um das Basis-App-Projekt zu generieren.

Überprüfen, ob App ausgeführt wird

Nachdem Sie die Schritte unter Sichern einer eigenständigen ASP.NET-Core Blazor WebAssembly-App mit Microsoft Entra ID abgeschlossen haben, sollten Sie F5 in Visual Studio drücken können, um die App auszuführen.

Das Standardverhalten der Blazor WebAssembly-App, bevor Änderungen vorgenommen werden.

Zu diesem Zeitpunkt funktionieren alle Funktionen der App, unabhängig davon, ob Sie sich anmelden oder nicht. Nur Mitglieder des Microsoft Entra ID-Mandanten können sich anmelden.

Schritt 3: Gewähren Sie API-Berechtigungen

Um eine Verbindung zu Dataverse herzustellen, müssen Sie die Berechtigungen für die Verbindung der App konfigurieren.

Kehren Sie zu Ihrer App-Registrierung in Microsoft Entra ID zurück. Wählen Sie Berechtigung hinzufügen im Abschnitt API-Berechtigungen aus.
Wählen Sie im Bereich API-Berechtigungen anfordern die Option APIs, die meine Organisation verwendet aus und suchen Sie nach Dataverse.
Wählen Sie Dataverse aus.
Auswählen der user_impersonation-Berechtigung

Hinweis

Dynamics CRM, Common Data Service und Dataverse beziehen sich auf denselben Service.
Wählen Sie Zugriffsrechte hinzufügen.
(Optional) Wählen Sie für Konfigurierte Berechtigungen die Option Einwilligung des Administrators für [Ihren Microsoft Entra ID-Mandantennamen] gewähren aus. Im folgenden Screenshot lautet der Name des Mandanten „Standardverzeichnis“. Ihrer kann anders sein.

Wenn Sie hier keine Administratoreinwilligung erteilen, haben Sie beim nächsten Anmelden in der Anwendung die Möglichkeit, dies zu tun.

Schritt 4: Wenden Sie Codeänderungen an

Übernehmen Sie Änderungen an den folgenden Dateien, um die Anzeige von Dataverse-Daten in der Anwendung zu aktivieren.

\wwwroot\appsettings.json

Wenden Sie die Änderungen auf der folgenden Registerkarte Nach an, um Konfigurationsdaten für Ihre Verbindung mit Dataverse hinzuzufügen.

22222222-2222-2222-2222-222222222222 steht für Ihre Mandanten-ID.
11111111-1111-1111-1111-111111111111 stellt den Anwendungs-(Client-)ID-Wert dar, den Sie bei Ihrer Anwendungsregistrierung erstellt haben.
Stellen Sie sicher, dass Sie https://yourorg.api.crm.dynamics.com durch die URL ersetzen, die Sie zuvor kopiert haben.

Vorher
After

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/22222222-2222-2222-2222-222222222222",
    "ClientId": "11111111-1111-1111-1111-111111111111",
    "ValidateAuthority": true
  }
}

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/22222222-2222-2222-2222-222222222222",
    "ClientId": "11111111-1111-1111-1111-111111111111",
    "ValidateAuthority": true
  },
  "DataverseWebAPI": {
    "ResourceUrl": "https://yourorg.api.crm.dynamics.com",
    "Version": "v9.2",
    "TimeoutSeconds": 30
  }
}

Program.cs

Installieren Sie das Microsoft.Extensions.Http NuGet-Paket.
1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste in das Projekt und wählen Sie Verwalten von NuGet-Paketen... aus.
2. Wählen Sie Durchsuchen aus und suchen Sie nach Microsoft.Extensions.Http.
3. Installieren Sie die neueste Version des Pakets.
Ersetzen Sie den generierten Code auf der Registerkarte Vor durch den Code auf der Registerkarte Nach. BlazorSample ist der Name des von Ihnen erstellten Projekts, daher variiert er.

Vorher
After

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using BlazorSample;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
    options.ProviderOptions.DefaultAccessTokenScopes
        .Add("https://graph.microsoft.com/User.Read");
});

await builder.Build().RunAsync();

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using BlazorSample;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

// Get configuration data about the Web API set in wwwroot/appsettings.json
var DataverseWebApiConfig = builder.Configuration.GetSection("DataverseWebApi");
var resourceUrl = DataverseWebApiConfig.GetSection("ResourceUrl").Value;
var version = DataverseWebApiConfig.GetSection("Version").Value;
var timeoutSeconds = int.Parse(DataverseWebApiConfig.GetSection("TimeoutSeconds").Value);

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// Create an named definition of an HttpClient that can be created in a component page
builder.Services.AddHttpClient("DataverseClient", client =>
{
    // See https://learn.microsoft.com/powerapps/developer/data-platform/webapi/compose-http-requests-handle-errors
    client.BaseAddress = new Uri($"{resourceUrl}/api/data/{version}/");
    client.Timeout = TimeSpan.FromSeconds(timeoutSeconds);
    client.DefaultRequestHeaders.Add("OData-Version", "4.0");
    client.DefaultRequestHeaders.Add("OData-MaxVersion", "4.0");
});

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
    options.ProviderOptions.DefaultAccessTokenScopes
        .Add($"{resourceUrl}/user_impersonation");
});

await builder.Build().RunAsync();

Hinzufügen von \Pages\FetchAccounts.razor

Dies ist eine neue Seite, auf der die Kontoinformationen angezeigt werden.

Wählen Sie im Lösungs-Explorer mit der rechten Maustaste Seiten und dann Hinzufügen > Razor-Komponente… aus aus dem Kontextmenü aus und benennen Sie sie FetchAccounts.razor.

Ersetzen Sie den Code in der Datei durch folgenden Code:

@page "/fetchaccounts"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using System.Net.Http.Headers
@using System.Net.Http.Json
@using Microsoft.Extensions.Logging;
@using System.Text.Json.Serialization;
@inject IAccessTokenProvider TokenProvider
@inject IHttpClientFactory ClientFactory
@inject ILogger<FetchAccounts> logger;

<AuthorizeView>
    @*Only show the list if the user is signed in and authorized*@
    <Authorized>
        <h3>Fetch Accounts</h3>

        @if (accounts != null)
        {
            <table class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Main Phone</th>
                        <th>City</th>
                        <th>Primary Contact</th>
                        <th>Email (Primary Contact)</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (Account account in accounts.value)
                    {
                        <tr id="@account.accountid">
                            <td>
                                @((account.name != null)
                                ? account.name
                                : string.Empty)
                            </td>
                            <td>
                                @((account.telephone1 != null)
                                ? account.telephone1
                                : string.Empty)
                            </td>
                            <td>
                                @((account.address1_city != null)
                                ? account.address1_city
                                : string.Empty)
                            </td>
                            <td>
                                @((account.primarycontactid != null)
                                ? (account.primarycontactid.fullname != null
                                    ? account.primarycontactid.fullname
                                    : string.Empty)
                                : string.Empty)
                            </td>
                            <td>
                                @((account.primarycontactid != null)
                                ? (account.primarycontactid.emailaddress1 !=null
                                    ? account.primarycontactid.emailaddress1
                                    : string.Empty)
                                : string.Empty)
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        }
        else
        {
            <p><em>@message</em></p>
        }
    </Authorized>
    <NotAuthorized>
        <h3>Authentication Failure!</h3>
        <p>You're not signed in.</p>
    </NotAuthorized>
</AuthorizeView>


@code {

    //The collection of Account records to display
    private AccountCollection accounts;

    //An informational message
    private string message = "Loading...";

    //Contains data about an error returned from the Web API
    private Error error;

    // Method invoked when the component is ready to start, having received its initial parameters from its parent in the render tree.
    // Override this method if you will perform an asynchronous operation and want the component to refresh when that operation is completed.
    protected override async Task OnInitializedAsync()
    {
        // Tries to get an access token for the current user with the default set of permissions.
        var tokenResult = await TokenProvider.RequestAccessToken();

        // If the token request was successful
        if (tokenResult.TryGetToken(out var token))
        {
            //Creates an HttpClient based on the named definition found in Program.Main
            var client = ClientFactory.CreateClient("DataverseClient");

            //Prepare the request to get the data
            var request = new HttpRequestMessage()
            {
                Method = HttpMethod.Get,
                RequestUri = new Uri($"{client.BaseAddress}accounts?" +
                "$select=name,telephone1,address1_city&" +
                "$expand=primarycontactid($select=fullname,emailaddress1)")
            };
            //Add the access token
            request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", token.Value);
            //Specify a JSON result is expected
            request.Headers.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
            //Limit the number of results to 10
            request.Headers.Add("Prefer", "odata.maxpagesize=10");

            //Send the request
            var response = await client.SendAsync(request);

            if (response.IsSuccessStatusCode)
            {
                //Parse the JSON returned into a strongly typed AccountCollection
                accounts = await response.Content.ReadFromJsonAsync<AccountCollection>();
            }
            else
            {
                //Parse the JSON returned into a strongly typed Error
                error = await response.Content.ReadFromJsonAsync<Error>();
                error.statuscode = (int)response.StatusCode;
                error.reason = response.ReasonPhrase;
                //Display a message to the user
                message = "An error occurred.";
                //Log the details so they can be seen in the browser console
                logger.LogError($"{error.detail.message}");

            }

        }
        else
        {
            // Notify user that the token request was not successful
            message = "There was a problem authenticating.";
        }

    }


    // The result will be a JSON object with an array of entities set to the value property
    public class AccountCollection
    {
        public Account[] value { get; set; }
    }

    //Just the properties of the Account EntityType used for this sample
    // See https://learn.microsoft.com/power-apps/developer/data-platform/webapi/reference/account
    public class Account
    {

        public Guid accountid { get; set; }

        public string name { get; set; }

        public string telephone1 { get; set; }

        public string address1_city { get; set; }

        public Contact primarycontactid { get; set; }

    }

    //Just the properties of the Contact EntityType that are expanded from the Account entity
    // See https://learn.microsoft.com/power-apps/developer/data-platform/webapi/reference/contact
    public class Contact
    {

        public string fullname { get; set; }

        public string emailaddress1 { get; set; }
    }

    // Contains the error data returned by the Web API and the HttpMessageResponse
    public class Error
    {
        [JsonPropertyName("error")]
        public ErrorDetail detail { get; set; }
        public int statuscode { get; set; }
        public string reason { get; set; }

    }

    //Contains data from the Web API
    //See https://learn.microsoft.com/powerapps/developer/data-platform/webapi/compose-http-requests-handle-errors#parse-errors-from-the-response
    public class ErrorDetail
    {
        public string code { get; set; }
        public string message { get; set; }

    }
}

Dieser Code bewirkt Folgendes:

Stellt sicher, dass nur authentifizierte Benutzer die Seite mit Daten anzeigen können.
Definiert eine Tabelle zum Anzeigen von Kontodaten nach dem Abrufen.
Fordert ein Zugriffstoken an, und verwendet dieses Token dann mit einer HttpRequestMessage, um Daten von Dataverse abzurufen.
Definiert Klassen, um typisierte Daten zu aktivieren, wenn der vom Dienst zurückgegebene JSON deserialisiert wird.

\Shared\NavMenu.razor

Bearbeiten Sie diese Datei, um die fetchaccounts razor component-Seite hinzuzufügen.

Fügen Sie diesen Knoten im <nav class="flex-column">-Element an beliebiger Stelle hinzu.

<div class="nav-item px-3">
   <NavLink class="nav-link" href="fetchaccounts">
         <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch Accounts
   </NavLink>
</div>

Schritt 5: Überprüfen Sie, ob es funktioniert

Drücken Sie in Visual Studio F5, um die App mit den Codeänderungen zu starten.

Navigieren Sie vor dem Anmelden zu Konten abrufen. Sie sollten damit rechnen, die Fehlerbenachrichtigung zu sehen.
Melden Sie sich als Benutzender an, der Zugriff auf die Dataverse-Daten hat.

Hinweis

Benutzende können davon ausgehen, dass bei ihrer ersten Anmeldung ein Dialog wie dieser angezeigt wird:

Klicken Sie auf Akzeptieren, um fortsetzen zu können.
Navigieren Sie zu Konten abrufen und stellen Sie sicher, dass die Kontodaten wie erwartet angezeigt werden:

Siehe auch

Verwenden Sie den globalen Discovery-Dienst von einer Blazor WebAssembly
Schnellstart: Blazor Server-Web-API-Beispiel (C #)
Sichern einer eigenständigen ASP.NET-Core Blazor WebAssembly-App mit Microsoft Entra ID
Exemplarische Vorgehensweise: Registrieren einer App mit Microsoft Entra ID
Verwenden von OAuth mit Dataverse
Verwenden der Dataverse-Web-API