Một số công nghệ Hộp cát về quyền riêng tư đang được từng bước loại bỏ.

Vui lòng xem Thông tin cập nhật về kế hoạch triển khai các công nghệ của Hộp cát về quyền riêng tư.

Trạng thái tính năng Hộp cát về quyền riêng tư cung cấp thêm thông tin về trạng thái của từng API và tính năng nền tảng.

Trang này được dịch bởi Cloud Translation API.

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

Kể từ Chrome 125, Button Mode API sẽ bắt đầu một bản dùng thử theo nguyên gốc trên máy tính. Với Button Mode API, nhà cung cấp dịch vụ danh tính có thể sử dụng FedCM API ngay cả khi người dùng không có phiên IdP đ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 liên kết của họ mà không cần được chuyển hướng đến trang web 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 quy trình tiện ích hiện có vì giao diện này được kiểm soát bằng cử chỉ của người dùng và phản ánh rõ hơn ý định đăng nhập của người dùng.

Button Mode API (API Chế độ nút)

Giao diện người dùng FedCM có sẵn dưới dạng một tiện ích xuất hiện ở góc trên cùng bên phải trên máy tính hoặc dưới dạng một trang tính dưới cùng trên thiết bị di động, ngay khi API được gọi. Điều này có thể xảy ra khi người dùng truy cập vào bên thứ ba đáng tin cậy (RP). Đây được gọi là chế độ tiện ích. Để hiển thị tiện ích, 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 họ có thể cho phép người dùng đăng nhập vào RP bằng tài khoản có trên IdP. FedCM sắp thêm một cách để thực hiện việc này.

Ở chế độ tiện ích, một hộp thoại sẽ xuất hiện ở 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.

Button Mode API mới bổ sung một chế độ giao diện người dùng mới có tên là chế độ button. Không giống như chế độ tiện ích, chế độ nút không được dùng để gọi ngay khi người dùng truy cập vào RP. Thay vào đó, phương thức này được dùng để 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 khi người dùng nhấn vào 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 một lệnh tìm nạp đến điểm cuối tài khoản hoặc trạng thái đăng nhập được lưu trữ vào 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 login_url do IdP cung cấp thông qua một 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 bằng cửa sổ bật lên, FedCM sẽ mở một 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.

Trong giao diện người dùng ở chế độ nút, hộp thoại đăng nhập hiển thị sẽ lớn hơn so với chế độ tiện ích. Do đó, biểu tượng thương hiệu cũng phải lớn hơn để duy trì tính nhất quán về mặt hình ảnh. Mặc dù kích thước biểu tượng tối thiểu cho chế độ tiện ích là 25x25px, nhưng kích thước tối thiểu cho biểu tượng ở chế độ nút là 40x40px. Tệp công khai của IdP cho phép chỉ định nhiều URL biểu tượng như sau:

{
  // ... Other settings (like endpoints) here
  "branding": {
    "icons": [
      {
        "url": "https://size-25px-image",
        "size": 25,
      },
      {
        "url": "https://size-40px-image",
        "size": 40
      }
    ]
  }
}

Ở chế độ nút, một hộp thoại phương thức sẽ xuất hiện ở trên cùng chính giữa trên Chrome dành cho máy tính. — Ở chế độ nút, một hộp thoại phương thức sẽ xuất hiện ở trên cùng chính giữa trên Chrome dành cho máy tính, với biểu tượng lớn hơn.

Hãy tự mình dùng thử bằng Chrome 125 tại https://fedcm-demo-rp.dev/active-mode.

Người dùng đang đăng nhập vào RP bằng Button Mode API.

Cách sử dụng Button Mode API:

Bật tính năng thử nghiệm FedCmButtonMode trong chrome://flags.
Đảm bảo gọi API đằng sau hoạt động kích hoạt tạm thời của người dùng, chẳng hạn như một lượt nhấp vào nút.
Gọi API bằng tham số mode như sau:

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

Trình duyệt sẽ gửi một tham số mới đến điểm cuối xác nhận danh tính, biểu thị 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

Phát hiện đối tượng

Để xác định xem trình duyệt có đủ điều kiện sử dụng chế độ nút hay không, bạn có thể kiểm tra bằng đoạn mã sau:

let supportsFedCmMode = false;
try {
  navigator.credentials.get({
    identity: Object.defineProperty(
      {}, 'mode', {
        get: function () { supportsFedCmMode = true; }
      }
    )
  });
} catch(e) {}

if (supportsFedCmMode) {
  // The button mode is supported.
}

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

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 có.

Cách bật lựa 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ý dùng thử Button Mode API từ nguồn gốc.
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 dùng thử nguồn gốc

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

IdP cũng có thể bật Chế độ nút bằng cách đăng ký một thử nghiệm nguồn gốc:

Đăng ký thử nghiệm nguồ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à gửi ý kiến phản hồi về khả năng sử dụng, tính thực tế và 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 Button Mode API có sẵn từ Chrome 125 đến Chrome 130.

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

Để nhúng mã thông báo vào trang web của bên thứ ba, hãy thêm mã sau vào thư viện JavaScript hoặc SDK của IdP đượ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.

CORS và `SameSite=None` sẽ là bắt buộc trong Chrome 125

CORS

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

CORS (Chia sẻ tài nguyên trên nhiều nguồn gốc) là một hệ thống bao gồm việc truyền tiêu đề HTTP, xác định xem trình duyệt có chặn mã JavaScript giao diện người dùng truy cập vào các phản hồi cho yêu cầu trên nhiều nguồn gốc hay không. Điểm cuối xác nhận danh tính 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

SameSite=None

Tham số SameSite của cookie khai báo liệu cookie có bị hạn chế trong bối cảnh bên thứ nhất hay same-site hay không. 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 tài khoản, điểm cuối xác nhận giá trị nhận dạng và điểm cuối ngắt kết nối. Kể từ Chrome 125, Chrome sẽ chỉ gửi những yêu cầu có thông tin xác thực đó kèm theo cookie được đánh dấu rõ ràng là SameSite=None.