Muokkaa

Jaa


Quickstart: Blazor Server Web API sample (C#)

In this quickstart, you create a Blazor Server application to connect to your Microsoft Dataverse environment using the Web API.

You authenticate and use HttpClient to send a GET request containing the WhoAmI Function. The response is a WhoAmIResponse ComplexType . After call completion, the WhoAmIResponse properties are displayed.

Note

This is a very simple example to show how to get connected with a minimum of code.

Prerequisites

  • Visual Studio 2022 with the ASP.NET and web development workload.
  • .NET 7.0 SDK.
  • Familiarity with the Microsoft Azure portal.
  • Internet connection.
  • Valid user account for a Dataverse instance.
  • Administrator access to grant application registrations.
  • URL to the Dataverse environment you want to connect with.
  • Basic understanding of the Visual C# language.

Note

To authenticate you must have an app registered in Microsoft Entra ID. The registration will happen automatically as part of the template creation, but will require additional updates in the Azure portal.

Create a Visual Studio project

  1. Open Visual Studio 2022 and select Create a new project.

    Open Visual Studio 2022

  2. In the Create a new project dialog, search for Blazor Server App. Select the template and select Next.

    Create a new project

  3. In the Configure your new project dialog, set the Project name, and Location. Then select Next.

    Enter project name and location

    In this example, we'll use DataverseWebApiBlazorServerQuickStart as the Project name.

  4. In the Additional information dialog, specify Framework and Authentication type.

    In this example, the Framework is .NET 7.0 (Standard Term Support).

    Important

    Set the Authentication type to Microsoft identity platform.

    Set the Authentication type to Microsoft identity platform

  5. Select Create to create the project.

  6. The project template opens a Required components dialog. Select Next.

    Required components

  7. In the Microsoft identity platform dialog, make sure that the selected Azure account has permissions to manage applications in Microsoft Entra ID and the selected tenant is the one associated with your Power Platform environment.

    Microsoft identity platform dialog

  8. Select Create new.

  9. In the Register an application dialog, set the Display name and select Register to close the dialog.

    Register an application

    In this example, we're using the name Dataverse Web Api Blazor Server Quick Start. We'll search for the application using this name in a later step.

  10. Select Next.

    Note

    You don't need to do anything in this step.

    This step provides capabilities to connect to Microsoft Graph or another API, but connecting to another API isn't necessary for this quickstart.

    Additional settings step.

  11. Select Next. This step summarizes the changes that are made to the project.

    Summary of changes

  12. Select Finish.

    The Dependency configuration progress dialog shows the automated steps performed by the template to register the application.

    Dependency configuration progress

  13. Select Close to close the dialog.

Configure the application in Microsoft Entra ID

The Visual Studio template created a registered application using the information you provided. Connecting to Dataverse requires more permissions.

  1. From the Power Platform admin center, select Admin Centers > Microsoft Entra ID.

    Microsoft Entra ID admin center from the Power Platform admin center

  2. In the Microsoft Entra admin center, search for the application created by name within App Registrations.

    Search for the application registration

  3. Open the application and select API permissions. Select Add a permission.

    API permissions

  4. In the Request API permissions fly-out, select the APIs my organization uses tab and search for Dataverse.

    search for Dataverse in APIs my organization uses

  5. Select Dataverse, and Dynamics CRM API opens.

  6. Select the user_impersonation delegated permission and select Add permissions.

    Add the user_impersonation delegated privilege

  7. Select Certificates & secrets and select New client secret.

    Certificates & secrets

  8. In the Add a client secret fly-out, enter a Description and Expires duration, then select Add.

    Add a client secret

    Important

    Copy the secret now. You can't access it after you leave this page.

    Copy the client secret

  9. In Visual Studio, within your Blazor Server app project, open appsettings.json and add an entry for ClientSecret with the secret value. The contents of the appsettings.json file should look like this:

    {
    "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": "*"
    }
    

Edit the app

To enable calls to Dataverse, you must edit three files in the application:

  • appsettings.json
  • Program.cs
  • Pages/FetchData.razor

appsettings.json

There are several places in the other files that require a reference to the base uri used to access the Dataverse Web API. Adding this data to the appsettings.json allows you to set this data in one place.

Add the following below "AllowedHosts": "*" where <your org> represents the base url to access the Dataverse Web API. If you aren't sure what this is, see Web API URL and versions.

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

Note

Make sure to :

  • Add the comma after "AllowedHosts": "*" so that the JSON is valid.
  • End the BaseUri value with "/".

Program.cs

  1. To access the value of the Web API base URI in the settings, add the line below commented with // Get BaseUri from appsettings.json in the Main method below the line:
    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. Add the following two lines below the line:
    .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();
    

Pages/FetchData.razor

The default Pages/FetchData.razor component retrieves some weather forecast data. We're going to replace this completely.

Copy the following code and replace all the code in 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; }
    }

}

Run the program

The application is now ready.

  1. Press F5 to run the program. The first time the program runs you should see this consent dialog:

    Consent dialog

  2. Select Accept.

  3. Select Fetch data.

    The output should look like this:

    final result

Congratulations! You have successfully connected to the Web API.

This quickstart shows a simple approach to create a Blazor Server web application that connects to data in Dataverse.

Learn more about Dataverse Web API capabilities by understanding the service documents.

See Also

Tutorial: Create an ASP.NET Core Blazor WebAssembly App using Dataverse
Tutorial: Create a Blazor Server app that uses the Microsoft identity platform for authentication