Hướng dẫn cài đặt đăng nhập bằng tài khoản Google cho website

How to
, ,
1

Nếu bạn đang vận hành website bán hàng, hoặc một diễn đàn mở và mong muốn thu hút thêm người dùng đăng ký trên website của bạn thì tính năng đăng nhập bằng tài khoản Google là một tiện ích cho phép người dùng Tạo mới/Đăng nhập vào website của bạn bằng tài khoản google (gmail[1]) của của họ một cách nhanh chóng[2], tăng tỉ lệ chuyển đổi và thu thập thông tin hành vi người dùng trên website của bạn chính xác hơn.

Hiện nay Google đang cung cấp 2 hình thử đăng nhập là:

  • One-Click Google Login: Người dùng chỉ cần nhấn vào nút Đăng nhập/Tạo mới và xác nhận đăng nhập bằng tài khoản google.

    image
    image1810×991 139 KB

  • One Tap Sign In: Nếu người dùng đã đăng nhập tài khoản Google trên thiết bị của họ, 1 pop-up đăng nhập bằng google sẽ hiển thị trên website của bạn, và người dùng chỉ cần với một cú nhấp chuột mà không cần xác nhận thêm.

    image
    image1827×993 280 KB

Sau đây là các bước hướng dẫn chi tiết để cài đặt tính năng “đăng nhập bằng tài khoản google” trên website của bạn:

Bước 1: Tạo mới một dự án mới trên “Google Cloud Platform”:

image
image1828×992 50.1 KB

image
image1826×992 61.5 KB

  • Tạo một project mới

    image

Bước 2: Tạo “OAuth consent screen[3]”

  • Truy cập OAuth consent screen tại menu điều hướng bên trái hoặc click link

  • Chọn "External" > “Create”

    image

Đăng ký mới “OAuth consent screen”

Đăng ký Thông tin ứng dụng - App information

  1. Đặt tên cho ứng dụng của bạn tại App name

  2. Email tiếp nhận hỗ trợ từ người dùng tại User support email & thông tin liên hệ của đội ngũ phát triển ứng dụng tại Developer contact information

  3. Thêm logo của ứng dụng, với tỉ lệ 1:1 tại App Logo

    image

Cung cấp thông tin trang Điều khoản bảo mật - App domain

  1. Đường dẫn trang chủ của website tại “Application home page”

  2. Đường dẫn chính sách bảo mật và chính sách cung cấp dịch vụ tại “Application privacy policy link” & “Application terrm of serrvice link”

  3. Tên miền được phép truy cập ứng dụng tại “Authorized domains”

    image

Bước 3: Tạo khoá ứng dụng

  • Truy cập mục Credentials tại menu điều hướng hoặc link

  • Tạo mới OAuth clinet ID

    image

  1. Chọn Web application tại mục Application type

  2. Đặt tên cho khoá ứng dụng

  3. Thêm đường dẫn trang chủ website của bạn tại ** Authorized JavaScript origins**

  4. Thêm được dẫn chuyển hướng với cấu trúc homepage/auth/google_oauth2/callback hoặc do ứng dụng hỗ trợ cài đặt đăng nhập với google cung cấp [4].

  5. Sau khi bấm tạo một hộp thoại sẽ xuất hiện và chưa thông tin Client ID và Client Secret

  6. Copy thông tin Cliend ID và Client Secret vào ứng dung hỗ trợ cài đặt đăng nhập với google đã cài đặt trước đó.

  7. Cuối cùng là chọn xuất bản ứng dụng của bạn tại mục “OAuth consent screen”.

    image

  8. Xác thực quyền sở hữu website của bạn với công cụ Google search console - GCS để giúp việc xuất bản ứng dụng được google phê duyệt nhanh chóng.

Trên đây là hướng dẫn chi tiết các bước cài đặt tính năng đăng nhập bằng tài khoản Google cho website của bạn.
Hãy để lại phản hồi và thắc mắc của bạn bên dưới phần comment để được giải đáp.

Chúc bạn thực hiện thành công :tada:!

Bài viết tham khảo nội dung từ các nguồn sau:

  1. Theo thống kê năm 2022 Gmail hiện chiếm 45% thị phần email thế giới, tại Việt Nam tỉ lệ này có thể cao hơn bên cạnh các nền tảng cung cấp dịch vụ email miễn phí khác như Outlook của Microsoft, Yahoo… ↩︎

  2. Giúp tiết kiệm thời gian login vào website của bạn mà không cần tạo mới tài khoản, chỉ cần người dùng sở hữu 1 tài khoản gmail. ↩︎

  3. OAuth consent screen là màn hình hiển thị các thông tin về (Thông tin ứng dụng, Chính sách bảo mật, Quyền truy cập) cho người dùng khi thực hiện đăng nhập vào một ứng dụng sử dụng OAuth.

    - Thông tin ứng dụng: Tên ứng dụng, logo ứng dụng
    - Điều khoản bảo mật: Liên kết đến các trang thông báo về điều khoản bảo mật, chính sách người dùng mà website bạn đang thực hiện đăng nhập bằng tài khoản Google. Người dùng sẽ biết thêm về việc website sử dụng và bảo vệ dữ liệu cá nhân tại đây.
    - Quyền truy cập: Hiển thị các yêu cầu về quyền truy cập vào thông tin người dùng. Ví dụ: Quyền truy cập vào Email, danh bạ, lịch, thông tin liên hệ…

    OAuth consent screen là một bước quan trọng giúp đảm bảo người dùng hiểu rõ các quyền truy cập mà họ đang cung cấp cho ứng dụng/website mình đang truy cập và có thể đưa ra quyết định Chấp nhận/Từ chối/Chỉnh sửa hay không. ↩︎

  4. Với người dùng sử dụng mã nguồn Wordpress thì có thể sử dụng 2 plugin sau:
    - Nextend Social Login and Register: Ứng dụng phổ biến với hầu hết website bán hàng có sử dụng plugin woocomerce
    - Fox plugin: Một plugin thay thế các đoạn code tuỳ biến thường dùng do A. Nguyễn Ngọc Hoan và cộng sự phát triển.

    Với người dùng sử dụng mã nguồn Discourse thì ứng dụng đã được tích hợp sẵn trong mà nguồn, bạn chỉ cần thực hiện khởi tạo Client ID và Client Secret theo các bước đã hướng dẫn ở trên. Đồng thời cài đặt thêm Plugin Discourse google one tạp để kích hoạt tính năng Google one-tap
    ↩︎