Giới Thiệu
Có lẽ bạn đã không ít lần gặp modal đăng nhập Google One Tap mà không biết chức năng của nó. Điều thú vị là modal này giúp bạn hiển thị lựa chọn tài khoản Google và nhanh chóng đăng nhập mà không cần nhập mật khẩu. Bài viết này sẽ giải thích chi tiết về Google One Tap Sign-In và hướng dẫn bạn tích hợp vào ứng dụng của mình.
Google One Tap Sign-In Là Gì?
Google One Tap Sign-In là một tính năng tiện lợi được Google phát triển, cho phép người dùng đăng nhập vào các trang web và ứng dụng thông qua tài khoản Google với chỉ một cú nhấp chuột.
Lợi Ích Của Google One Tap Sign-In:
- Tối giản quy trình đăng nhập: Bạn sẽ không còn phải nhớ nhiều tên người dùng và mật khẩu khác nhau nữa.
- Bảo mật cao hơn: Tính năng này tích hợp với xác thực hai yếu tố của Google, giúp bảo vệ tài khoản của bạn.
- Trải nghiệm người dùng tốt hơn: Mọi thứ trở nên dễ dàng hơn khi người dùng không phải đối mặt với các bước đăng nhập phức tạp.
Cách Tích Hợp Google One Tap Sign-In Vào Ứng Dụng Của Bạn
Để tích hợp Google One Tap vào ứng dụng của bạn, bạn có thể làm việc với cả website và ứng dụng di động. Đầu tiên, bạn cần đăng ký tài khoản Google Developer và lấy clientId theo hướng dẫn tại đây.
Bước 1: Khởi Tạo Dự Án Next.js
Bắt đầu bằng cách khởi tạo một dự án Next.js:
npx create-next-app@latestBước 2: Cài Đặt Các Thư Viện Cần Thiết
Cài đặt những thư viện dưới đây:
@types/google-one-tap: Dành cho dự án Next.js, nếu bạn sử dụng TypeScript.google-auth-library: Dành cho phía backend.
Bước 3: Cấu Hình Biến Môi Trường
Thiết lập biến môi trường trong ứng dụng của bạn với định dạng NEXT_PUBLIC_GOOGLE_CLIENT_ID=xxxxx-xxxxx.apps.googleusercontent.com.
Bước 4: Chèn Script Google Vào Ứng Dụng
Bạn có thể thêm đoạn script vào file layout.tsx để tải Google One Tap:
javascript
// layout.tsx
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://accounts.google.com/gsi/client"
strategy="beforeInteractive"
/>
</body>
</html>
);
}Bước 5: Kích Hoạt Google One Tap
Cuối cùng, bạn chỉ cần chạy đoạn mã sau để hiển thị popup:
javascript
const { google } = window;
google.accounts.id.initialize({
client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
callback: async (response) => {
// Xử lý response.credential tại đây
},
});
google.accounts.id.prompt((notification) => {
console.log('notification', notification);
});Chúc mừng! Bạn đã hoàn thành việc tích hợp Google One Tap vào ứng dụng của mình. Việc xử lý response.credential sẽ phụ thuộc vào luồng xác thực của ứng dụng bạn.
Tài Nguyên Tham Khảo
Nếu bạn muốn tìm hiểu kỹ hơn về việc tích hợp, hãy truy cập vào các liên kết sau:
Lưu Ý
Nếu popup không xuất hiện, hãy kiểm tra cài đặt bảo mật trình duyệt của bạn tại chrome://settings/content/federatedIdentityApi để đảm bảo rằng tính năng “Third-party sign-in” đã được kích hoạt.
source: viblo
