Blast Off with Blazor: Integrate Cosmos DB With Blazor WebAssembly

So far in our series, we’ve  walked through the intro,  wrote our first component,  dynamically updated the HTML head from a component, and  isolated our service dependencies.

It’s time to address the elephant in the room—why is the image loading so slow?

There’s a few reasons for that. First, we have to wait for the app to load when we refresh the page–and with Blazor WebAssembly, we’re waiting for the .NET runtime to load. On top of that, we’re calling off to a REST API, getting the image source, and sending that to our view. That’s not incredibly efficient.

In this post, we’re going to correct both issues. We’ll first move the Image component to its own page, then we’re going to use a persistence layer to store and work with our images. This includes hosting our images on Azure Storage and accessing its details using the Azure Cosmos DB serverless offering. This will only help us as we’ll create components to search on and filter our data.

This post contains the following content.

• Move our Image component to its own page
• Create a new Home component
• Integrate Cosmos DB with our application
• Update the API
• Update the client app
• Update our tests
• Wrap up

#webassembly #blazor

What is GEEK

Buddha Community

CRUD App Using Blazor And Entity Framework Core in ASP.NET Core

https://youtu.be/5xG9J6OqdV8

#blazor #blazor tutorial #blazor in c# #blazor crud #blazor webassembly #blazor with asp.net core

CRUD App Using Blazor And Entity Framework Core in ASP.NET Core

https://youtu.be/5xG9J6OqdV8

#blazor #blazor in c# #blazor tutorial #blazor webassembly #blazor crud #blazor with asp.net core

Blast Off with Blazor: Integrate Cosmos DB With Blazor WebAssembly

So far in our series, we’ve  walked through the intro,  wrote our first component,  dynamically updated the HTML head from a component, and  isolated our service dependencies.

It’s time to address the elephant in the room—why is the image loading so slow?

There’s a few reasons for that. First, we have to wait for the app to load when we refresh the page–and with Blazor WebAssembly, we’re waiting for the .NET runtime to load. On top of that, we’re calling off to a REST API, getting the image source, and sending that to our view. That’s not incredibly efficient.

In this post, we’re going to correct both issues. We’ll first move the Image component to its own page, then we’re going to use a persistence layer to store and work with our images. This includes hosting our images on Azure Storage and accessing its details using the Azure Cosmos DB serverless offering. This will only help us as we’ll create components to search on and filter our data.

This post contains the following content.

• Move our Image component to its own page
• Create a new Home component
• Integrate Cosmos DB with our application
• Update the API
• Update the client app
• Update our tests
• Wrap up

#webassembly #blazor

Azure AD Secured Serverless Cosmos DB from Blazor WebAssembly

A Blazor 🔥 WebAssembly 🕸 app can be deployed as a set of static website assets and hosted on any server that publishes static files. As a browser application, it is capable of making calls to HTTP API endpoints. As a Single Page Application (SPA) it can render new pages dynamically from the data. Because it supports .NET Standard, it is possible to load NuGet packages that target .NET Standard, including the Cosmos DB 🌍 SDK. This makes it possible to connect to the Azure Cosmos DB SQL API backend directly. There is one major challenge: how can you connect securely without storing credentials in the client and hosting your own identity service?

The solution is to use Azure Active Directory for authentication and communicate securely with a serverless Azure Function. The function app uses securely stored master credentials to connect to Cosmos DB and generate an ephemeral token that grants limited access to a specific user for up to five hours. The client app then connects directly to Cosmos DB using the provided token.

The repository for this solution is at:

 JeremyLikness/AzureBlazorCosmosWasm

The app requires some initial configuration that is explained in this blog post. This post explores how I built the solution and how you can build and configure your own app from the repo.

Blazor WebAssembly and Authentication

The first step is to setup authentication in the Blazor WebAssembly app. I’m no Azure AD expert, so it was extremely helpful to find dedicated documentation on how to use Blazor WebAssembly with Azure AD.

Special thanks to Javier Calvarro Nelson for investing his time to provide guidance for me to properly configure the solution.

I’ll summarize the high-level steps:

1. Register your application in the Azure Active Directory App Registrations. This enables your application to authenticate the user against Azure AD and to make requests on behalf of the user using their identity and credentials.
2. Be sure to note two important components of the app registration: the tenant (or directory) the registration is a part of (this is like the zip code of the Azure AD authentication service) and the client id that uniquely identifies your app (like a postal address).
3. Generate the Blazor WebAssembly app using the built-in Azure AD template:

dotnet new blazorwasm -au SingleOrg --client-id "{CLIENT ID}" --tenant-id "{TENANT ID}"

This will scaffold an application that provides full integration with Azure AD. The document referenced earlier explains what code and components are generated by the authentication template and how they work. To use the sample project for this blog post, start by creating an application registration. After that is setup, update the appsettings.json file under the wwwroot folder in the AzureBlazorWasm project to use your tenant and client. It will look like this:

"AzureAd": {
    "Authority": "https://login.microsoftonline.com/{directory id}",
    "ClientId": "{clientid}",
    "ValidateAuthority": true
  }

This information is stored as part of the client app and is “in the clear” meaning the user can easily access and read it. Fortunately, there are no secrets here. The configuration simply provides the endpoint to request authentication, using your organization’s tenant, and the unique identifier (client id) of your Blazor app. The login process redirects you to Azure AD where you are prompted to login using whatever process was configured for your tenant. This may include two-factor authentication. If authentication succeeds, a signed token is sent back to the Blazor WebAssembly client.

Now you have a secure Blazor client. You can use the [Authorize] attribute on any Razor component to prevent access by unauthorized users. I’ll show you that later in this post.

#azure #serverless #cosmos db #webassembly #ef core #blazor

Blazor : Calling REST API ASP NET Core Blazor | WEB API

#blazor #blazor tutorial #blazor curd #blazor in c# #blazor webassembly