Skip to main content

Posts

Part-4 | Asp.Net Core Identity Series[.NET 7] | Sending Two-Factor Authentication(2FA) Code To Phone

The main objectives of this article are: Sending Two-Factor Authentication(2FA) Code to Phone Enable Phone 2FA: In the Asp.Net Core Identity application to enable 'Phone' Two-Factor Authentication, ensure our 'AspNetUser' table following fields has appropriate data: PhoneNumber - Should have valid phone number along with country code PhoneNumberConfirmed - must be true TwoFactorEnabled - must be true Twilio Setup: Twilio is a third-party service provider which provides services like SMS, Voice Calls, Chats, etc. (Step 1) Go to the Twilio website 'https://www.twilio.com/' and SignUp. (Step 2) Now Login => We entered into the Twilio console dashboard => Here create a project and you will get 'Account SID', 'Auth Token', and 'My Twilio Phone Number(which will be our From Phone Number). (Step 3) I'm going to use the Free credits to set up the SMS service. So here is one limitation with free credits we have to register all testing &

Part-3 | Asp.Net Core Identity Series[.NET 7] | Sending Two-Factor Authentication(2FA) Code To Email

The main objectives of this article are: Sending Two-Factor Authentication(2FA) Code To Email Enable Email 2FA: In Asp.Net Core Identity application to enable email Two-Factor Authentication, make sure our 'AspNetUser' table following fields has appropriate data: Email - Should not be empty or null EmailConfrimed - must be true TwoFactorEnabled - must be true. Now if we try to login into our application we can see a page to enter the 2FA code like below Send Two-Factor Authentication(2FA) Code To Email: Now let's update the code in 'OnGetAsync()' method in 'Areas/Identity/Pages/Account/LoginWith2faModel.cshtml.cs' as below. Areas/Identity/Pages/Account/LoginWith2faModel.cshtml.cs: public async Task<IActionResult> OnGetAsync(bool rememberMe, string returnUrl = null) { // Ensure the user has gone through the username & password screen first var user = await _signInManager.GetTwoFactorAuthenticationUserAsync(); if (user == null) { throw ne

Part-2 | Asp.Net Core Identity Series[.NET 7] | Registration Email Confirmation

The main objectives of this article are: Use SendGrid Email Service. Implement Email Confirmation For User Registration Send Grid: SendGrid is a third-party email provider from which we deal with 'send' and 'receive' operations of email to our application. SendGrid SMTP(Simple Mail Transfer Protocol) provider for email transfer. SendGrid also provides SendGrid .Net NuGet package that provides easy configuration to any .NET application. So to use the SendGrid SMTP we need 'Auth Key', 'From Email'. So let's register into SendGrid. The following are the steps to register and generate the API key in SendGrid: (Step 1) Go to SendGrid's official website at 'https://sendgrid.com/'. Next do SingUp. (Step 2) Now login in to the SendGrid website, then under the left-hand side menu go to the 'Settings' ==> 'Sender Authentication'. At 'Single Sender Verification' click on the 'Get Started' button. (Step 3) Let'

Part -1 | Asp.Net Core Identity Series[.NET 7] Introduction & Project Setup

The main objectives of the article are: Introduction On Asp.NET Core Identity Create Razor Page Application(.NET 7) With Asp.Net Core Identity Generate Asp.Net Core Identity Tables Default Registration & Login Asp.Net Core Identity: Asp.Net Core Identity is a built-in login functionality library that supports authentication of all different .NET applications like "MVC", "Razor Pages", "And Blazor Server". Provides rich authentication UI pages which are customizable as well. Adoptable for external authentication providers like 'Google', 'Facebook', 'Outlook', etc. Can be integrated with other authentication like 'IdentityServer4', 'Azure Active Directory', 'Azure Active Directory B2C(Azure AD B2C)'. Create A .NET7 Razor Page Application With Individual Authentication: Let's create .NET7 Razor Page application with individual authentication to accomplish our demo. We can use either Visual Studio 202

Part-7 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example

The main objectives of this article are: Create HTTP Delete Endpoint In API Project. VueJS Application To Invoke The Delete API. Create HTTP Delete Endpoint In API Project: Let's create the HTTP Delete endpoint in the API project. API_Project/Controllers/BeachController.cs: [HttpDelete] [Route("{id:int}")] public async Task<IActionResult> Delete(int id) { var beachToDelete = await _myWorldDbContext.Beach.FindAsync(id); if (beachToDelete == null) { return NotFound(); } _myWorldDbContext.Beach.Remove(beachToDelete); await _myWorldDbContext.SaveChangesAsync(); return Ok(); } (Line: 1)The 'HttpDelete' attribute allows only HTTP delete requests to consume the action method. (Line: 2) The 'Route' attribute is defined where we need to pass the integer 'id' value in the route. (Line: 5) Based on the 'id' value try to fetch the record from the database. (Line: 6-9) Checking whether records exist in the database or not. (Line: 10) U

Part-6 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example

The main objectives of this article are: Create Get By Id Endpoint In API Project. Create An Update Endpoint In The API Project. Create VueJS Component To Display Update Form. Create Get By Id Endpoint In API Project: To update any record, we first need to fetch the record by its 'id'. So let's create a get by 'id' endpoint in our API project. API_Project/Controllers/BeachController.cs: [HttpGet] [Route("{id:int}")] public async Task<IActionResult> Get(int id) { var becahById = await _myWorldDbContext.Beach.Where(_ => _.Id == id) .FirstOrDefaultAsync(); return Ok(becahById); } (Line: 1) Since it is a second HTTP Get action method, so we have to explicitly specify the route. (Line: 2) The route expression '{id:int}' represents 'id' value must be the integer value. (Line: 5) Fetching the record by 'id' from the database. Create An Update Endpoint In The API Project: Let's create the HTTP PUT action method. API_Pr

Part-5 | .NET7 Web API | SQL Database | VueJS(3.0) - Composition API | CRUD Example

The main objectives of this article are: Create HTTP POST Endpoint In API Project. Create VueJS Component With A Form To Add New Item. Create A Post Endpoint Action Method In The API Project: Let's create an HTTP Post action method to save a new record into the database. API_Project/Controllers/BeachController.cs: [HttpPost] public async Task<IActionResult> Post(Beach newBeach) { _myWorldDbContext.Beach.Add(newBeach); await _myWorldDbContext.SaveChangesAsync(); return Ok(newBeach); } (Line: 1) The 'HttpPost' attribute invokes our action method for HTTP Post requests. (Line: 2) Here our action method should receive the item to add as payload data. (Line: 4) Our new record data instance adding to the database context. (Line: 5) The 'SaveChangesAsync()' method inserts the new record into the database. Create An 'AddBeach' Component In VueJS Application: Let's create the new vuejs component like 'AddBeach' in 'src/views/beaches