Blogs by Ashwin

  Setting Up The API Only Blazor WebAssembly requires access to the Web API because it lacks direct access to the database. For Blazor Server, it's likely that the most prevalent architecture involves utilizing a Web API as well. We need to transfer the files we can share into a different library. To accomplish this, please follow these steps: Right-click on the MyBlog solution and select Add | New Project. Search for Class Library (.NET Core) and then click Next. Name the project MyBlog.Data.Shared and keep the location as is and then click Create.   Select target framework .NET 5.0 (Current) and then click Create. Right-click on the Dependencies node under the MyBlogWebAssembly.Client project. Click Add project reference, check the MyBlog.Data.Shared and MyBlog.Shared checkboxes, and then click OK. Move the following files from the MyBlog.Data project to MyBlog.Data. Shared: Extension - folder Interfaces - folder Models/BlogPost.cs Models/Category.cs Models/Tag.cs MyBl...

  Adding Authorization We can determine if a user is authenticated, but we also need to know if they have the rights to use a specific feature. This is the essence of authorization. Fortunately, the available built-in functions accommodate this, even if we need to implement some code to achieve it. The server side contains all the tables required to assign roles to our users, but there are currently no user interfaces accessible for this purpose. Adding Roles From The Server Execute the following steps to add roles from the server: In the MyBlogWebAssembly.Server project, open the Startup.cs file. In the ConfigureServices method, add options to .AddApiAuthorization and remove the default claim mapping. Add roles to Services.AddDefaultIdentity . Add the namespace- using Microsoft.AspNetCore.Identity; using System.IdentityModel.Tokens.Jwt; The server will now send the roles over to the client, but the client won't be listening. Adding Roles To The Client For the client to pick up...

  Configuring the Blazor WebAssembly Project The WebAssembly project offers similar functionalities. It is slightly more complex because it also necessitates API authentication. If we opt to include authentication when setting up the project, IdentityServer will be used by default to authenticate both the client and the API. IdentityServer is an open-source initiative that will assist us in managing authentication for both our website and our API. Updating MyBlogWebAssembly.Server Execute the following steps to update the MyBlogWebAssembly.Server project: In the MyBlogWebAssembly.Server project, open Startup.cs. Add the following namespaces- using MyBlog.Data.Models; using Microsoft.AspNetCore.Authentication; Open appsetting.json and add the following just after the first curly brace - "ConnectionStrings": { "MyBlogDB": "Data Source=../../MyBlog.db" }, In the Configure method, just above app.UseEndpoints , add code. The codes need to be between app.UseRou...

  Implementing Authentication There are numerous built-in features related to authentication. We need to implement authentication independently for the Blazor Server project and the Blazor WebAssembly project since they operate in slightly different ways. Adding Tables To The Database To be able to add authentication, we need to add the necessary tables to our database. This can be done via Entity Framework: In the MyBlog.Data project , we need to add a couple of NuGet packages. Right click on Dependencies and select Manage NuGet Packages. Search for Microsoft.AspNetCore.Identity.EntityFrameworkCore and click Install. Search for Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore and click Install. We also need to add IdentityServer . Search for Microsoft.AspNetCore. ApiAuthorization.IdentityServer and click Install. Open the MyBlogDbContext.cs file . Change the code so that MyBlogDbContext inherits from ApiAuthorizationDbContext and add a new constructor and overridden OnM...

  Adding The API Controller Execute the following steps to create the API: In the MyBlogWebAssembly.Server project, right-click on the Controllers folder and select Add | Class. Name the file MyBlogApiController.cs .  Add a using statement at the top of the file. Inherit from ControllerBase and add attributes. Now we need to access the data through the server-side API. Add code inside the class we just created. Next, we will add the code to get blog posts. Now, we have created a method that returns the data directly from the database. Let's add the function to get the blog post count. We can use the Get verb but with another route. We also need to be able to get one blog post. Let's add an API that saves a blog post. Next up, we add a method for deleting blog posts. In this case, we use the Delete verb, and also add the Authorize attribute. Next, we need to do this for Categories and Tags as well. We have an API! Now it's time to write the client tha...

  Creating The Service There are numerous methods to develop a service, including REST or possibly gRPC. REST, which stands for REpresentational State Transfer, is essentially a method for computers to communicate with one another using HTTP. In REST, various HTTP verbs are utilized for distinct operations. It could look something like this: URI Verb Action /BlogPosts Get Gets a list of blog posts /BlogPosts Post Creates a new blog post /BlogPosts/{id} Get Gets a blogpost with a specific ID /BlogPosts/{id} Put Replaces a blogpost /BlogPosts/{id} Patch Updates a blogpost /BlogPosts/{id} Delete Deletes a blogpost   This is what we are going to implement for tags, categories, and blog posts. Since the API determines if the post should be created, we ...