Nội dung cập nhật của FedCM: Bản dùng thử theo nguyên gốc API Chế độ nút, CORS và SameSite

Eiji Kitamura

Từ Chrome 125, Button Mode API (API Chế độ nút) sẽ bắt đầu chạy bản dùng thử theo nguyên gốc trên máy tính. Với API Chế độ nút, nhà cung cấp danh tính có thể sử dụng API FedCM ngay cả khi người dùng không có phiên IdP nào đang hoạt động khi gọi API. Sau đó, người dùng có thể đăng nhập vào một trang web bằng tài khoản được liên kết của họ mà không cần phải chuyển đến trang web của IdP. Giao diện người dùng FedCM ở chế độ nút nổi bật hơn so với giao diện người dùng trong luồng tiện ích hiện có, vì giao diện này chịu sự kiểm soát của cử chỉ của người dùng và phản ánh tốt hơn ý định đăng nhập của người dùng.

API Chế độ nút

Giao diện người dùng FedCM đã có sẵn dưới dạng một tiện ích hiển thị ở góc trên cùng bên phải trên máy tính hoặc dưới dạng bảng dưới cùng trên thiết bị di động, ngay sau khi API được gọi, có thể là khi người dùng truy cập vào bên đáng tin cậy (RP). Đây được gọi là chế độ tiện ích. Để hiển thị tiện ích này, người dùng phải đăng nhập vào IdP trước khi truy cập vào RP. Bản thân FedCM không có cách đáng tin cậy để cho phép người dùng đăng nhập vào IdP trước khi cho phép người dùng đăng nhập vào RP bằng tài khoản có sẵn trên IdP. FedCM sắp thêm một cách để thực hiện việc này.

Khi bạn dùng chế độ tiện ích, một hộp thoại sẽ hiển thị ở góc trên cùng bên phải trên Chrome dành cho máy tính mà không cần người dùng kích hoạt.

API Chế độ nút mới bổ sung một chế độ giao diện người dùng mới có tên là chế độ nút. Không giống như chế độ tiện ích, chế độ nút không được gọi ngay khi người dùng chuyển đến RP. Thay vào đó, phương thức này sẽ được gọi khi người dùng bắt đầu một quy trình đăng nhập, chẳng hạn như nhấn vào nút "Đăng nhập bằng IdP".

Ngay sau khi người dùng nhấn nút này, FedCM sẽ kiểm tra xem người dùng đã đăng nhập vào IdP hay chưa thông qua quá trình tìm nạp đến điểm cuối của tài khoản hay trạng thái đăng nhập được lưu trữ trên trình duyệt. Nếu người dùng chưa đăng nhập, FedCM sẽ yêu cầu người dùng đăng nhập vào IdP bằng cách sử dụng login_url do IdP cung cấp thông qua cửa sổ bật lên. Nếu trình duyệt biết rằng người dùng đã đăng nhập vào IdP hoặc ngay khi người dùng đăng nhập vào IdP thông qua cửa sổ bật lên, FedCM sẽ mở hộp thoại phương thức để người dùng chọn tài khoản IdP để đăng nhập. Bằng cách chọn một tài khoản, người dùng có thể tiếp tục đăng nhập vào RP bằng tài khoản IdP.

Khi dùng chế độ nút, một hộp thoại phương thức sẽ hiển thị ở trên cùng chính giữa trên trình duyệt Chrome dành cho máy tính.

Hãy tự mình trải nghiệm bằng Chrome 125 tại https://fedcm-rp-demo.glitch.me/button_flow.

Một người dùng đang đăng nhập vào RP bằng API Chế độ nút.

Cách sử dụng API Chế độ nút:

• Bật tính năng thử nghiệm FedCmButtonMode trong chrome://flags.
• Hãy nhớ gọi API sau khi kích hoạt người dùng tạm thời, chẳng hạn như nhấp vào nút.
• Gọi API bằng tham số mode như bên dưới:

  return await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: "https://idp.example/config.json",
        clientId: "123",
        nonce:"456",
      }],
      mode: "button"
    }
  });

Lưu ý: Chrome hiện chỉ hỗ trợ "button" trong thuộc tính mode mới. Các thuộc tính khác như "widget" sẽ được thêm vào khi Chrome triển khai tính năng này.

Trình duyệt sẽ gửi một tham số mới đến điểm cuối xác nhận mã nhận dạng đại diện cho loại yêu cầu bằng cách thêm mode=button:

POST /fedcm_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity
account_id=123&client_id=client1234&nonce=Ct60bD&disclosure_text_shown=true&is_auto_selected=false&mode=button

Lưu ý: Khi xảy ra sự cố, lệnh gọi API FedCM sử dụng chế độ nút sẽ phản hồi ngay lập tức, còn với chế độ tiện ích, lệnh gọi API này sẽ chủ ý trì hoãn phản hồi. Lý do là vì trạng thái đăng nhập của người dùng vào IdP được coi là thông tin riêng tư và việc gửi tín hiệu lỗi sẽ sớm cung cấp cho RP gợi ý về trạng thái đăng nhập qua IdP của người dùng. Với chế độ nút, người dùng vẫn được yêu cầu đăng nhập vào IdP và không cần hiển thị trạng thái đăng nhập IdP của người dùng cho RP.

Lưu ý: Người dùng có thể tắt chế độ tiện ích FedCM trong phần cài đặt Chrome. Điều này không ảnh hưởng đến Button Mode API (API Chế độ nút) vì yêu cầu đăng nhập do cử chỉ của người dùng khởi tạo và trình duyệt sẽ hỗ trợ người dùng hoàn tất quy trình đăng nhập.

Sử dụng lựa chọn khác của tài khoản

RP có thể cho phép người dùng "sử dụng tài khoản khác" trong trình chọn tài khoản, chẳng hạn như khi IdP hỗ trợ nhiều tài khoản hoặc thay thế tài khoản hiện tại.

Cách bật tuỳ chọn sử dụng tài khoản khác:

• Bật tính năng thử nghiệm FedCmUseOtherAccount trong chrome://flags hoặc đăng ký bản dùng thử theo nguyên gốc API Chế độ nút.
• IdP chỉ định những thông tin sau trong tệp cấu hình IdP:

{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

Tham gia bản dùng thử theo nguyên gốc

Bạn có thể dùng thử API Chế độ nút trên máy bằng cách bật cờ Chrome chrome://flags#fedcm-button-mode trên Chrome 125 trở lên.

Nhà cung cấp danh tính (IdP) cũng có thể bật Chế độ nút bằng cách đăng ký bản dùng thử theo nguyên gốc:

• Đăng ký bản dùng thử theo nguyên gốc của bên thứ ba cho RP.

Bản dùng thử theo nguyên gốc cho phép bạn dùng thử các tính năng mới và đưa ra ý kiến phản hồi về khả năng hữu dụng, tính thực tiễn và tính hiệu quả của các tính năng đó cho cộng đồng tiêu chuẩn web. Để biết thêm thông tin, hãy xem Hướng dẫn về bản dùng thử theo nguyên gốc dành cho nhà phát triển web.

Bản dùng thử theo nguyên gốc API Chế độ nút hiện có trên Chrome 125 thông qua Chrome 127.

1. Chuyển đến trang đăng ký dùng thử theo nguyên gốc.
2. Nhấp vào nút Đăng ký rồi điền vào biểu mẫu để yêu cầu mã thông báo.
3. Nhập nguồn gốc của IdP dưới dạng Nguồn gốc web.
4. Kiểm tra tính năng So khớp bên thứ ba để chèn mã thông báo có JavaScript trên các nguồn gốc khác.
5. Nhấp vào Gửi.
6. Nhúng mã thông báo đã phát hành vào trang web của bên thứ ba.

Để nhúng mã thông báo trên một trang web của bên thứ ba, hãy thêm mã sau vào thư viện JavaScript của IdP hoặc SDK được phân phát từ nguồn gốc của IdP.

const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);

Thay thế TOKEN_GOES_HERE bằng mã thông báo của riêng bạn.

Lưu ý: Nếu API FedCM được RP gọi chứ không phải thông qua tập lệnh tải từ IdP, thì RP phải tự đăng ký nguồn gốc và chạy bản dùng thử theo nguyên gốc của bên thứ nhất.

Cần có CORS và SameSite=None trong Chrome 125

CORS

Chrome sẽ thực thi CORS trên điểm cuối xác nhận mã nhận dạng kể từ Chrome 125.

CORS (chia sẻ tài nguyên nhiều nguồn gốc ) là một hệ thống, bao gồm việc truyền các tiêu đề HTTP, giúp xác định xem trình duyệt có chặn mã JavaScript ngoài giao diện người dùng truy cập phản hồi cho các yêu cầu trên nhiều nguồn gốc hay không. Điểm cuối xác nhận mã nhận dạng trên máy chủ IdP phải phản hồi yêu cầu bằng các tiêu đề bổ sung. Sau đây là ví dụ về tiêu đề phản hồi cho một yêu cầu từ https://fedcm-rp-demo.glitch.me:

Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true

Lưu ý: Vì Access-Control-Allow-Credentials được đặt thành true (đúng) nên Access-Control-Allow-Origin phải trả về miền một cách rõ ràng và không thể sử dụng ký tự đại diện do * chỉ định.

SameSite=Không có

Tham số SameSite của cookie khai báo liệu cookie bị hạn chế ở ngữ cảnh bên thứ nhất hay cùng trang web. Bằng cách chỉ định giá trị này là None, cookie có thể được gửi đến một miền của bên thứ ba.

Trong FedCM, Chrome sẽ gửi cookie đến điểm cuối của tài khoản, điểm cuối xác nhận mã nhận dạng và điểm cuối ngắt kết nối. Kể từ Chrome 125, Chrome sẽ chỉ gửi các yêu cầu đã được xác thực đó kèm theo cookie được đánh dấu rõ ràng là SameSite=None.