Posts

Sharing Code and Resources (Part 3)

By Ashwin Venugopal -
Image
  Adding Static Files Blazor has the capability to utilize static files like images, CSS, and JavaScript. By placing our files in the wwwroot folder, they will be automatically available online and reachable from the main directory of our website. One advantage of Blazor is that we can also accomplish this with a library, making it incredibly simple to share static files through a library. Blazor ultimately relies on HTML, which can be styled with CSS. As noted earlier, the default Blazor templates utilize Bootstrap, and we will also stick with that. You can find a fantastic website featuring user-friendly Bootstrap themes that are available for download at https://bootswatch.com/ . CSS versus LESS versus SASS CSS represents Cascading Style Sheets, which allows you to apply styles to the appearance of your website. LESS denotes Leaner Style Sheets and builds upon CSS. SASS, or Syntactically Awesome Style Sheets, functions similarly to LESS. SASS requires less coding and is simpler...
Post a Comment
Read more

Sharing Code and Resources (Part 2)

By Ashwin Venugopal -
Image
  Cleaning Up The Shared Files Let's make sure the moved files have matching namespaces: In the MyBlog.Shared project, change the namespace to MyBlog.Shared . Components on the following files- Components/BootstrapFieldCssClassProvider.cs Components/ CustomCssClassProvider.cs Remove @using MyBlogServerSide.Components from the following files- Pages/Admin/BlogPostEdit.razor Pages/Admin/BlogPostList.razor Pages/Admin/CategoryList.razor Pages/Admin/TagList.razor In the MyBlog.Shared project, add the following namespaces to the _Imports.razor file - @using MyBlog.Shared @using MyBlog.Shared.Components We have cleaned up a couple of new projects. Adding The API Perform the following steps: In the MyBlogWebAssembly.Client project, open Program.cs and add the following- builder.Services.AddScoped <IMyBlogApi>; MyBlogApiClientSide >(); Add the following namespaces at the top of the file- using MyBlog.Data; using MyBlog.Data.Interfaces; Delete the Pages/Index.razor file (sin...
Post a Comment
Read more

Sharing Code and Resources (Part 1)

By Ashwin Venugopal -
Image
  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...
Post a Comment
Read more

Authentication And Authorization (Part 3)

By Ashwin Venugopal -
Image
  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...
Post a Comment
Read more

Authentication And Authorization (Part 2)

By Ashwin Venugopal -
Image
  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...
Post a Comment
Read more

Authentication And Authorization (Part 1)

By Ashwin Venugopal -
Image
  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...
Post a Comment
Read more

Creating An API (Part 2)

By Ashwin Venugopal -
Image
  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...
Post a Comment
Read more