Hướng dẫn cấu hình Đăng nhập bằng Google cho website

Tính năng Đăng nhập bằng Google (Google Login) giúp khách hàng đăng nhập website nhanh chóng mà không cần tạo tài khoản hoặc nhớ mật khẩu. Chỉ với một cú nhấp chuột, người dùng có thể truy cập website an toàn và thuận tiện.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cấu hình Google OAuth từ A đến Z để tích hợp tính năng đăng nhập Google cho Website.

Lợi ích khi bật đăng nhập bằng Google

• Đăng nhập nhanh chỉ với một cú nhấp chuột.
• Không cần tạo tài khoản thủ công.
• Tăng trải nghiệm người dùng.
• Giảm tỷ lệ khách hàng bỏ đăng ký.
• Nâng cao độ tin cậy cho website.

Bước 1: Tạo Project trên Google Cloud Console

Truy cập địa chỉ:

https://console.developers.google.com/

Đăng nhập bằng tài khoản Gmail của bạn.

Sau đó thực hiện các bước sau:

1. Nhấn Create Project (Tạo dự án).
2. Đặt tên Project.
3. Nhấn Create.
4. Chờ Google tạo Project.
5. Chọn Project vừa tạo.

Bước 2: Cấu hình OAuth Consent Screen

Từ menu bên trái, chọn:

Google Auth Platform → Branding

Điền các thông tin:

• Tên ứng dụng
• Email hỗ trợ
• Email nhà phát triển
• Logo (không bắt buộc)

Chọn loại ứng dụng:

External

Nhấn Save and Continue cho đến khi hoàn tất.

Bước 3: Tạo OAuth Client ID

Chọn:

Clients → Create Client

Thiết lập như sau:

• Application Type: Web application
• Name: Đặt tên tùy ý (Ví dụ: webtamduc )

Minh họa:

Bước 4: Khai báo Authorized JavaScript Origins

Tại mục Authorized JavaScript Origins, nhấn Add URI.

Nhập tên miền website.

Ví dụ:

https://domaincuaban.com

Nếu đang chạy localhost:

http://localhost

Bước 5: Khai báo Authorized Redirect URI

Đây là bước quan trọng nhất.

Trong website truy cập:

Admin
→ Cài đặt
→ Kết nối
→ Đăng nhập Google

Sao chép mục Authorized Redirect URI.

Dán vào phần Authorized Redirect URIs trên Google Cloud.

Ví dụ:

https://domaincuaban.com/auth/google/callback

Minh họa:

Bước 6: Lấy Client ID và Client Secret

Sau khi nhấn Create, Google sẽ tạo:

• Client ID
• Client Secret

Ví dụ:

Client ID
xxxxxxxxxxxxxxxx.apps.googleusercontent.com

Client Secret
GOCSPX-xxxxxxxxxxxxxxxx

Hãy lưu lại hai thông tin này.

Bước 7: Cấu hình trong SHOPKEY

Truy cập:

Admin
→ Cài đặt
→ Kết nối
→ Đăng nhập Google

Dán:

• Client ID
• Client Secret

Sau đó nhấn Lưu.

Kiểm tra hoạt động

Mở website ở chế độ Ẩn danh (Incognito).

Nhấn Đăng nhập bằng Google.

Nếu Google hiển thị màn hình chọn tài khoản và bạn đăng nhập thành công thì việc cấu hình đã hoàn tất.

Các lỗi thường gặp

1. redirect_uri_mismatch

Nguyên nhân:

• Redirect URI sai.
• Thiếu dấu "/".
• HTTP và HTTPS không khớp.

Cách khắc phục:

• Copy lại Redirect URI từ SHOPKEY.
• Dán đúng vào Google Cloud Console.

2. Error 400

• Sai Client ID.
• Sai Redirect URI.
• OAuth chưa Publish.

3. Access blocked

Ứng dụng chưa Publish hoặc Gmail chưa được thêm vào danh sách Test Users.

4. Invalid Client

Client ID hoặc Client Secret bị sai hoặc bị thiếu ký tự.

Mẹo khi cấu hình

• Luôn sử dụng HTTPS cho website.
• Không chia sẻ Client Secret.
• Không thay đổi Redirect URI sau khi đã cấu hình.
• Nên kiểm tra bằng cửa sổ Ẩn danh sau khi lưu.

Kết luận

Chỉ với vài bước đơn giản, bạn đã có thể tích hợp thành công tính năng Đăng nhập bằng Google cho website sử dụng SHOPKEY. Tính năng này giúp khách hàng đăng nhập nhanh hơn, nâng cao trải nghiệm người dùng và tăng tỷ lệ chuyển đổi trên website.

Nếu gặp khó khăn trong quá trình cấu hình, hãy liên hệ đội ngũ kỹ thuật để được hỗ trợ nhanh chóng.

Câu hỏi thường gặp (FAQ)

Cấu hình Google Login có mất phí không?

Không. Google cung cấp miễn phí tính năng OAuth cho hầu hết các website.

Có cần xác minh tên miền không?

Không bắt buộc đối với website thử nghiệm, tuy nhiên website chính thức nên xác minh tên miền để tăng độ tin cậy.

Có thể sử dụng localhost không?

Có. Bạn chỉ cần thêm http://localhost vào Authorized JavaScript Origins và khai báo đúng Redirect URI.

Sau khi đổi tên miền có cần cấu hình lại không?

Có. Bạn cần cập nhật lại cả Authorized JavaScript Origins và Authorized Redirect URIs theo tên miền mới.