{"id":12697,"date":"2025-01-21T14:45:59","date_gmt":"2025-01-21T14:45:59","guid":{"rendered":"https:\/\/myprojects.advchaweb.com\/?p=12697"},"modified":"2025-01-21T15:57:44","modified_gmt":"2025-01-21T15:57:44","slug":"create-a-login-app-with-asp-net-on-ubuntu-22-04","status":"publish","type":"post","link":"https:\/\/myprojects.advchaweb.com\/index.php\/2025\/01\/21\/create-a-login-app-with-asp-net-on-ubuntu-22-04\/","title":{"rendered":"Create a Login App with ASP.NET on Ubuntu 22.04"},"content":{"rendered":"

Here’s a step-by-step guide to create a simple login form using ASP.NET Core (C#) and MS SQL Server with VS Code and Linux:<\/p>\n

    \n
  1. Install .NET SDK If you haven’t already, install the .NET SDK for your Linux distribution. You can find instructions on the official Microsoft website.check your dotnet version
    \n[codesyntax lang=”bash”]<\/p>\n
    dotnet --version\r\n8.0.405<\/pre>\n
    [\/codesyntax]<\/li>\n
  2. Create a new ASP.NET Core project Open a terminal and run:\n
    dotnet new mvc -n LoginApp<\/code><\/pre>\n
    [codesyntax lang=”bash”]<\/p>\n
    satria@teddy:~\/Documents\/projects\/aspnet$ dotnet new mvc -n LoginApp\r\nThe template \"ASP.NET Core Web App (Model-View-Controller)\" was created successfully.\r\nThis template contains technologies from parties other than Microsoft, see https:\/\/aka.ms\/aspnetcore\/8.0-third-party-notices for details.\r\n\r\nProcessing post-creation actions...\r\nRestoring \/home\/satria\/Documents\/projects\/aspnet\/LoginApp\/LoginApp.csproj:\r\n  Determining projects to restore...\r\n  Restored \/home\/satria\/Documents\/projects\/aspnet\/LoginApp\/LoginApp.csproj (in 83 ms).\r\nRestore succeeded.<\/pre>\n
    [\/codesyntax]<\/p>\n
    Go to the project directory ‘LoginApp’ with ‘cd LoginApp’<\/li>\n
  3. Install required NuGet packages Run the following commands:
    \n[codesyntax lang=”bash”]<\/p>\n
    dotnet add package Microsoft.EntityFrameworkCore.SqlServer\r\ndotnet add package Microsoft.EntityFrameworkCore.Design\r\ndotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore\r\n<\/pre>\n
    [\/codesyntax]<\/p>\n
    Make sure the version is match in LoginApp.csproj
    \n[codesyntax lang=”csharp”]<\/p>\n
    <ItemGroup>\r\n    <PackageReference Include=\"Microsoft.AspNetCore.Identity.EntityFrameworkCore\" Version=\"8.0.0\" \/>\r\n    <PackageReference Include=\"Microsoft.EntityFrameworkCore.SqlServer\" Version=\"8.0.0\" \/>\r\n    <PackageReference Include=\"Microsoft.EntityFrameworkCore.Design\" Version=\"8.0.0\">\r\n      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive<\/IncludeAssets>\r\n      <PrivateAssets>all<\/PrivateAssets>\r\n    <\/PackageReference>\r\n  <\/ItemGroup><\/pre>\n
    [\/codesyntax]<\/li>\n
  4. Set up the database connection Open\u00a0appsettings.json<\/code>\u00a0and add the connection string:
    \n[codesyntax lang=”text”]<\/p>\n
    \"ConnectionStrings\": {\r\n    \"DefaultConnection\": \"Server=localhost;Database=LoginApp;User Id=your_username;Password=your_password;TrustServerCertificate=True;\"\r\n  },<\/pre>\n
    [\/codesyntax]
    \nNote: I need to add ‘TrustServerCertificate=True;’<\/li>\n
  5. Create ApplicationDbContext Create a new file\u00a0ApplicationDbContext.cs<\/code>
    \n[codesyntax lang=”csharp”]<\/p>\n
    using Microsoft.AspNetCore.Identity.EntityFrameworkCore;\r\nusing Microsoft.EntityFrameworkCore;\r\n\r\nnamespace LoginApp\r\n{\r\n    public class ApplicationDbContext : IdentityDbContext\r\n    {\r\n        public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)\r\n            : base(options)\r\n        {\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
    [\/codesyntax]<\/li>\n
  6. Update Program.cs Replace the content of\u00a0Program.cs<\/code>:
    \n[codesyntax lang=”csharp”]<\/p>\n
    using LoginApp;\r\nusing Microsoft.AspNetCore.Identity;\r\nusing Microsoft.EntityFrameworkCore;\r\n\r\nvar builder = WebApplication.CreateBuilder(args);\r\n\r\n\/\/ Add services to the container.\r\nbuilder.Services.AddControllersWithViews();\r\n\r\nbuilder.Services.AddDbContext<ApplicationDbContext>(options =>\r\n    options.UseSqlServer(builder.Configuration.GetConnectionString(\"DefaultConnection\")));\r\n\r\nbuilder.Services.AddIdentity<IdentityUser, IdentityRole>()\r\n    .AddEntityFrameworkStores<ApplicationDbContext>();\r\n\r\nvar app = builder.Build();\r\n\r\n\/\/ Configure the HTTP request pipeline.\r\nif (!app.Environment.IsDevelopment())\r\n{\r\n    app.UseExceptionHandler(\"\/Home\/Error\");\r\n    app.UseHsts();\r\n}\r\n\r\napp.UseHttpsRedirection();\r\napp.UseStaticFiles();\r\n\r\napp.UseRouting();\r\n\r\napp.UseAuthentication();\r\napp.UseAuthorization();\r\n\r\napp.MapControllerRoute(\r\n    name: \"default\",\r\n    pattern: \"{controller=Home}\/{action=Index}\/{id?}\");\r\n\r\n\/\/ Initialize the database\r\nusing (var scope = app.Services.CreateScope())\r\n{\r\n    var services = scope.ServiceProvider;\r\n    try\r\n    {\r\n        var context = services.GetRequiredService<ApplicationDbContext>();\r\n        context.Database.EnsureCreated();\r\n        await DbInitializer.Initialize(services);\r\n    }\r\n    catch (Exception ex)\r\n    {\r\n        var logger = services.GetRequiredService<ILogger<Program>>();\r\n        logger.LogError(ex, \"An error occurred while seeding the database.\");\r\n    }\r\n}\r\n\r\napp.Run();\r\n<\/pre>\n
    [\/codesyntax]<\/li>\n
  7. Create Login Model Create\u00a0Models\/LoginModel.cs<\/code>:
    \n[codesyntax lang=”csharp”]<\/p>\n
    using System.ComponentModel.DataAnnotations;\r\n\r\nnamespace LoginApp.Models\r\n{\r\n    public class LoginModel\r\n    {\r\n        [Required]\r\n        [EmailAddress]\r\n        public string Email { get; set; } = string.Empty;\r\n\r\n        [Required]\r\n        [DataType(DataType.Password)]\r\n        public string Password { get; set; } = string.Empty;\r\n\r\n        [Display(Name = \"Remember me?\")]\r\n        public bool RememberMe { get; set; }\r\n    }\r\n}\r\n<\/pre>\n
    [\/codesyntax]<\/li>\n
  8. Create Account Controller Create\u00a0Controllers\/AccountController.cs<\/code>:
    \n[codesyntax lang=”csharp”]<\/p>\n
    using LoginApp.Models;\r\nusing Microsoft.AspNetCore.Identity;\r\nusing Microsoft.AspNetCore.Mvc;\r\n\r\nnamespace LoginApp.Controllers\r\n{\r\n    public class AccountController : Controller\r\n    {\r\n        private readonly SignInManager<IdentityUser> _signInManager;\r\n\r\n        public AccountController(SignInManager<IdentityUser> signInManager)\r\n        {\r\n            _signInManager = signInManager;\r\n        }\r\n\r\n        [HttpGet]\r\n        public IActionResult Login()\r\n        {\r\n            return View();\r\n        }\r\n\r\n        [HttpPost]\r\n        public async Task<IActionResult> Login(LoginModel model)\r\n        {\r\n            if (ModelState.IsValid)\r\n            {\r\n                var result = await _signInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, lockoutOnFailure: false);\r\n                if (result.Succeeded)\r\n                {\r\n                    return RedirectToAction(\"Index\", \"Home\");\r\n                }\r\n                ModelState.AddModelError(string.Empty, \"Invalid login attempt.\");\r\n            }\r\n            return View(model);\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
    [\/codesyntax]<\/li>\n
  9. Create Login View Create\u00a0Views\/Account\/Login.cshtml<\/code>:
    \n[codesyntax lang=”html4strict”]<\/p>\n
    @model LoginApp.Models.LoginModel\r\n\r\n<h2>Login<\/h2>\r\n\r\n<form asp-action=\"Login\" method=\"post\">\r\n    <div asp-validation-summary=\"ModelOnly\" class=\"text-danger\"><\/div>\r\n    <div class=\"form-group\">\r\n        <label asp-for=\"Email\"><\/label>\r\n        <input asp-for=\"Email\" class=\"form-control\" \/>\r\n        <span asp-validation-for=\"Email\" class=\"text-danger\"><\/span>\r\n    <\/div>\r\n    <div class=\"form-group\">\r\n        <label asp-for=\"Password\"><\/label>\r\n        <input asp-for=\"Password\" class=\"form-control\" \/>\r\n        <span asp-validation-for=\"Password\" class=\"text-danger\"><\/span>\r\n    <\/div>\r\n    <div class=\"form-group\">\r\n        <div class=\"checkbox\">\r\n            <label>\r\n                <input asp-for=\"RememberMe\" \/> @Html.DisplayNameFor(m => m.RememberMe)\r\n            <\/label>\r\n        <\/div>\r\n    <\/div>\r\n    <button type=\"submit\" class=\"btn btn-primary\">Log in<\/button>\r\n<\/form>\r\n<\/pre>\n
    [\/codesyntax]<\/li>\n
  10. Set up the database. Create a new database ‘LoginApp’<\/li>\n
  11. Add a test user Create\u00a0DbInitializer.cs<\/code>:
    \n[codesyntax lang=”csharp”]<\/p>\n
    using Microsoft.AspNetCore.Identity;\r\n\r\nnamespace LoginApp\r\n{\r\n    public static class DbInitializer\r\n    {\r\n        public static async Task Initialize(IServiceProvider serviceProvider)\r\n        {\r\n            var userManager = serviceProvider.GetRequiredService<UserManager<IdentityUser>>();\r\n\r\n            string email = \"admin@example.com\";\r\n            string password = \"Admin123!\";\r\n\r\n            if (await userManager.FindByEmailAsync(email) == null)\r\n            {\r\n                var user = new IdentityUser { UserName = email, Email = email };\r\n                await userManager.CreateAsync(user, password);\r\n            }\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
    [\/codesyntax]
    \nNote: it’ll create a new dummy user with
    \nemail: admin@example.com
    \npassword: Admin123!<\/li>\n
  12. Run the application Execute:\n
    dotnet run<\/code><\/pre>\n<\/li>\n
  13. Navigate to\u00a0http:\/\/localhost:5000\/Account\/Login<\/code>\u00a0in your browser.
    \n\"\"<\/li>\n
  14. create some navigation menus (login, logout, etc) on the homepage
    \nCreate a new file called\u00a0_NavBar.cshtml<\/code>\u00a0in the\u00a0Views\/Shared<\/code>\u00a0folder with the following content:
    \n[codesyntax lang=”html4strict”]<\/p>\n
    @using Microsoft.AspNetCore.Identity\r\n@inject SignInManager<IdentityUser> SignInManager\r\n@inject UserManager<IdentityUser> UserManager\r\n\r\n<nav class=\"navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3\">\r\n    <div class=\"container\">\r\n        <a class=\"navbar-brand\" asp-area=\"\" asp-controller=\"Home\" asp-action=\"Index\">LoginApp<\/a>\r\n        <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-controls=\"navbarSupportedContent\"\r\n                aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n            <span class=\"navbar-toggler-icon\"><\/span>\r\n        <\/button>\r\n        <div class=\"navbar-collapse collapse d-sm-inline-flex justify-content-between\">\r\n            <ul class=\"navbar-nav flex-grow-1\">\r\n                <li class=\"nav-item\">\r\n                    <a class=\"nav-link text-dark\" asp-area=\"\" asp-controller=\"Home\" asp-action=\"Index\">Home<\/a>\r\n                <\/li>\r\n                @if (SignInManager.IsSignedIn(User))\r\n                {\r\n                    <li class=\"nav-item\">\r\n                        <a class=\"nav-link text-dark\" asp-area=\"\" asp-controller=\"Account\" asp-action=\"Logout\">Logout<\/a>\r\n                    <\/li>\r\n                }\r\n                else\r\n                {\r\n                    <li class=\"nav-item\">\r\n                        <a class=\"nav-link text-dark\" asp-area=\"\" asp-controller=\"Account\" asp-action=\"Login\">Login<\/a>\r\n                    <\/li>\r\n                    <li class=\"nav-item\">\r\n                        <a class=\"nav-link text-dark\" asp-area=\"\" asp-controller=\"Account\" asp-action=\"Register\">Register<\/a>\r\n                    <\/li>\r\n                }\r\n            <\/ul>\r\n        <\/div>\r\n    <\/div>\r\n<\/nav>\r\n<\/pre>\n
    [\/codesyntax]<\/p>\n
    Now, let’s include this partial view in your layout file. Open the\u00a0Views\/Shared\/_Layout.cshtml<\/code>\u00a0file and add the following line just after the opening\u00a0<body><\/code>\u00a0tag:
    \n[codesyntax lang=”html4strict”]<\/p>\n
    <body>\r\n    <partial name=\"_NavBar\" \/>\r\n    <!--header>\r\n        <nav class=\"navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3\">\r\n            <div class=\"container-fluid\">\r\n                <a class=\"navbar-brand\" asp-area=\"\" asp-controller=\"Home\" asp-action=\"Index\">LoginApp<\/a>\r\n                <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\".navbar-collapse\" aria-controls=\"navbarSupportedContent\"\r\n                        aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n                    <span class=\"navbar-toggler-icon\"><\/span>\r\n                <\/button>\r\n                <div class=\"navbar-collapse collapse d-sm-inline-flex justify-content-between\">\r\n                    <ul class=\"navbar-nav flex-grow-1\">\r\n                        <li class=\"nav-item\">\r\n                            <a class=\"nav-link text-dark\" asp-area=\"\" asp-controller=\"Home\" asp-action=\"Index\">Home<\/a>\r\n                        <\/li>\r\n                        <li class=\"nav-item\">\r\n                            <a class=\"nav-link text-dark\" asp-area=\"\" asp-controller=\"Home\" asp-action=\"Privacy\">Privacy<\/a>\r\n                        <\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/nav>\r\n    <\/header-->\r\n    <!-- ... existing content ... -->\r\n<\/body>\r\n<\/pre>\n
    [\/codesyntax]
    \nNote: I need to remove the default <header> tag to use the new partial navbar<\/li>\n
  15. create controller for account logout
    \nmodify Controllers\/AccountController.cs
    \n[codesyntax lang=”csharp”]<\/p>\n
    using LoginApp.Models;\r\nusing Microsoft.AspNetCore.Identity;\r\nusing Microsoft.AspNetCore.Mvc;\r\n\r\nnamespace LoginApp.Controllers\r\n{\r\n    public class AccountController : Controller\r\n    {\r\n        ...\r\n\r\n        [HttpPost]\r\n        public async Task<IActionResult> Login(LoginModel model)\r\n        {\r\n           ...\r\n        }\r\n\r\n        [HttpPost]\r\n        [ValidateAntiForgeryToken]\r\n        public async Task<IActionResult> Logout()\r\n        {\r\n            await _signInManager.SignOutAsync();\r\n            return RedirectToAction(\"Index\", \"Home\");\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
    [\/codesyntax]<\/p>\n
    Now, let’s update the\u00a0_NavBar.cshtml<\/code>\u00a0partial view to use a form for the logout action, as it should be a POST request. Update the logout link in the\u00a0_NavBar.cshtml<\/code>\u00a0file like this:
    \n[codesyntax lang=”html4strict”]<\/p>\n
    \/\/ ... existing code ...\r\n@if (SignInManager.IsSignedIn(User))\r\n{\r\n    <li class=\"nav-item\">\r\n        <form asp-area=\"\" asp-controller=\"Account\" asp-action=\"Logout\" method=\"post\" id=\"logoutForm\" class=\"navbar-right\">\r\n            <button type=\"submit\" class=\"btn btn-link navbar-btn navbar-link\">Logout<\/button>\r\n        <\/form>\r\n    <\/li>\r\n}\r\n\/\/ ... existing code ...\r\n<\/pre>\n
    [\/codesyntax]
    \nat the end of this file, add this javascript
    \n[codesyntax lang=”html4strict”]<\/p>\n
    <script>\r\n    $(function() {\r\n        $('#logoutForm').on('click', function(e) {\r\n            e.preventDefault();\r\n            $(this).submit();\r\n        });\r\n    });\r\n<\/script><\/pre>\n
    [\/codesyntax]<\/li>\n
  16. Add controller for registration and forgot password?<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Here’s a step-by-step guide to create a simple login form using ASP.NET Core (C#) and MS SQL Server with VS Code and Linux: Install .NET SDK If you haven’t already, install the .NET SDK for your Linux distribution. You can find instructions on the official Microsoft website.check your dotnet version [codesyntax lang=”bash”] dotnet –version 8.0.405 … Continue reading “Create a Login App with ASP.NET on Ubuntu 22.04”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[92,80,17,132],"tags":[],"class_list":["post-12697","post","type-post","status-publish","format-standard","hentry","category-asp-net","category-c-3","category-ubuntu","category-ubuntu-22-04"],"_links":{"self":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/12697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/comments?post=12697"}],"version-history":[{"count":8,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/12697\/revisions"}],"predecessor-version":[{"id":12706,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/12697\/revisions\/12706"}],"wp:attachment":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/media?parent=12697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/categories?post=12697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/tags?post=12697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}