Đăng Nhập Google One Tap: Cải Thiện Trải Nghiệm Người Dùng Trong Ứng Dụng
Google One Tap là một công nghệ cho phép người dùng xác thực nhanh chóng chỉ bằng một nút nhấn trên ứng dụng của bạn, sử dụng tài khoản Google. Bài viết này sẽ hướng dẫn bạn cách triển khai tính năng đăng nhập One Tap của Google trong Next.js 14, với backend sử dụng Nest.js mà không cần bất kỳ thư viện bên ngoài nào.
Giới Thiệu
Gần đây, nhóm phát triển của chúng tôi đã tích hợp chức năng đăng nhập One Tap của Google vào ứng dụng Homeei nhằm nâng cao trải nghiệm người dùng. Đây là cơ hội tuyệt vời để chia sẻ cách bạn có thể thực hiện điều tương tự.
Chuẩn Bị
Trước khi bắt đầu, bạn cần đăng ký tài khoản Google Developer và lấy CLIENT_ID cùng CLIENT_SECRET. Bạn có thể tham khảo hướng dẫn chi tiết tại Google Developer. Hãy lưu lại thông tin này để sử dụng trong các bước tiếp theo.
Cài Đặt Project Next.js
Đầu tiên, hãy tạo một project mới bằng công cụ create-next-app:
npx create-next-app@latestTiến hành cấu hình project theo hướng dẫn, chọn các tùy chọn như ESLint, Tailwind CSS, và App Router theo nhu cầu của bạn. Sau khi cài đặt thành công, hãy tạo một file .env để lưu thông tin của Google Identity với nội dung:
NEXT_PUBLIC_BACKEND_URL=http://localhost:6001/rs/v1
NEXT_PUBLIC_GOOGLE_OAUTH_CLIENT_ID=xxxx-xxxxx.apps.googleusercontent.comThêm đoạn script của Google vào file layout.tsx:
<html lang="en" suppressHydrationWarning>
<head>
<AdSense/>
</head>
<body>
{children}
<Script src="https://accounts.google.com/gsi/client" strategy="beforeInteractive" />
</body>
</html>Tiếp theo, tạo file GoogleOneTapLogin.tsx trong thư mục components với nội dung chi tiết, bao gồm các đoạn mã cho việc xử lý đăng nhập và kết nối với backend.
Cài Đặt Project Nest.js
Khởi tạo ứng dụng bằng Nest.js với lệnh sau:
npm install -g @nestjs/cli
nest new news-appTạo module xác thực và cài đặt các thư viện cần thiết:
nest g module auth
nest g controller auth
nest g service auth
npm install --save @nestjs/jwt @nestjs/passport passport passport-jwt passport-google-one-tapXây Dựng Chức Năng Xác Thực
Tạo file guard và strategy cho Google One Tap, giúp thực hiện xác thực hiệu quả. Trong file controller, thực hiện endpoint cho việc xác thực người dùng bằng Google One Tap. Đảm bảo bạn đã cấu hình môi trường và các thành phần xác thực cần thiết.
Xử Lý Giao Tiếp Giữa Frontend và Backend
Trong file GoogleOneTapLogin.tsx, điều chỉnh đoạn mã để liên kết với backend và xử lý phản hồi từ máy chủ. Lưu lại token sau khi đăng nhập thành công.
Cảm ơn bạn đã theo dõi bài viết! Nếu bạn thấy thông tin hữu ích, hãy để lại một upvote cho chúng tôi. Bạn cũng có thể trải nghiệm ứng dụng tại Homeei để ủng hộ nhóm phát triển của chúng tôi.
Lưu ý: Nếu cửa sổ pop-up One Tap không xuất hiện, hãy kiểm tra cài đặt "Third-party sign-in" trên trình duyệt của bạn. Truy cập vào chrome://settings/content/federatedIdentityApi để điều chỉnh cài đặt.
Tài Liệu Tham Khảo
- Cách triển khai đăng nhập Google One Tap trong Next.js
source: viblo
