Đăng nhập bằng Google bằng API FedCM

Hướng dẫn này thảo luận tác động của việc ngừng sử dụng cookie của bên thứ ba đối với Thư viện nền tảng đăng nhập. Các chủ đề bao gồm Dòng thời gian và Các bước tiếp theo để cập nhật thư viện có khả năng tương thích ngược, cách thực hiện Tiến hành đánh giá tác động và xác minh rằng hoạt động đăng nhập của người dùng vẫn tiếp tục hoạt động như dự kiến và hướng dẫn cập nhật ứng dụng web của bạn nếu cần. Các lựa chọn để Quản lý giai đoạn chuyển đổi cùng với cách Yêu cầu trợ giúp cũng được đề cập.

Trạng thái của thư viện

Mọi ứng dụng web mới đều bị chặn sử dụng nền tảng Đăng nhập bằng Google (không dùng nữa) thư viện, trong khi các ứng dụng dùng thư viện có thể tiếp tục cho đến khi có thông báo mới. Đáp Bạn chưa thiết lập ngày ngừng cung cấp cuối cùng (ngừng hoạt động) đối với thư viện này. Hãy xem bài viết Ngừng hỗ trợ và ngừng cung cấp để tìm hiểu thêm.

Chế độ chặn cookie của bên thứ ba trong Hộp cát về quyền riêng tư của Chrome ảnh hưởng đến các ứng dụng web sử dụng thư viện nền tảng Đăng nhập bằng Google. Để duy trì hành vi hiện có, mà không cần sử dụng cookie của bên thứ ba, bản cập nhật có khả năng tương thích ngược thêm API FedCM vào thư viện này. Mặc dù hầu hết các thay đổi đều diễn ra liền mạch, bản cập nhật giới thiệu sự khác biệt đối với lời nhắc về sự đồng ý của người dùng, iframe permissions-policy và Chính sách bảo mật nội dung (CSP). Những thay đổi này có thể ảnh hưởng đến ứng dụng web của bạn và đòi hỏi bạn phải thay đổi mã xử lý ứng dụng cũng như trang web .

Trong giai đoạn chuyển đổi, tuỳ chọn cấu hình sẽ kiểm soát việc API FedCM được sử dụng trong quá trình đăng nhập của người dùng.

Dòng thời gian

Lần cập nhật gần đây nhất vào tháng 7 năm 2024

Dưới đây là các ngày và thay đổi ảnh hưởng đến hành vi đăng nhập của người dùng:

  • Tháng 3 năm 2023 Ngừng hỗ trợ nền tảng Đăng nhập bằng Google thư viện của bạn.
  • Tháng 1 năm 2024 Chrome chặn 1% cookie của bên thứ ba, tính năng Đăng nhập bằng Google thư viện nền tảng được cấp ngoại lệ tạm thời đối với cookie của bên thứ ba chặn thông qua một bản dùng thử ngừng hoạt động.
  • Giai đoạn chuyển đổi tháng 7 năm 2024 bắt đầu và thư viện nền tảng Đăng nhập bằng Google Hỗ trợ thêm cho API FedCM. Theo mặc định, Google kiểm soát tỷ lệ phần trăm này yêu cầu đăng nhập của người dùng bằng FedCM trong thời gian này. Ứng dụng web có thể hãy ghi đè hành vi này bằng tham số use_fedcm một cách rõ ràng.
  • Việc sử dụng bắt buộc (Ngày sẽ được xác định) API FedCM của Google Thư viện nền tảng đăng nhập, sau đó tham số use_fedcm sẽ bị bỏ qua, và tất cả yêu cầu đăng nhập của người dùng đều sử dụng FedCM.

Sau khi chuyển sang API FedCM, thư viện nền tảng Đăng nhập bằng Google không còn hoạt động nữa chịu ảnh hưởng của việc chặn cookie của bên thứ ba. Để biết thông tin cập nhật về cookie của bên thứ ba chặn, hãy xem tiến trình Hộp cát về quyền riêng tư của Chrome.

Các bước tiếp theo

Có ba cách bạn có thể chọn để làm theo:

  1. Tiến hành đánh giá tác động và cập nhật ứng dụng web của bạn (nếu cần). Phương pháp này đánh giá xem các tính năng yêu cầu thay đổi đối với ứng dụng web có đang sử dụng. Bạn có thể xem hướng dẫn trong phần tiếp theo của tài liệu hướng dẫn này.
  2. Di chuyển đến thư viện Dịch vụ nhận dạng của Google (GIS). Chuyển sang phần mới nhất và bạn nên sử dụng thư viện đăng nhập được hỗ trợ. Hãy thực hiện việc này bằng cách theo dõi hướng dẫn này.
  3. Không làm gì cả. Ứng dụng web của bạn sẽ tự động được cập nhật khi Thư viện Đăng nhập bằng Google chuyển sang API FedCM để người dùng đăng nhập. Đây là ít hoạt động nhất, nhưng có một số nguy cơ người dùng không thể đăng nhập vào ứng dụng web của bạn.

Đánh giá tác động

Hãy làm theo các hướng dẫn sau để xác định xem ứng dụng web của bạn có thể được cập nhật liền mạch hay không thông qua bản cập nhật tương thích ngược hoặc nếu cần thay đổi để tránh người dùng không thể đăng nhập khi thư viện nền tảng Đăng nhập bằng Google hoàn toàn sử dụng API FedCM.

Thiết lập

API trình duyệt và phiên bản mới nhất của thư viện nền tảng Đăng nhập bằng Google được cần thiết để sử dụng FedCM trong quá trình đăng nhập của người dùng.

Trước khi tìm hiểu thêm:

  • Cập nhật lên phiên bản mới nhất của Chrome dành cho máy tính. Chrome dành cho Android yêu cầu bản phát hành M128 trở lên và không thể kiểm thử bằng các phiên bản cũ.

  • Mở chrome://flags và đặt các tính năng sau thành các giá trị này:

    • #fedcm-authz Bật, nếu trang web của bạn sử dụng Chính sách bảo mật nội dung chặn https://accounts.google.com/gsi/ottoken.
    • #tracking-protection-3pcd Đã bật
    • #third-party-cookie-deprecation-trial Đã tắt
    • #tpcd-metadata-grants Đã tắt
    • #tpcd-heuristics-grants Đã tắt

    rồi chạy lại Chrome.

  • Đặt use_fedcm thành true khi khởi động nền tảng Đăng nhập bằng Google trong ứng dụng web của bạn. Thông thường, quá trình khởi chạy sẽ có dạng như sau:

    • gapi.client.init({use_fedcm: true}) hoặc
    • gapi.auth2.init({use_fedcm: true}) hoặc
    • gapi.auth2.authorize({use_fedcm: true}).

  • Vô hiệu hoá các phiên bản được lưu vào bộ nhớ đệm của thư viện nền tảng Đăng nhập bằng Google. Thông thường, bước này là không cần thiết vì phiên bản thư viện mới nhất là được tải trực tiếp xuống trình duyệt bằng cách thêm api.js, client.js hoặc platform.js trong thẻ <script src> (yêu cầu có thể sử dụng bất kỳ thẻ nào sau đây tên gói cho thư viện).

  • Xác nhận chế độ cài đặt OAuth cho mã ứng dụng OAuth:

    1. Mở trang Thông tin đăng nhập của Google API Console

    2. Kiểm tra để đảm bảo URI của trang web có trong Các nguồn gốc JavaScript được cho phép. URI bao gồm giao thức và chỉ tên máy chủ đủ điều kiện. Ví dụ: https://www.example.com.

    3. Nếu muốn, thông tin đăng nhập có thể được trả về bằng lệnh chuyển hướng đến một điểm cuối bạn lưu trữ thay vì thông qua lệnh gọi lại JavaScript. Nếu trường hợp này xảy ra, xác minh rằng URI chuyển hướng của bạn có trong URI chuyển hướng được phép. URI chuyển hướng bao gồm giao thức, tên máy chủ và đường dẫn đủ điều kiện và phải tuân thủ Quy tắc xác thực URI chuyển hướng. Ví dụ: https://www.example.com/auth-receiver

Thử nghiệm

Sau khi làm theo hướng dẫn trong phần Thiết lập:

Tìm yêu cầu của thư viện Đăng nhập bằng Google

Kiểm tra xem có những thay đổi về permissions-policy và Chính sách bảo mật nội dung hay không nếu cần bằng cách kiểm tra yêu cầu đối với thư viện nền tảng Đăng nhập bằng Google. Để thực hiện việc này, hãy xác định yêu cầu bằng tên và nguồn gốc của thư viện:

  • Trong Chrome, hãy mở bảng điều khiển Mạng trong Công cụ cho nhà phát triển rồi tải lại trang.
  • Dùng các giá trị trong cột Miền và Tên để tìm thư viện yêu cầu:
    • Miền là apis.google.com và
    • Tên có thể là api.js, client.js hoặc platform.js. Trường hợp cụ thể giá trị của Tên phụ thuộc vào gói thư viện mà tài liệu yêu cầu.

Ví dụ: lọc trên apis.google.com trong cột Miền và platform.js trong cột Name (Tên).

Kiểm tra chính sách quyền của iframe

Trang web của bạn có thể sử dụng thư viện nền tảng Đăng nhập bằng Google trong nhiều nguồn gốc iframe. Nếu có thì bạn cần cập nhật thông tin.

Sau khi làm theo phần Tìm yêu cầu về thư viện Đăng nhập bằng Google hướng dẫn, chọn yêu cầu thư viện Đăng nhập bằng Google trong Công cụ cho nhà phát triển Bảng điều khiển Network (Mạng), rồi tìm tiêu đề Sec-Fetch-Site trong Phần Tiêu đề của yêu cầu trong thẻ Tiêu đề. Nếu giá trị của tiêu đề là:

  • same-site hoặc same-origin thì chính sách trên nhiều nguồn gốc sẽ không được áp dụng và không cần thay đổi.
  • Có thể cần thay đổi cross-origin nếu đang sử dụng iframe.

Cách xác nhận xem có iframe hay không:

  • Chọn bảng điều khiển Phần tử trong Công cụ của Chrome cho nhà phát triển và
  • Sử dụng Ctrl-F để tìm iframe trong tài liệu.

Nếu tìm thấy iframe, hãy kiểm tra tài liệu để kiểm tra các lệnh gọi đến gapi.auth2 hàm hoặc lệnh script src tải thư viện Đăng nhập bằng Google trong iframe. Nếu trường hợp này xảy ra:

Lặp lại quy trình này cho mọi iframe trong tài liệu. iframe có thể được lồng vào nhau, vì vậy hãy nhớ thêm lệnh allow vào tất cả các iframe xung quanh.

Kiểm tra Chính sách bảo mật nội dung

Nếu trang web của bạn sử dụng một Chính sách bảo mật nội dung, bạn có thể phải cập nhật CSP của mình thành cho phép sử dụng thư viện Đăng nhập bằng Google.

Sau khi làm theo phần Tìm yêu cầu về thư viện Đăng nhập bằng Google hướng dẫn, chọn yêu cầu thư viện Đăng nhập bằng Google trong Công cụ cho nhà phát triển Bảng điều khiển Network (Mạng), rồi tìm tiêu đề Content-Security-Policy trong Phần Tiêu đề phản hồi của thẻ Tiêu đề.

Nếu không tìm thấy tiêu đề thì không cần thay đổi nào. Nếu không, hãy kiểm tra xem có bất kỳ Các lệnh CSP này được xác định trong tiêu đề CSP và cập nhật chúng bằng cách:

  • Đang thêm https://apis.google.com/js/, https://accounts.google.com/gsi/, và https://acounts.google.com/o/fedcm/ vào connect-src bất kỳ, default-src hoặc frame-src.

  • Đang thêm vào https://apis.google.com/js/bundle-name.js vào script-src . Thay thế bundle-name.js bằng api.js, client.js hoặc platform.jsdựa trên gói thư viện, các yêu cầu tài liệu.

Kiểm tra các thay đổi đối với lời nhắc của người dùng

Có một số điểm khác biệt đối với hành vi nhắc người dùng, FedCM đã thêm hộp thoại phương thức được hiển thị bởi trình duyệt và cập nhật các yêu cầu kích hoạt của người dùng.

Hình ảnh hộp thoại phương thức FedCM

Kiểm tra bố cục trang web của bạn để xác nhận rằng nội dung cơ bản có thể bị bị che khuất một cách an toàn và tạm thời bị hộp thoại phương thức của trình duyệt che khuất. Nếu trường hợp này không phải là trường hợp. Bạn có thể cần điều chỉnh bố cục hoặc vị trí của một số phần tử của trang web.

Kích hoạt người dùng

FedCM đưa ra các yêu cầu mới cập nhật về việc kích hoạt người dùng. Nhấn vào một nút hoặc thao tác nhấp vào một đường liên kết là ví dụ về những cử chỉ người dùng cho phép nguồn gốc của bên thứ ba để đưa ra yêu cầu về mạng hoặc lưu trữ dữ liệu. Với FedCM, trình duyệt sẽ nhắc truy cập vào sự đồng ý của người dùng khi:

  • người dùng đăng nhập vào ứng dụng web lần đầu bằng một phiên bản trình duyệt mới, hoặc
  • GoogleAuth.signIn sẽ được gọi.

Hiện nay, nếu trước đây người dùng đã đăng nhập vào trang web của bạn, bạn có thể thông tin đăng nhập của người dùng khi khởi chạy thư viện Đăng nhập bằng Google bằng cách sử dụng gapi.auth2.init mà không cần người dùng tương tác thêm.

Do Ngừng sử dụng cookie của bên thứ ba, bạn sẽ không thể thực hiện việc này nữa trừ khi người dùng đã thực hiện quy trình đăng nhập FedCM ít nhất một lần.

Bằng cách chọn sử dụng FedCM và gọi GoogleAuth.signIn, lần tới vẫn giữ nguyên người dùng truy cập trang web của bạn, gapi.auth2.init có thể có được thông tin đăng nhập của người dùng trong quá trình khởi chạy mà không có sự tương tác của người dùng.

Các trường hợp sử dụng phổ biến

Thư viện Đăng nhập bằng Google dành cho nhà phát triển có hướng dẫn và mã nguồn mẫu cho các trường hợp sử dụng phổ biến. Phần này thảo luận cách FedCM tác động đến hành vi.

  • Tích hợp tính năng Đăng nhập bằng Google vào ứng dụng web

    Trong demo này, phần tử <div> và lớp sẽ kết xuất nút và cho người dùng đã đăng nhập, sự kiện trang onload trả về người dùng thông tin xác thực. Người dùng phải tương tác để đăng nhập và thiết lập phiên hoạt động.

    Việc khởi chạy thư viện được thực hiện bởi lớp g-signin2, lớp này gọi gapi.load và gapi.auth2.init.

    Cử chỉ của người dùng, sự kiện onclick của phần tử <div>, gọi auth2.signIn trong khi đăng nhập hoặc auth2.signOut khi đăng xuất.

  • Tạo nút Đăng nhập bằng Google tuỳ chỉnh

    Trong bản minh hoạ một, các thuộc tính tuỳ chỉnh được dùng để kiểm soát giao diện của nút đăng nhập và đối với người dùng đã đăng nhập, sự kiện trang onload sẽ trả về thông tin xác thực của người dùng. Người dùng phải tương tác để đăng nhập và thiết lập một phiên mới.

    Việc khởi chạy thư viện được thực hiện thông qua một sự kiện onload cho phần tử Thư viện platform.js và nút này do gapi.signin2.render hiển thị.

    Một cử chỉ của người dùng, nhấn nút đăng nhập, gọi auth2.signIn.

    Trong bản minh hoạ 2, phần tử <div>, kiểu CSS và đồ hoạ tuỳ chỉnh dùng để kiểm soát giao diện của nút đăng nhập. Tương tác người dùng là cần phải đăng nhập và thiết lập một phiên mới.

    Khởi chạy thư viện khi tải tài liệu bằng cách sử dụng hàm bắt đầu gọi gapi.load, gapi.auth2.init và gapi.auth2.attachClickHandler.

    Cử chỉ của người dùng, sự kiện onclick của phần tử <div>, gọi auth2.signIn dùng auth2.attachClickHandler khi đăng nhập hoặc auth2.signOut trên đăng xuất.

  • Theo dõi trạng thái phiên hoạt động của người dùng

    Trong demo này, thao tác nhấn nút được dùng để người dùng đăng nhập và đăng xuất. Người dùng phải tương tác để đăng nhập và thiết lập phiên mới.

    Quá trình khởi chạy thư viện được thực hiện bằng cách gọi trực tiếp gapi.load, gapi.auth2.init và gapi.auth2.attachClickHandler() sau đó platform.js được tải bằng script src.

    Cử chỉ của người dùng, sự kiện onclick của phần tử <div>, gọi auth2.signIn dùng auth2.attachClickHandler khi đăng nhập hoặc auth2.signOut trên đăng xuất.

  • Yêu cầu thêm quyền

    Trong demo này, thao tác nhấn nút được dùng để yêu cầu thêm OAuth 2.0 phạm vi, lấy mã truy cập mới và đối với người dùng đã đăng nhập, trang onload trả về thông tin đăng nhập của người dùng. Cần có sự tương tác của người dùng để đăng nhập và thiết lập một phiên mới.

    Khởi chạy thư viện được thực hiện bởi sự kiện onload cho phần tử Thư viện platform.js thông qua lệnh gọi đến gapi.signin2.render.

    Cử chỉ của người dùng, nhấp vào một phần tử <button>, sẽ kích hoạt yêu cầu các phạm vi OAuth 2.0 khác bằng googleUser.grant hoặc auth2.signOut khi đăng xuất.

  • Tích hợp tính năng Đăng nhập bằng Google bằng trình nghe

    Trong demo này, đối với người dùng đã đăng nhập, sự kiện trang onload sẽ trả về thông tin xác thực của người dùng. Người dùng phải tương tác để đăng nhập và thiết lập một phiên mới.

    Khởi chạy thư viện khi tải tài liệu bằng cách sử dụng hàm bắt đầu gọi gapi.load, gapi.auth2.init và gapi.auth2.attachClickHandler. Tiếp theo, auth2.isSignedIn.listen và auth2.currentUser.listen được dùng để thiết lập thông báo về các thay đổi đối với trạng thái phiên. Cuối cùng, auth2.SignIn được gọi để trả về thông tin xác thực cho người dùng đã đăng nhập.

    Cử chỉ của người dùng, sự kiện onclick của phần tử <div>, gọi auth2.signIn dùng auth2.attachClickHandler khi đăng nhập hoặc auth2.signOut trên đăng xuất.

  • Tính năng Đăng nhập bằng Google cho các ứng dụng phía máy chủ

    Trong demo này, một cử chỉ của người dùng được dùng để yêu cầu mã xác thực OAuth 2.0 và lệnh gọi lại JS thực hiện lệnh gọi AJAX để gửi phản hồi đến chương trình phụ trợ máy chủ để xác minh.

    Khởi chạy thư viện được thực hiện bằng cách sử dụng sự kiện onload cho platform.js thư viện này sử dụng hàm bắt đầu để gọi gapi.load và gapi.auth2.init.

    Cử chỉ của người dùng, nhấp vào một phần tử <button>, sẽ kích hoạt yêu cầu mã uỷ quyền bằng cách gọi auth2.grantOfflineAccess.

  • Đăng nhập một lần (SSO) trên nhiều nền tảng

    FedCM yêu cầu sự đồng ý đối với mọi phiên bản trình duyệt, ngay cả khi người dùng Android đã đăng nhập, cần sự đồng ý một lần.

Quản lý giai đoạn chuyển đổi

Trong thời gian chuyển đổi, tỷ lệ phần trăm đăng nhập của người dùng có thể sử dụng FedCM, tỷ lệ phần trăm chính xác có thể khác nhau và có thể thay đổi theo thời gian. Theo mặc định, Google sẽ kiểm soát số lượng yêu cầu đăng nhập sử dụng FedCM, nhưng bạn có thể chọn tham gia hoặc không tham gia sử dụng FedCM trong giai đoạn chuyển đổi. Khi kết thúc giai đoạn chuyển đổi FedCM trở thành bắt buộc và được sử dụng cho tất cả các yêu cầu đăng nhập.

Khi chọn tham gia, người dùng sẽ được chuyển qua quy trình đăng nhập FedCM trong khi chọn chọn không tham gia sẽ gửi người dùng qua quy trình đăng nhập hiện có. Hành vi này được kiểm soát bằng thông số use_fedcm.

Chọn sử dụng

Điều này có thể hữu ích khi bạn kiểm soát liệu tất cả hay một số nỗ lực đăng nhập vào trang web sử dụng API FedCM. Để làm việc này, hãy đặt use_fedcm thành true khi khởi chạy thư viện nền tảng. Trong trường hợp này, yêu cầu đăng nhập của người dùng sử dụng API FedCM.

Chọn không sử dụng

Trong thời gian chuyển đổi, có một tỷ lệ phần trăm người dùng cố gắng đăng nhập vào trang web của bạn sẽ sử dụng API FedCM theo mặc định. Nếu cần thêm thời gian để thực hiện thay đổi đối với bạn có thể tạm thời chọn không sử dụng API FedCM. Để thực hiện việc này, hãy đặt use_fedcm thành false khi khởi tạo thư viện nền tảng. Thông tin đăng nhập của người dùng sẽ không sử dụng API FedCM trong trường hợp này.

Sau khi áp dụng bắt buộc, mọi chế độ cài đặt của use_fedcm sẽ được bỏ qua Thư viện nền tảng đăng nhập bằng Google.

Nhận trợ giúp

Tìm kiếm hoặc đặt câu hỏi trên StackOverflow bằng cách sử dụng thẻ google-signin.