Cara Membuat Halaman Login yang Aman dengan Blazor dan IAM.BlazorUI

14 May 2026 admin@iamsoft.co.id

Halaman login aman menggunakan Blazor dan IAM.BlazorUI dengan desain modern dan JWT Authentication

Pendahuluan

Halaman login merupakan salah satu bagian paling penting dalam sebuah aplikasi modern. Hampir semua aplikasi berbasis web membutuhkan autentikasi untuk memastikan bahwa hanya pengguna yang memiliki izin yang dapat mengakses sistem.

Namun sayangnya, banyak developer hanya fokus pada tampilan login tanpa memperhatikan aspek keamanan. Padahal halaman login adalah target utama berbagai serangan seperti:

Brute force attack
Credential stuffing
SQL Injection
Session hijacking
Password spraying
Cross Site Scripting (XSS)
CSRF
Token theft
Man in the middle attack

Jika halaman login tidak dirancang dengan benar, maka seluruh sistem dapat menjadi rentan.

Pada artikel ini kita akan membahas secara lengkap bagaimana cara membuat halaman login yang aman menggunakan:

Blazor
ASP.NET Core
JWT Authentication
HTTPS
Hashing password
Validasi input
Session management
IAM.BlazorUI

Selain fokus pada keamanan, kita juga akan membuat desain login modern menggunakan komponen IAMLogin Form dari IAM.BlazorUI sehingga proses pengembangan UI menjadi jauh lebih cepat dan profesional.

Artikel ini dirancang untuk developer beginner hingga enterprise.

Mengapa Keamanan Login Sangat Penting?

Banyak kebocoran data besar terjadi karena sistem autentikasi yang lemah.

Beberapa kesalahan umum developer:

Menyimpan password tanpa hashing
Tidak menggunakan HTTPS
Login tanpa rate limiting
Tidak memiliki proteksi brute force
Session tidak aman
JWT tanpa expiration
Tidak memvalidasi input
Menampilkan pesan error terlalu detail

Dampaknya bisa sangat serius:

Data pengguna dicuri
Account takeover
Kebocoran informasi sensitif
Server digunakan untuk aktivitas ilegal
Kerusakan reputasi perusahaan
Kerugian finansial

Karena itu keamanan login harus dianggap sebagai prioritas utama.

Teknologi yang Digunakan

Dalam tutorial ini kita akan menggunakan:

Teknologi	Fungsi
Blazor	Frontend Framework
ASP.NET Core	Backend API
JWT	Authentication Token
IAM.BlazorUI	UI Component
SQL Server	Database
BCrypt	Hashing Password
HTTPS	Secure Connection

Mengenal IAM.BlazorUI

IAM.BlazorUI adalah library komponen UI modern untuk Blazor yang membantu developer membuat tampilan profesional dengan lebih cepat.

Salah satu komponen yang sangat membantu untuk autentikasi adalah:

IAMLogin Form

Komponen ini membantu developer membuat:

Halaman login modern
Responsive login form
Input username/password
Validasi tampilan
Loading state
Remember me
Error message
Theme modern

Tanpa harus menulis CSS dari nol.

Keuntungan menggunakan IAM.BlazorUI:

Menghemat waktu development
Tampilan lebih profesional
Konsisten
Responsive
Mudah dikustomisasi
Cocok untuk enterprise application

Membuat Database User

Pertama kita buat tabel user.

CREATE TABLE Users

(

Id INT PRIMARY KEY IDENTITY,

Username NVARCHAR(100),

Email NVARCHAR(200),

PasswordHash NVARCHAR(MAX),

IsActive BIT,

CreatedAt DATETIME,

LastLogin DATETIME

)

Jangan pernah menyimpan password asli.

Password wajib di-hash.

Mengapa Password Harus di-Hash?

Hashing adalah proses mengubah password menjadi string terenkripsi satu arah.

Contoh:

Password Asli:

admin123

Hash:

$2a$11$wR2Z1uY8lT5.....

Jika database bocor, attacker tidak langsung mengetahui password pengguna.

Menggunakan BCrypt untuk Hash Password

Install package:

dotnet add package BCrypt.Net-Next

Hash password:

string password = "admin123";

string hash = BCrypt.Net.BCrypt.HashPassword(password);

Verifikasi:

bool valid = BCrypt.Net.BCrypt.Verify(password, hash);

BCrypt jauh lebih aman dibanding:

MD5
SHA1
SHA256 tanpa salt

Karena BCrypt memiliki:

Salt otomatis
Adaptive hashing
Lebih tahan brute force

Membuat Model Login

public class LoginModel

{

public string Username { get; set; } = "";

public string Password { get; set; } = "";

public bool RememberMe { get; set; }

}

Membuat Halaman Login Menggunakan IAMLogin Form

Berikut contoh implementasi modern.

@page "/login"

<IAMLoginForm

Title="Secure Login"

Subtitle="Masuk ke sistem Anda"

Logo="images/logo.png"

UsernamePlaceholder="Masukkan username"

PasswordPlaceholder="Masukkan password"

RememberMe="true"

ForgotPassword="true"

ButtonText="Login"

OnLogin="HandleLogin">

</IAMLoginForm>

Dengan komponen ini developer tidak perlu membuat:

layout login
responsive form
alignment
icon
styling button
spacing
animation
modern card design

Karena semuanya sudah tersedia.

Membuat Tampilan Login Lebih Profesional

Tips desain login modern:

Gunakan:

clean design
warna tidak berlebihan
white space cukup
font modern
logo perusahaan
loading animation
feedback error jelas

Hindari:

terlalu banyak warna
background terlalu ramai
popup berlebihan
error terlalu detail

Membuat API Login

Contoh endpoint login:

[HttpPost("login")]

public async Task<IActionResult> Login(LoginModel model)

{

var user = await _db.Users

.FirstOrDefaultAsync(x =>

x.Username == model.Username);

if (user == null)

return Unauthorized("Username atau password salah");

bool valid = BCrypt.Net.BCrypt.Verify(

model.Password,

user.PasswordHash);

if (!valid)

return Unauthorized("Username atau password salah");

var token = GenerateJwtToken(user);

return Ok(token);

}

Perhatikan:

Jangan pernah memberi tahu:

username salah
password salah

Gunakan pesan umum:

Username atau password salah

Ini penting untuk mencegah username enumeration.

Mengapa Username Enumeration Berbahaya?

Jika sistem memberi pesan:

Username tidak ditemukan

Maka attacker bisa mengetahui username valid.

Lalu attacker tinggal mencoba password.

Karena itu gunakan pesan generik.

Membuat JWT Authentication

JWT adalah metode autentikasi modern.

JWT menyimpan informasi user dalam token terenkripsi.

Contoh:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Konfigurasi JWT

AppSettings:

"Jwt": {

"Key": "SUPER_SECRET_KEY_123456",

"Issuer": "IAMSecureApp",

"Audience": "IAMSecureAppUser"

}

Generate JWT Token

private string GenerateJwtToken(User user)

{

var key = new SymmetricSecurityKey(

Encoding.UTF8.GetBytes(_config["Jwt:Key"]!));

var creds = new SigningCredentials(

key,

SecurityAlgorithms.HmacSha256);

var claims = new[]

{

new Claim(ClaimTypes.Name, user.Username),

new Claim(ClaimTypes.Email, user.Email)

};

var token = new JwtSecurityToken(

issuer: _config["Jwt:Issuer"],

audience: _config["Jwt:Audience"],

claims: claims,

expires: DateTime.Now.AddHours(2),

signingCredentials: creds);

return new JwtSecurityTokenHandler()

.WriteToken(token);

}

Mengapa JWT Expiration Penting?

Tanpa expiration:

token bisa digunakan selamanya
berbahaya jika token dicuri

Gunakan masa aktif:

15 menit
1 jam
2 jam

Tergantung kebutuhan.

Menggunakan HTTPS

HTTPS wajib digunakan.

Tanpa HTTPS:

password bisa disadap
token bisa dicuri
session bisa dibajak

Aktifkan HTTPS:

app.UseHttpsRedirection();

Gunakan SSL dari:

Let's Encrypt
Cloudflare
DigiCert

Mengapa HTTP Sangat Berbahaya?

Jika menggunakan HTTP biasa:

Data dikirim dalam bentuk plain text.

Attacker di jaringan yang sama dapat melihat:

username
password
token
cookie

Karena itu HTTPS adalah keharusan.

Menambahkan Rate Limiting

Rate limiting membantu mencegah brute force attack.

Contoh:

maksimal 5 login gagal
dalam 1 menit

ASP.NET Core .NET 8 sudah mendukung rate limiting.

builder.Services.AddRateLimiter(options =>

{

options.AddFixedWindowLimiter("login", opt =>

{

opt.PermitLimit = 5;

opt.Window = TimeSpan.FromMinutes(1);

});

Gunakan:

app.UseRateLimiter();

Mengapa Brute Force Sangat Berbahaya?

Brute force adalah serangan mencoba password berulang.

Contoh:

admin123

123456

password

qwerty

Tanpa rate limiting attacker bisa mencoba jutaan kombinasi.

Menambahkan Account Lockout

Jika login gagal berkali-kali:

account dikunci sementara
misalnya 15 menit

Contoh:

if(user.FailedLogin >= 5)

{

user.LockedUntil = DateTime.UtcNow.AddMinutes(15);

}

Fungsi ini sangat lah penting untuk menghindari orang lain mencoba masuk menggunakan kredensial yang bukan miliknya.

Semoga bermanfaat.

Konsultasi Gratis