Hướng Dẫn Đăng Nhập Google trong Express.js Sử Dụng Passport.js

Giới Thiệu

Ngày nay, hầu hết người dùng đều sở hữu tài khoản Google, vì vậy mà nhiều trang web cung cấp tính năng "Đăng Nhập với Google". Tính năng này rất đơn giản và cho phép người dùng đăng nhập chỉ với vài cú nhấp chuột. Trong hướng dẫn này, chúng ta sẽ thiết lập xác thực Google trong ứng dụng Express sử dụng Passport.js.

Tại Sao Chọn Passport.js?

Có nhiều tùy chọn cho đăng nhập xã hội như Auth0, Firebase, và Clerk. Tuy nhiên, Passport.js có những ưu điểm nổi bật sau:

• ✅ Đơn giản và nhẹ nhàng
• ✅ Hỗ trợ nhiều chiến lược (Google, GitHub, Facebook, v.v.)
• ✅ Cung cấp quyền điều khiển thủ công nếu cần thiết

Đó là lý do tại sao Passport.js là lựa chọn tuyệt vời cho xác thực.

🚀 Bắt Đầu Ngay

Phần 1: Lấy Client ID & Client Secret của Google

Để đăng nhập với Google, bạn cần có Client ID và Client Secret (giống như thẻ ID văn phòng để xác thực).

1. Mở Google Cloud Console, tìm kiếm "Tạo Dự Án" và tạo một dự án mới.
2. Đi tới Màn Hình Đồng Ý OAuth và cấu hình nó.
3. Tạo thông tin xác thực → OAuth Client ID.
   • Chọn Web Application
   • Nhập URL chuyển hướng (ví dụ: http://localhost:5000/auth/google/callback)
   • Lưu lại.
4. Sao chép Client ID và Client Secret.

Phần 2: Thiết Lập Express + Passport.js

Bây giờ, chúng ta sẽ tích hợp xác thực Google vào ứng dụng Express.

1. Cài Đặt Các Thư Viện Cần Thiết

npm install passport passport-google-oauth20

2. Cấu Hình Chiến Lược Passport (passport-config.js)

import passport from "passport";
import { Strategy as GoogleStrategy } from "passport-google-oauth20";

passport.use(
  new GoogleStrategy(
    {
      clientID: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      callbackURL: process.env.GOOGLE_CALLBACK_URL,
    },
    function (accessToken, refreshToken, profile, done) {
      return done(null, profile); // trả về thông tin hồ sơ thô
    }
  )
);

export default passport;

3. Khởi Tạo Passport trong Express

import express from "express";
import passport from "./passport-config.js";

const app = express();
app.use(passport.initialize());

4. Thêm Các Đường Dẫn (auth.routes.js)

import { Router } from "express";
import passport from "passport";
import { googleAuth } from "../controllers/auth.controller.js";

const router = Router();

// Đăng nhập với Google
router.get(
  "/google",
  passport.authenticate("google", {
    scope: ["profile", "email"],
    session: false,
  })
);

// Callback Google
router.get(
  "/google/callback",
  passport.authenticate("google", {
    failureRedirect: "/login",
    session: false,
    failureMessage: "Đăng nhập với Google thất bại",
  }),
  googleAuth
);

export default router;

👉 Chúng ta đã thiết lập session: false vì sẽ sử dụng JWT tokens thay vì các phiên trong bộ nhớ.

5. Bộ Điều Khiển Xác Thực Google

export const googleAuth = async (req, res) => {
  const {
    id,
    _json: { name, picture, email },
  } = req.user;

  let user = await userModel.findOne({ googleId: id });

  if (!user) {
    user = await userModel.create({
      name,
      email,
      avatar: picture,
      googleId: id,
    });
  }

  // Tạo token
  const { accessToken, refreshToken } = await generateToken(user);

  return res
    .status(200)
    .cookie("accessToken", accessToken, cookiesOptions)
    .cookie("refreshToken", refreshToken, cookiesOptions)
    .json({
      success: true,
      message: "Người dùng đăng nhập thành công",
      user,
      accessToken,
    });
};

🎯 Kết Luận

Đó là tất cả! 🚀 Bạn đã có xác thực Google hoạt động với Express và Passport.js.

✅ Đã thiết lập Google OAuth trong Cloud Console
✅ Cấu hình chiến lược Passport
✅ Tạo các đường dẫn và bộ điều khiển trong Express
✅ Sử dụng JWT tokens cho xác thực

Bước tiếp theo: Bảo mật các đường dẫn và làm mới token.

Thực Hành Tốt Nhất

• Luôn kiểm tra thông tin người dùng trước khi lưu vào cơ sở dữ liệu.
• Sử dụng HTTPS để bảo mật thông tin truyền tải.

Cạm Bẫy Thường Gặp

• Không kiểm tra profile trong callback có thể dẫn đến lỗi khi người dùng không cung cấp thông tin.
• Không cấu hình đúng redirect URLs có thể gây lỗi trong xác thực.

Mẹo Hiệu Suất

• Sử dụng cache để giảm tải cho server trong quá trình xác thực.

Xử Lý Sự Cố

• Nếu bạn gặp lỗi "Đăng nhập thất bại", hãy kiểm tra lại thông tin Client ID và Client Secret.

Câu Hỏi Thường Gặp

1. Tôi có thể sử dụng Passport.js với các dịch vụ xác thực khác không?
   • Có, Passport.js hỗ trợ nhiều dịch vụ xác thực khác nhau.
2. Có cần thiết phải lưu trữ token không?
   • Có, bạn cần lưu trữ token để xác thực người dùng trong các lần truy cập tiếp theo.

Tài Nguyên Tham Khảo

• Tài liệu Passport.js
• Google Cloud Console