Tech Seeker

In this article, we are going to understand the authorization flow using user roles and claims in the blazor webassembly application. Create A Sample Blazor WebAssembly Application: Let's create a sample blazor webassembly application for our demo. We can use any IDE for the application development but the most recommended is Visual Studio 2019(version 16.8.*) and  Visual Studio Code . Authentication Setup: To implement authorization first user need to be authenticated. So here we will implement some fake user authentication with some roles and claims. For complete authentication, implementation checks my blogs like  Access Token  and  Refresh Token . Package Manager Install-Package Microsoft.AspNetCore.Components.Authorization -Version 5.0.1 .Net CLI dotnet add package Microsoft.AspNetCore.Components.Authorization --Version 5.0.1 A core component of blazor authentication is 'Microsoft.AspNetCore.Components.Authorization.AuthenticationStateProvider', here we going to

In this article, we are going to fetch user public IP Addresses and Geolocation in the blazor webassembly application. Third-Party APIs: The API to get users IP Address endpoint: https://jsonip.com/ Free endpoint, for official docs, visit "https://getjsonip.com/#docs". The API to get users Geolocation based on users IP Address endpoint: http://api.ipstack.com/User_IP?access_key=your_api_key&format=1 This endpoint has pricing subscription plans including the free subscription plan, for official docs, visit: "https://ipstack.com/" Create A Sample Blazor WebAssembly: Let's begin our demo by creating a sample Blazor WebAssembly application. For development, any type of IDE can be used but more recommended are Visual Studio 2019(Version 16.8.* latest that builds .Net5) or  Visual Studio Code . Fetch User IP Address: Now let's create a model that represents the IP Address payload. Models/IPAddress.cs: using System.Text.Json.Serialization; namespace Blwa

InputRadioGroup built-in razor component was introduced from .Net5. This built-in component can be used either in the Blazor Server application or the Blazor WebAssembly application. Create A Blazor WebAssembly Sample Application: Let's create a sample Blazor WebAssembly application in which we are going to implement some samples to understand the InputRadioGroup component. For application development can begin with any type of IDE but the most recommended are Visual Studio 2019(Version 16.8.* only latest can build the .net5 application) or  Visual Studio Code . InputRadioGroup Implementation: Now let's implement a sample to understand the InputRadioGroup. Let's create a form model for binding values. Models/Vehicle.cs: namespace Radio_Group_Sample.Models { public class Vehicle { public string Name { get; set; } } } Here we created a simple model that will be used by the blazor form component 'EditForm'. The property 'Name' will be used by the I

In this article, we will implement the steps to fetch the user IP Address and Geolocation in an angular application. Third-Party APIs: The API to get users IP Address endpoint: https://jsonip.com/ Free endpoint, for official docs, visit "https://getjsonip.com/#docs". The API to get users Geolocation based on users IP Address endpoint: http://api.ipstack.com/User_IP?access_key=your_api_key&format=1 This endpoint has pricing subscription plans including the free subscription plan, for official docs, visit: "https://ipstack.com/" Create An Angular Sample Application: Let's implement an angular sample that will display users' IP Addresses and Geolocation by using third-party APIs. Command To Install Angular CLI:(If not installed on your system previously) npm install -g @angular/cli Angular CLI Command To Create Angular App: ng new your_project_name Command To Run App: ng serve Import HttpClientMoudle: Let's inject the 'HttpClientMoudle

In this article, we will understand the process to generate the HTML to PDF using 'ngx-print' library in Angular. An Overview On ngx-print Library: This library works based on directives. These directives make the printing HTML to PDF very easily with smooth transitions. The key terms of this library are: NgxPrintModule ngxPrint(Directive) printSectionId(Input Property) printTitle(Input Property) printStyle(Input Property) useExistingCss(Input Property) styleSheetFile(Input Property) Create A Sample Angular Application: Let's create a sample angular application where we are going to implement logic to use 'ngx-print' library. Command To Install Angular CLI:(If not installed on your system previously) npm install -g @angular/cli Angular CLI Command To Create Angular App: ng new your_project_name Command To Run App: ng serve Install Print Npm Package: Command To Install Print Package npm install ngx-print After installing the npm package reference will be

In this article, we are going to explore the device detection library 'ngx-device-detector' in the angular application. An Overview On ngx-device-detector Library: This library is useful to identify a browser, device type, request user agent, etc. This library is also compatible with the angular AOT compiler. Library provides us angular injectable service like 'DeviceDetectorService'. This service provides methods like: getDeviceInfo isMobile isTablet isDesktop Create A Sample Angular Application: Let's create a sample angular application to understand the 'ngx-device-detector' library. Command To Install Angular CLI:(If not installed on your system previously) npm install -g @angular/cli Angular CLI Command To Create Angular App: ng new your_project_name Command To Run App: ng serve Install Device Detection Npm Package: Command To Install Device Detection Package npm install ngx-device-detector --save After installing npm package reference will be au

In the  Part-1  we have learned steps to build a VueJS application authentication by using an access token(Jwt token). This is the continuation article, here we are going to understand the steps for implementing refresh token and using access token in the request header to call secured API. NestJS(Nodejs) Todos API: In  Part-1  we discussed steps to set up the Nestjs API. In that API we have a secured endpoint called 'Todos'. In the next step, we are going to consume this 'Todo' API from our angular application. http://localhost:3000/todos Access Token Authorization To Access Secured Endpoint: Now let's try to access the secured endpoint 'todos' mentioned above in our 'Dashboard' page. Now for this todos, we are going to create another module file like 'todo.js'. src/store/modules/todo.js: import axios from 'axios'; const state = () => ({ todos :[] }); const getters = { getAlltodos(state){ state.todos; } }; const

In this article, we are going to understand the steps for JWT(JSON Web Token) authentication. Here our main focus to fetch the JWT access token to make users log into our VueJS 3.0 application. For maintaining user info we will use Vuex state management. JWT Token: JSON Web Token is a digitally signed and secured token for user validation. The jwt is constructed with 3 informative parts: Header Payload Signature Create A VueJS 3.0 Sample Application: Let's begin by creating a VueJS 3.0 sample application. Command To Install Vue CLI Globally On Your System npm install -g @vue/cli Command To Create A Vue App: vue create your_app_name Required NPM Packages: Need to install the Vue routing library to configure routing into our application. Command To Install Vue Router Library(For Vue3.0) npm install vue-router@4 Need to install the Vuex Store library to configure state management to our application Command To Install Vuex Store Library(For Vue3.0) npm install vuex@next Install