Hướng dẫn tạo chức năng đăng nhập ứng dụng với Firebase Authentication
Trong quá trình phát triển web, chức năng xác thực người dùng (Đăng ký/Đăng nhập) luôn là một bài toán khó. Nếu tự xây dựng từ đầu (backend tự code), bạn phải đối mặt với nhiều rủi ro về bảo mật như lộ mật khẩu, SQL Injection, hay phải tốn chi phí thuê server để lưu trữ cơ sở dữ liệu.
Firebase Authentication của Google ra đời để giải quyết vấn đề này. Nó là một giải pháp “mì ăn liền” nhưng chất lượng cao, giúp bạn tích hợp hệ thống đăng nhập an toàn chỉ trong vài phút mà không cần viết một dòng code backend nào. Bài viết này sẽ hướng dẫn bạn từng bước xây dựng một hệ thống đăng nhập bằng Email và Mật khẩu sử dụng công nghệ mới nhất của Firebase (SDK v9/v10).
Chúng ta sẽ đi qua 4 bước chính: Thiết lập dự án, Tạo giao diện (HTML), Viết logic (JavaScript), và Kiểm thử.
Bước 1: Khởi tạo “kho chứa” trên Firebase Console
Trước hết, bạn cần đăng ký dịch vụ với Google:
- Truy cập Firebase Console và đăng nhập bằng Gmail.
- Nhấn Create a project, đặt tên dự án (ví dụ:
web-login-basic) và nhấn Continue để tạo. - Chọn biểu tượng Web (
</>) để tạo ứng dụng. Đặt tên App và nhấn Register app. - Lưu ý: Copy đoạn mã
firebaseConfighiện ra màn hình (đây là chìa khóa để web của bạn kết nối với Google). - Vào mục Authentication (bên menu trái) -> Get Started.
- Chọn tab Sign-in method, chọn Email/Password, bật Enable và nhấn Save.
Bước 2: Xây dựng giao diện (File index.html)
Tạo file index.html với hai trạng thái: form đăng nhập (khi chưa vào) và thông tin người dùng (khi đã vào).
HTML
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Đăng nhập Firebase</title>
<style>
body { font-family: sans-serif; max-width: 400px; margin: 50px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; }
input { width: 100%; padding: 10px; margin: 10px 0; box-sizing: border-box; }
button { width: 100%; padding: 10px; background: #007bff; color: white; border: none; cursor: pointer; }
button:hover { background: #0056b3; }
.hidden { display: none; } /* Class dùng để ẩn hiện giao diện */
</style>
</head>
<body>
<h2 style="text-align: center;">Hệ thống Đăng nhập</h2>
<div id="auth-forms">
<input type="email" id="email" placeholder="Email của bạn">
<input type="password" id="password" placeholder="Mật khẩu">
<button id="btn-login">Đăng nhập</button>
<button id="btn-signup" style="background: #28a745; margin-top: 5px;">Đăng ký mới</button>
</div>
<div id="user-info" class="hidden">
<p>Xin chào: <b id="user-email">...</b></p>
<button id="btn-logout" style="background: #dc3545;">Đăng xuất</button>
</div>
<script type="module" src="main.js"></script>
</body>
</html>
Bước 3: Lập trình chức năng (File main.js)
Tạo file main.js. Đây là nơi “phép thuật” xảy ra. Bạn cần thay thế firebaseConfig bằng thông tin của bạn lấy ở Bước 1.
JavaScript
// 1. Nhập khẩu thư viện Firebase từ Google
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
import {
getAuth,
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
onAuthStateChanged,
signOut
} from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
// 2. Cấu hình Firebase (THAY BẰNG MÃ CỦA BẠN)
const firebaseConfig = {
apiKey: "AIzaSyDcx...",
authDomain: "ten-du-an.firebaseapp.com",
projectId: "ten-du-an",
// ... các dòng khác
};
// 3. Khởi chạy ứng dụng
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
// 4. Lấy các thẻ HTML
const emailInput = document.getElementById('email');
const passInput = document.getElementById('password');
const authForms = document.getElementById('auth-forms');
const userInfo = document.getElementById('user-info');
const userEmailDisplay = document.getElementById('user-email');
// 5. Chức năng Đăng ký
document.getElementById('btn-signup').addEventListener('click', async () => {
try {
await createUserWithEmailAndPassword(auth, emailInput.value, passInput.value);
alert("Đăng ký thành công!");
} catch (err) { alert("Lỗi: " + err.message); }
});
// 6. Chức năng Đăng nhập
document.getElementById('btn-login').addEventListener('click', async () => {
try {
await signInWithEmailAndPassword(auth, emailInput.value, passInput.value);
alert("Đăng nhập thành công!");
} catch (err) { alert("Lỗi: " + err.message); }
});
// 7. Chức năng Đăng xuất
document.getElementById('btn-logout').addEventListener('click', async () => {
await signOut(auth);
});
// 8. Tự động kiểm tra trạng thái đăng nhập (Quan trọng)
onAuthStateChanged(auth, (user) => {
if (user) {
// Nếu có user => Ẩn form nhập, hiện thông tin
authForms.classList.add('hidden');
userInfo.classList.remove('hidden');
userEmailDisplay.textContent = user.email;
} else {
// Nếu không có user => Hiện form nhập, ẩn thông tin
authForms.classList.remove('hidden');
userInfo.classList.add('hidden');
}
});
Bước 4: Chạy thử
Vì lý do bảo mật, trình duyệt thường chặn các module JavaScript nếu bạn mở trực tiếp file HTML từ ổ cứng (file://). Bạn cần dùng Live Server (trên VS Code) hoặc một localhost đơn giản để chạy trang web này.
Như vậy, chỉ với một vài thao tác thiết lập và chưa đầy 100 dòng mã lệnh, bạn đã sở hữu một hệ thống xác thực người dùng hoàn chỉnh, bảo mật và miễn phí. Firebase Authentication giúp bạn trút bỏ gánh nặng quản lý server để tập trung hoàn toàn vào trải nghiệm người dùng trên giao diện.
Từ nền tảng cơ bản này, bạn có thể dễ dàng mở rộng thêm các tính năng nâng cao như:
- Đăng nhập bằng Google, Facebook, GitHub.
- Lưu trữ thông tin cá nhân (Họ tên, ngày sinh, điểm số) vào Firebase Firestore.
- Phân quyền người dùng (Admin vs User thường).
Hy vọng hướng dẫn này giúp ích cho bạn trong việc bắt đầu với Firebase. Chúc bạn thực hiện thành công dự án của mình!