Tech Seeker

In this article, we will understand steps to integrate google authentication from scratch manually into the Blazor WebAssembly standalone application.  Part-1  google authentication steps by default bundled with blazor webassembly application on selecting the authentication checkbox while creating the project. But here we will inject the authentication into the project that is not previously enabled with authentication. Create Blazor WebAssembly Project: Let's create a Blazor WebAssembly project without checking the authentication. Install Authentication NuGet: Package Manager: Install-Package Microsoft.AspNetCore.Components.WebAssembly.Authentication -Version 5.0.5 .Net CLI: dotnet add package Microsoft.AspNetCore.Components.WebAssembly.Authentication --version 5.0.5 Register Blazor Application In Google API's Console: Step1:  Create an account in Google API's Console(https://console.cloud.google.com/apis/dashboard). Step2: Select the 'Credentials' menu and

Part-1  implemented sample to work with Google authentication into a Blazor WebAssembly standalone application. Now in this article, we will create user records into our database on users authenticated into our application using a Google account. Also, create a custom JWT for our secured endpoint. Because token given by google for our blazor web assembly application can't be used against our own secured endpoint. So while saving the user record into our database we will also generate the JWT token. Configure Email Scope: By default, the Blazor WebAssembly template requests scope like 'openid', 'profile'. Now we have to add one more additional scope like 'email'. If you observe after login with a google account, the user email is not sent by google as a claim to our blazor application. So to add user record we should have the email address, so for that let's add a new scope like 'email', which will give us user email address as one of the claim

In this article, using the MudBlazor UI component we will implement a CRUD sample in Blazor WebAssembly. Create A Blazor WebAssembly Sample Application: To accomplish our goal let's create a sample Blazor WebAssembly application. Install MudBlazor Package: Package Manager: Install-Package MudBlazor -Version 5.0.7 .Net CLI dotnet add package MudBlazor --version 5.0.7 MudBlazor Setup: Add Mudblazor namespace into the '_Imports.razor' _Imports.razor: @using MudBlazor Add the below CSS files inside of the head tag in 'index.html'. wwwroot/index.html: <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> Remove the CSS files like 'bootstrap.min.css' and '{your_applicationname}.style.css'. Add MudBlazor javascript file in 'index.html' just above the closing bod

CQRS stands for Command Query Responsibility Segregation. CQRS guides us to separate our logical implementations into 2 categories like 'Commands', 'Query'. The 'Commands' specifies the operations like creation or updating of data into the data source(database). The 'Query' specifies the operations to fetch the data. In CQRS models(Request/Response classes) are independent or owned by a single operation, which means model classes can not be shared between the different 'Commands' or different 'Queries' or between a 'Command' and 'Query'. From the diagram one thing to observe Request/Response model(optional), that's because some times we will use query parameters or return a simple scalar type in those cases we won't create models. Create .Net5 Web API: To implement the CQRS pattern let's create a sample .Net5 Web API application. Configure Entity Framework Core Database Context: For this demo, I had created