Skip to main content

Posts

Showing posts with the label Blazor-Technology

Part-2 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Create API Project

The main objectives of this article are: Create .NET7 API Project Install Entity Framework Core Package Setup Database Context Create A .NET7 Web API Project: Let's create a sample .Net 7 API application to accomplish our demo. (Step 1) (Step 2) (Step 3) (Step 4) Install Entity Framework Core NuGet Package: Let's install the entity framework core package. Let's install the entity framework core SQL NuGet package. SQL Connection String: Let's prepare the SQL connection string. Sample SQL Connection String: Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=MyWorldDB;Integrated Security=True;Connect Timeout=30 Data Source - SQL server name. Initial Catalog - Database name Integrated Security -windows authentication. Connect Time -connection time period. Let's configure the connection string in 'appsettings.Development.json'. appsettings.Development.json: "ConnectionStrings": { "MyWorldDbConnection": "Data Source=(localdb)\\M

Part-1 | Blazor WebAssembly | .Net7 API | MudBlazor | CRUD - Create Sample SQL Table & MudBlazor Project

The main objectives of this article are: Create A Sample SQL Table. Create Blazor WebAssembly Application Script To Create Sample Table: Let's create a sample table like 'SuperHeroes' by running the following command. CREATE TABLE SuperHeroes ( Id INT IDENTITY(1,1) NOT NULL, Name VARCHAR(200) NULL, Franchise VARCHAR(20) NULL, Gender VARCHAR(20) NULL, ImageURL VARCHAR(1000) NULL CONSTRAINT PK_SuperHeroes PRIMARY KEY (Id) ) Create A Blazor WebAssembly(.NET 7) Application: Let's create a sample Blazor WebAssembly(.NET7) application. To create .NET7 application we can use either 'Visual Studio 2022' or 'Visual Studio Code' editor.  (Step 1) (Step 2) (Step 3) (Step 4) Configure MudBlazor UI Library: Install the MudBlazor NuGet package. Add the MudBlazor namespace in '_Imports.razor'. _Imports.razor: @using MudBlazor Add the below CSS into the closing head tag in 'wwwroot/index.html'. <link href="https://fonts.googleapis.com/css?

Part-5 Blazor WebAssembly Cookie Authentication With Google Account

In this article, we are going to implement Blazor WebAssembly cookie authentication using Google. Part-4 Blazor WebAssembly Cookie Authentication With Microsoft Account Install Google Authentication NuGet In API Project: Let's install the Google Authentication NuGet package into our API Project .NET CLI Command: dotnet add package Microsoft.AspNetCore.Authentication.Google --version 6.0.3 Package Manager: Install-Package Microsoft.AspNetCore.Authentication.Google -Version 6.0.3 Register API With Google: We need to register the API project with Google to enable Google authentication. So following are the registration steps with Google. Step1: Goto  'Google APIs&Services' at 'https://console.cloud.google.com/projectselector2/apis/dashboard' Step2: Click the 'Create Project' button. Stpe3: Now define the project name and then click on the 'Create' button. Step4: On creating a project successfully, we can observe it as a selected project in ou

Part-3 Blazor WebAssembly Cookie Authentication With Twitter

In this article, we are going to implement Blazor WebAssembly cookie authentication with Twitter(external login provider). Click here for Part-2 Blazor WebAssembly Cookie Authentication With Facebook Install Twitter NuGet In API Project: Let's install the Twitter authentication library into the API project. .NET CLI Command: dotnet add package Microsoft.AspNetCore.Authentication.Twitter --version 6.0.3 Package Manager: Install-Package Microsoft.AspNetCore.Authentication.Twitter -Version 6.0.3 Register API With Twitter: To enable twitter authentication to our application we have to register our API with Twitter. So following are steps to register with Twitter. Step1: Register with 'Twitter Developers' section and then navigate to the dashboard page  https://developer.twitter.com/en/portal/dashboard. Step2: Click 'Create Project' on the dashboard page. Step3: Specify Project Name, then click on the 'Next' button. Step4: Select any use case in the dropdo

Part-2 Blazor WebAssembly Cookie Authentication With Facebook

In this article, we are going to implement Blazor WebAssembly cookie authentication with Facebook(external login provider). Click here for - Part-1 Blazor WebAssembly authentication with .net core cookie. Install Facebook NuGet In API Project: Let's install the Microsoft Facebook Authentication package. .NET CLI Command: dotnet add package Microsoft.AspNetCore.Authentication.Facebook --version 6.0.3 Package Manager: Install-Package Microsoft.AspNetCore.Authentication.Facebook -Version 6.0.3 Register API Wih Facebook: To enable Facebook authentication we have to register our API project with Facebook. So following are facebook registration steps. Step1: Go to the Facebook Developer page at "https://developers.facebook.com/apps/". Step2: Go to the 'My Apps' menu and click on the 'Create App' button. Step3: In the 'Create An App' section, choose the 'Consumer' option and then click on the 'Next' button. Step4: In the 'Detail