Trải nghiệm người dùng của nút Đăng nhập bằng Google

Trang này mô tả trải nghiệm người dùng (UX) của nút Đăng nhập bằng Google.

Kết xuất nút

Một nút được cá nhân hoá sẽ hiển thị thông tin hồ sơ cho phiên đầu tiên trên Google phê duyệt trang web của bạn. Một phiên Google được phê duyệt sẽ có một tài khoản tương ứng trên trang web của bạn. Tài khoản này đã đăng nhập bằng tính năng Đăng nhập bằng Google trước đó.

Nếu thấy một nút được cá nhân hoá, người dùng sẽ biết những thông tin sau:

  • Có ít nhất một phiên hoạt động trên Google.
  • Có một tài khoản tương ứng trên trang web của bạn.

Nút được cá nhân hoá giúp người dùng biết nhanh trạng thái phiên, cả trên phía Google và trên trang web của bạn, trước khi họ nhấp vào nút. Điều này đặc biệt hữu ích cho người dùng cuối chỉ thỉnh thoảng truy cập vào trang web của bạn. Họ có thể quên mất việc đã tạo tài khoản hay chưa và tạo bằng cách nào. Nút được cá nhân hoá sẽ nhắc họ rằng trước đây họ đã sử dụng tính năng Đăng nhập bằng Google. Do đó, việc này giúp ngăn chặn việc tạo tài khoản trùng lặp không cần thiết trên trang web của bạn.

Để cho biết trạng thái phiên, nút được cá nhân hoá sẽ xuất hiện theo những cách sau:

  • Một phiên: Chỉ có một phiên ở phía Google. Phiên đó phê duyệt ứng dụng khách và có một tài khoản tương ứng trên trang web của bạn.

    Một nút được cá nhân hoá, hiển thị tên của một Tài khoản Google.

  • Nhiều phiên: Có nhiều phiên ở phía Google. Những phiên đó sẽ phê duyệt ứng dụng khách. Bạn có thể nhận biết tài khoản được phê duyệt qua mũi tên danh sách bên cạnh tài khoản xuất hiện. Ít nhất một phiên có tài khoản tương ứng trên trang web của bạn.

    Một nút được cá nhân hoá có mũi tên danh sách.

  • Không có phiên: Không có phiên nào ở phía Google hoặc chưa có phiên nào phê duyệt ứng dụng.

    Một nút có nội dung "Đăng nhập bằng Google" mà không có thông tin được cá nhân hoá.

Nút được cá nhân hoá sẽ tự động xuất hiện khi trạng thái phiên phù hợp, trừ phi chế độ cài đặt nút của bạn không cho phép nút được cá nhân hoá xuất hiện. Nút được cá nhân hoá sẽ không xuất hiện nếu:

  • Thuộc tính data-typeicon.
  • Thuộc tính data-size được đặt thành medium hoặc small.
  • Thuộc tính data-width được đặt thành một số nhỏ hơn 200 px.
  • Cookie của bên thứ ba bị chặn và phiên bản FedCM của nút không được bật.

Tên hoặc địa chỉ email sẽ bị cắt bớt khi quá dài để hiển thị bên trong nút.

Một nút được cá nhân hoá có tên và email bị cắt bớt.

Trình quản lý thông tin xác thực liên kết (FedCM)

Hộp cát về quyền riêng tư cho web đưa ra những thay đổi đáng kể đối với Dịch vụ nhận dạng của Google và hoạt động đăng nhập của người dùng. Điều này ảnh hưởng đến nút Đăng nhập bằng Google được cá nhân hoá. Mặc dù quy trình đăng nhập không bị ảnh hưởng khi có nút này, nhưng khi cookie của bên thứ ba bị chặn, người dùng cũ sẽ không thấy nút được cá nhân hoá.

Với luồng nút Federated Credentials Management API (FedCM), người dùng có thể thấy nút Đăng nhập bằng Google được cá nhân hoá trên trang web của bạn. Theo mặc định, FedCM bị tắt, nhưng bạn có thể bật FedCM bằng cách thay đổi một thuộc tính (HTML/JavaScript). Sau đây là các lợi ích của nút FedCM:

  • Cải thiện trải nghiệm của người dùng cũ: Quy trình đăng nhập của người dùng cũ được tinh giản vì người dùng có thể nhận ra tài khoản hiện có của họ. Khả năng nhận dạng được cải thiện này đã được chứng minh là giúp tăng tỷ lệ nhấp (CTR). Ngoài ra, không giống như luồng nút mà không bật FedCM, luồng nút FedCM hỗ trợ tính năng tự động chọn – người dùng quay lại có phiên hoạt động trên Google sẽ tự động đăng nhập sau khi nhấp vào nút, bỏ qua lời nhắc Trình chọn tài khoản.

  • Tích hợp tính năng nâng cao: Chúng tôi đã tích hợp các chức năng Đăng nhập bằng một lần chạm và Tự động đăng nhập, cho phép tất cả các tính năng Đăng nhập bằng Google của Trình quản lý thông tin xác thực liên kết (FedCM) từ một Bên đáng tin cậy (RP) duy nhất hoạt động đồng bộ. Chrome sẽ ghi lại và tuân thủ các cử chỉ của người dùng trong quy trình nút FedCM để hoàn tất quy trình xác nhận lại một lần cho quy trình tự động đăng nhập bằng tính năng Một lần nhấn. Điều này đảm bảo trải nghiệm liền mạch trên tất cả các tính năng.

Hành trình chính của người dùng

Hành trình của người dùng sẽ khác nhau tuỳ theo các trạng thái sau.

  • Trạng thái phiên trên các trang web của Google. Các thuật ngữ sau đây được dùng để cho biết trạng thái phiên khác nhau của Google khi hành trình của người dùng bắt đầu.

    • Has-Google-session: Có ít nhất một phiên đang hoạt động trên các trang web của Google.
    • No-Google-session: Không có phiên hoạt động nào trên các trang web của Google.
  • Tài khoản Google đã chọn có phê duyệt trang web của bạn hay không khi hành trình của người dùng bắt đầu. Các thuật ngữ sau đây được dùng để cho biết các trạng thái phê duyệt khác nhau.

    • Người dùng mới: Tài khoản đã chọn chưa phê duyệt trang web của bạn.
    • Người dùng cũ: Tài khoản bạn chọn đã phê duyệt trang web của bạn trước đây.

Hành trình của người dùng mới có phiên hoạt động trên Google

Nút không có FedCM

  1. Nút Đăng nhập bằng Google.

    Một nút có nội dung "Đăng nhập bằng Google" mà không có thông tin được cá nhân hoá.

  2. Trang bộ chọn tài khoản.

    Trang Trình chọn tài khoản của phiên đầu tiên.

  3. Trang mới về sự đồng ý của người dùng.

    Sự đồng ý và đăng nhập bằng nút Đăng nhập bằng Google.

  4. Sau khi người dùng xác nhận, mã nhận dạng sẽ được chia sẻ với trang web của bạn.

Người dùng có thể thêm một phiên Google mới bằng cách nhấp vào nút Sử dụng một tài khoản khác, hãy tham khảo phần Không có phiên Google.

Nút sử dụng FedCM

Khi FedCM được bật – Hành trình của người dùng mới có phiên hoạt động trên Google

Màn hình áp chót trong quy trình là màn hình tải. Màn hình này sẽ tự động chuyển hướng người dùng đến điểm cuối đăng nhập mà không cần người dùng thực hiện thao tác.

Hành trình của người dùng cũ có phiên hoạt động trên Google

Nút không có FedCM

  1. Nút Đăng nhập bằng Google.

    Một nút được cá nhân hoá, hiển thị tên của một Tài khoản Google.

  2. Trang bộ chọn tài khoản.

    Trình chọn Tài khoản Google

  3. Sau khi người dùng chọn một tài khoản đã từng đăng nhập, mã thông báo nhận dạng sẽ được chia sẻ với trang web của bạn.

Người dùng có thể thêm một phiên Google mới bằng cách nhấp vào nút Sử dụng một tài khoản khác, hãy tham khảo phần "Không có phiên Google" trong hành trình của người dùng.

Nút sử dụng FedCM

Khi FedCM được bật – Hành trình của người dùng cũ đã có phiên hoạt động trên Google

Màn hình áp chót trong quy trình là màn hình tải. Màn hình này sẽ tự động chuyển hướng người dùng đến điểm cuối đăng nhập mà không cần người dùng thực hiện thao tác.

Has-Google-session với hành trình tự động chọn người dùng cũ

Nút không có FedCM

Nút Đăng nhập bằng Google không có FedCM sẽ không có tính năng tự động chọn.

Nút sử dụng FedCM

Người dùng cũ có phiên hoạt động trên Google sẽ được tự động chọn sau khi nhấp vào nút, bỏ qua lời nhắc Trình chọn tài khoản. Đặt thuộc tính auto select thành true (HTML/JavaScript).

Khi FedCM và tính năng tự động đăng nhập được bật – Has-Google-session với hành trình của người dùng cũ có tính năng tự động đăng nhập

Hành trình của người dùng mới không có phiên hoạt động trên Google

Nút không có FedCM

  1. Nút Đăng nhập bằng Google.

    Một nút có nội dung "Đăng nhập bằng Google" mà không có thông tin được cá nhân hoá.

  2. Trang đầu tiên để thêm một phiên mới trên Google.

    Email Tài khoản Google

  3. Trang thứ hai để thêm một phiên mới trên Google.

    Đăng nhập bằng Tài khoản Google

  4. Trang mới về sự đồng ý của người dùng.

    Sự đồng ý và đăng nhập bằng nút Đăng nhập bằng Google.

  5. Sau khi người dùng xác nhận, mã nhận dạng sẽ được chia sẻ với trang web của bạn.

Nút sử dụng FedCM

Khi FedCM được bật – Hành trình của người dùng cũ đã có phiên hoạt động trên Google

Màn hình áp chót trong quy trình là màn hình tải. Màn hình này sẽ tự động chuyển hướng người dùng đến điểm cuối đăng nhập mà không cần người dùng thực hiện thao tác.

Hành trình của người dùng cũ không có phiên hoạt động trên Google

Nút không có FedCM

  1. Nút Đăng nhập bằng Google.

    Một nút có nội dung "Đăng nhập bằng Google" mà không có thông tin được cá nhân hoá.

  2. Trang đầu tiên để thêm một phiên mới trên Google.

    Email Tài khoản Google

  3. Trang thứ hai để thêm một phiên mới trên Google.

    Đăng nhập bằng Tài khoản Google

  4. Sau khi người dùng nhấp vào nút Tiếp theo, mã thông báo nhận dạng sẽ được chia sẻ với trang web của bạn.

Nút sử dụng FedCM

Khi FedCM được bật – Hành trình của người dùng cũ đã có phiên hoạt động trên Google

Các hành trình chung của người dùng chính trong phần trước vẫn được áp dụng. Sau đây là quy trình bổ sung sẽ xuất hiện cho Tài khoản Google của trẻ khi đăng nhập.

Nút không có FedCM

No-Google-session

  1. Nút Đăng nhập bằng Google.

    Một nút có nội dung "Đăng nhập bằng Google" mà không có thông tin được cá nhân hoá.

  2. Trang đầu tiên để thêm một phiên Google mới cho trẻ (email Tài khoản Google của trẻ).

    Địa chỉ email của Tài khoản Google của trẻ

  3. Trang thứ hai để thêm một phiên Google mới cho trẻ (mật khẩu Tài khoản Google của trẻ).

    Mật khẩu Tài khoản Google của trẻ

  4. Trang đầu tiên để nhận được sự phê duyệt của cha mẹ nhằm thêm một phiên Google mới cho trẻ.

    Trang chọn quyết định phê duyệt của cha mẹ

  5. Trang thứ hai để nhận được sự phê duyệt của cha mẹ nhằm thêm một phiên Google mới cho trẻ.

    Trang mật khẩu phê duyệt của cha mẹ

  6. Trang thứ ba để nhận được sự phê duyệt của cha mẹ nhằm thêm một phiên Google mới cho trẻ.

    Trang phê duyệt của cha mẹ

  7. Trang đầu tiên để nhận được sự phê duyệt của cha mẹ cho phép trẻ đăng nhập vào Tài khoản Google của trẻ trong ứng dụng.

    Yêu cầu cha mẹ phê duyệt trang đăng nhập

  8. Trang thứ hai để nhận được sự phê duyệt của cha mẹ cho phép trẻ đăng nhập vào Tài khoản Google của trẻ trong ứng dụng.

    Chọn cha mẹ để phê duyệt trang đăng nhập

  9. Trang thứ ba để nhận được sự phê duyệt của cha mẹ cho việc đăng nhập Tài khoản Google của trẻ vào ứng dụng.

    Mật khẩu của Tài khoản Google của cha mẹ để phê duyệt trang đăng nhập

  10. Trang cuối cùng để nhận được sự phê duyệt của cha mẹ cho phép trẻ đăng nhập vào Tài khoản Google của trẻ trong ứng dụng.

    Trang phê duyệt của cha mẹ để trẻ đăng nhập

  11. Sau khi cha mẹ nhấp vào nút Tiếp tục, mã thông báo nhận dạng sẽ được chia sẻ với trang web của bạn.

Has-Google-session

  1. Nút Đăng nhập bằng Google.

    Một nút có nội dung "Đăng nhập bằng Google" mà không có thông tin được cá nhân hoá.

  2. Trang bộ chọn tài khoản.

    Chọn trang tài khoản trẻ em.

  3. Trang đầu tiên để nhận được sự phê duyệt của cha mẹ cho phép trẻ đăng nhập vào Tài khoản Google của trẻ trong ứng dụng.

    Yêu cầu cha mẹ phê duyệt trang đăng nhập

  4. Trang thứ hai để nhận được sự phê duyệt của cha mẹ cho phép trẻ đăng nhập vào Tài khoản Google của trẻ trong ứng dụng.

    Chọn cha mẹ để phê duyệt trang đăng nhập

  5. Trang thứ ba để nhận được sự phê duyệt của cha mẹ cho việc đăng nhập Tài khoản Google của trẻ vào ứng dụng.

    Mật khẩu của Tài khoản Google của cha mẹ để phê duyệt trang đăng nhập

  6. Trang cuối cùng để nhận được sự phê duyệt của cha mẹ cho phép trẻ đăng nhập vào Tài khoản Google của trẻ trong ứng dụng.

    Trang phê duyệt của cha mẹ để trẻ đăng nhập

  7. Sau khi cha mẹ nhấp vào nút Tiếp tục, mã thông báo nhận dạng sẽ được chia sẻ với trang web của bạn.

Nút sử dụng FedCM

Nút Đăng nhập bằng Google khi bật FedCM hiện không hỗ trợ tài khoản Family Link.

Thông tin bổ sung về quy trình sử dụng nút FedCM

  • Thêm thuộc tính allow="identity-credentials-get" vào khung mẹ nếu ứng dụng web của bạn gọi Button API từ iframe trên nhiều nguồn. Hãy xem bước 7 để biết thêm thông tin.

  • Thiết lập Chính sách bảo mật nội dung (CSP) của trang web một cách phù hợp. Hãy xem bước 8 để biết thêm thông tin.

  • Trạng thái thời gian chờ và chế độ cài đặt Đăng nhập qua bên thứ ba trong Chrome không ảnh hưởng đến quy trình sử dụng nút FedCM. Trạng thái (như trong các ảnh chụp màn hình sau) chỉ ảnh hưởng đến trải nghiệm người dùng của tính năng Đăng nhập bằng một lần nhấn.

    Trạng thái tạm ngưng và chế độ cài đặt Đăng nhập qua bên thứ ba trong Chrome không ảnh hưởng đến quy trình sử dụng nút FedCM.