Từ Chrome 142, bạn có thể chọn hiển thị miền của iframe trong giao diện người dùng FedCM khi Bên tin cậy (RP) được nhúng dưới dạng iframe của bên thứ ba trên một trang web khác. Tính năng này giúp tăng tính minh bạch cho người dùng khi họ đăng nhập vào một dịch vụ được nhúng trên một trang web khác.
Thông tin khái quát
Trước đây, khi FedCM được gọi từ bên trong một iframe nhiều nguồn, giao diện người dùng của hộp thoại FedCM sẽ chỉ hiển thị miền của trang web cấp cao nhất. Điều này có thể khiến người dùng nhầm lẫn nếu dịch vụ mà họ đang tương tác khác với trang web cấp cao nhất. Ví dụ: người dùng có thể truy cập vào một trang web tin tức có nhúng một tiện ích bình luận. Khi người dùng cố gắng đăng nhập vào tiện ích bình luận, hộp thoại FedCM sẽ chỉ hiển thị miền của trang web tin tức, chứ không hiển thị miền của dịch vụ bình luận:
Để giải quyết vấn đề này, Chrome hiện có một cách để IdP cho biết miền của iframe nơi mã thông báo được gửi đến trong hộp thoại FedCM, ngoài miền của trang web cấp cao nhất. Điều này giúp người dùng nắm rõ hơn về những dịch vụ bên thứ ba tham gia vào quy trình đăng nhập.
Triển khai
Điểm cuối siêu dữ liệu của ứng dụng khách của IdP nhận cả client_id và tuỳ chọn top_frame_origin, ví dụ:
GET /client_metadata_endpoint?client_id=1234&top_frame_origin=https%3A%2F%2Ftop-frame.example HTTP/1.1
Host: idp.example
Origin: https://iframe.example/
Accept: application/json
Sec-Fetch-Dest: webidentity
Sau đó, IdP có thể triển khai logic tuỳ chỉnh để xác định xem RP và trang web cấp cao nhất có phải là cùng một bên hay không. Nếu RP sở hữu cả trang web cấp cao nhất và iframe, thì IdP có thể chọn chỉ hiển thị miền cấp cao nhất (đây là hành vi mặc định). Để hiển thị cả hai miền, IdP cần thêm thuộc tính client_is_third_party_to_top_frame_origin vào phản hồi điểm cuối siêu dữ liệu của máy khách và đặt giá trị của thuộc tính này thành true.
Sau đây là ví dụ về phản hồi của điểm cuối siêu dữ liệu của ứng dụng:
// In the client metadata endpoint
const clientIsThirdParty = isClientOriginDifferentFromTopFrame();
responseData = {
privacy_policy_url: "..."
terms_of_service_url: "...",
client_is_third_party_to_top_frame_origin: clientIsThirdParty,
}
Khi thuộc tính này được đặt thành true và RP được nhúng dưới dạng iframe trên một trang web khác, hộp thoại FedCM sẽ hiển thị cả miền của trang web cấp cao nhất và miền của iframe. Điều này cung cấp cho người dùng thêm bối cảnh về yêu cầu đăng nhập.
Giá trị mặc định của client_is_third_party_to_top_frame_origin là false, nên những lượt triển khai hiện có sẽ không bị ảnh hưởng bởi thay đổi này.
Bạn có thể xem thêm thông tin chi tiết trong tài liệu về cách triển khai FedCM trên một Nhà cung cấp danh tính.
Dùng thử
Bạn có thể xem bản minh hoạ trực tiếp về tính năng này tại fedcm-demo-rp.dev/iframe. Mã này được lưu trữ trong kho lưu trữ GitHub minh hoạ.
Chúng tôi rất mong nhận được ý kiến phản hồi của bạn về tính năng này và các tính năng khác của FedCM. Chia sẻ ý kiến của bạn và báo cáo mọi vấn đề trên kho lưu trữ FedCM trên GitHub.