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

Nội dung cập nhật của FedCM: API trạng thái đăng nhập của IdP, Gợi ý đăng nhập và nhiều nội dung khác
bookmark_border Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Chrome 116 cung cấp các tính năng FedCM như API Gợi ý đăng nhập, API Thông tin người dùng và API Ngữ cảnh RP, đồng thời bắt đầu thử nghiệm gốc cho API Trạng thái đăng nhập của IdP.

Trong Chrome 116, Chrome sẽ ra mắt 3 tính năng mới sau đây về Quản lý thông tin xác thực liên kết (FedCM):

Login Hint API: Chỉ định tài khoản người dùng ưu tiên để đăng nhập.
User Info API (API Thông tin người dùng): Tìm nạp thông tin của người dùng đăng nhập lại để nhà cung cấp danh tính (IdP) có thể hiển thị nút đăng nhập được cá nhân hoá trong một iframe.
RP Context API: Sử dụng tiêu đề khác với "Đăng nhập" trong hộp thoại FedCM.

Ngoài ra, Chrome đang bắt đầu dùng thử nguồn gốc cho API trạng thái đăng nhập của IDP. API Trạng thái đăng nhập của IdP là một yêu cầu và sẽ là một thay đổi có thể gây lỗi khi được phân phối. Nếu bạn đã triển khai FedCM, hãy nhớ tham gia thử nghiệm theo nguyên gốc.

Khi FedCM được gọi, trình duyệt sẽ hiển thị tài khoản đã đăng nhập từ nhà cung cấp danh tính (IdP) đã chỉ định. Khi hỗ trợ nhiều tài khoản, IdP sẽ liệt kê tất cả tài khoản đã đăng nhập.

Hộp thoại FedCM hiển thị nhiều tài khoản người dùng. — Hộp thoại FedCM hiển thị nhiều tài khoản người dùng

Sau khi người dùng đăng nhập, đôi khi bên phụ thuộc (RP) sẽ yêu cầu người dùng xác thực lại. Tuy nhiên, người dùng có thể không chắc mình đang sử dụng tài khoản nào. Nếu RP có thể chỉ định tài khoản để đăng nhập, thì người dùng sẽ dễ dàng chọn tài khoản hơn. Gợi ý đăng nhập sẽ được cung cấp trong Chrome 116. Nhờ đó, RP có thể thu hẹp danh sách xuống còn một.

Tiện ích này thêm một mảng login_hints trong phản hồi điểm cuối danh sách tài khoản từ IdP, với tất cả các loại bộ lọc có thể có mà IdP hỗ trợ. Ví dụ: phản hồi về tài khoản có thể có dạng như sau khi một IdP hỗ trợ lọc theo email và mã nhận dạng:

{
  "accounts": [{
    "id": "demo1",
    "email": "demo1@example.com",
    "name": "John Doe",
    "login_hints": ["demo1", "demo1@example.com"],
    ...
  }, {
    "id": "demo2",
    "email": "demo2@example.com",
    "name": "Jane Doe",
    "login_hints": ["demo2", "demo2@example.com"],
    ...
  }, ...]
}

Bằng cách truyền login_hints trong danh sách tài khoản, RP có thể gọi navigator.credentials.get() bằng thuộc tính loginHint như trong đoạn mã mẫu sau để hiển thị có chọn lọc tài khoản đã chỉ định:

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "123",
      nonce: nonce,
      loginHint : "demo1@example.com"
    }]
  }
});

User Info API

Các nút đăng nhập được trang trí bằng biểu trưng của IdP cho phép người dùng đăng nhập bằng tính năng liên kết danh tính hiện đã trở nên phổ biến. Tuy nhiên, việc trang trí nút bằng biểu tượng hồ sơ của người dùng và thông tin của họ sẽ giúp người dùng đăng nhập một cách trực quan hơn, đặc biệt là khi người dùng đã đăng ký trên trang web này bằng IdP trước đó.

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

Nút Đăng nhập bằng Google được cá nhân hoá. — Nút Đăng nhập bằng Google được cá nhân hoá

Vấn đề là vì nút được cá nhân hoá phụ thuộc vào cookie của bên thứ ba trên miền IdP trong một iframe để xác định người dùng đã đăng nhập nhằm hiển thị nút, nên nút này sẽ không hoạt động sau khi cookie của bên thứ ba ngừng hoạt động.

User Info API (API Thông tin người dùng) được cung cấp trong Chrome 116, giúp IdP lấy thông tin của người dùng cũ từ máy chủ mà không phụ thuộc vào cookie của bên thứ ba.

API dự kiến sẽ được IdP gọi từ trong một iframe được nhúng trên trang web RP để có thể truy xuất thông tin người dùng và hiển thị một nút được cá nhân hoá như thể nút đó là một phần của giao diện RP. Với lệnh gọi API, trình duyệt sẽ gửi yêu cầu đến điểm cuối danh sách tài khoản, sau đó trả về một mảng thông tin người dùng nếu:

Người dùng đã đăng nhập vào RP bằng IdP thông qua FedCM trước đây trên cùng một phiên bản trình duyệt và dữ liệu chưa được xoá.
Người dùng đã đăng nhập vào IdP trên cùng một thực thể trình duyệt.

// Iframe displaying a page from the https://idp.example origin
const user_info = await IdentityProvider.getUserInfo({
    configUrl: "https://idp.example/fedcm.json",
    clientId: "client1234"
});

// IdentityProvider.getUserInfo returns an array of user information.
if (user_info.length > 0) {
  // Chrome puts returning accounts first, so the first account received is guaranteed to be a returning account.
  const name = user_info[0].name;
  const given_name = user_info[0].given_name;
  const display_name = given_name ? given_name : name;
  const picture = user_info[0].picture;
  const email = user_info[0].email;
  // Renders the personalized sign-in button with the information above.
}

Xin lưu ý rằng để cho phép gọi IdentityProvider.getUserInfo() từ trong một khung iframe có cùng nguồn gốc với IdP, HTML nhúng phải cho phép rõ ràng bằng chính sách quyền identity-credentials-get.

<iframe src="https://fedcm-idp-demo.glitch.me" allow="identity-credentials-get"></iframe>

Bạn có thể xem ví dụ thực tế tại https://fedcm-rp-demo.glitch.me/button.

RP Context API

API ngữ cảnh RP, được cung cấp trong Chrome 116, cho phép RP sửa đổi chuỗi trong giao diện người dùng hộp thoại FedCM để có thể chứa các ngữ cảnh xác thực được xác định trước. Hãy xem các ảnh chụp màn hình sau đây để biết các lựa chọn:

Hộp thoại FedCM được kết xuất bằng — Hộp thoại FedCM hiển thị với nội dung "Đăng nhập vào ****". Đây là tuỳ chọn mặc định nếu bạn không chỉ định Ngữ cảnh RP.

Cách sử dụng rất đơn giản; hãy cung cấp thuộc tính identity.context là một trong các thuộc tính "signin" (mặc định), "signup", "use" hoặc "continue".

const credential = await navigator.credentials.get({
  identity: {
    // "signin" is the default, "signup", "use" and "continue" 
    // can also be used
    context: "signup", 
    providers: [{
      configURL: "https://idp.example/fedcm.json",
      clientId: "1234",
    }],
  }
});

Chrome bắt đầu dùng thử API Trạng thái đăng nhập của IDP theo nguyên gốc trên máy tính từ Chrome 116, sau đó là Chrome cho Android. Bản dùng thử theo nguyên gốc cấp cho bạn quyền sử dụng một tính năng mới hoặc tính năng thử nghiệm để xây dựng chức năng mà người dùng có thể dùng thử trong một khoảng thời gian giới hạn trước khi tính năng đó được cung cấp cho mọi người.

API Trạng thái đăng nhập của IdP là một cơ chế mà IdP thông báo cho trình duyệt về trạng thái đăng nhập của người dùng trên IdP. Với API này, trình duyệt có thể giảm các yêu cầu không cần thiết đến IdP và giảm thiểu các cuộc tấn công theo thời gian tiềm ẩn.

Lưu ý: FedCM giới thiệu một yêu cầu có thông tin xác thực đến điểm cuối danh sách tài khoản. Yêu cầu này không gửi dữ liệu xác định người yêu cầu và cũng không cho phép truyền dữ liệu do RP cung cấp; tuy nhiên, trình duyệt thực hiện riêng một yêu cầu không có thông tin xác thực chứa thông tin RP đến client_metadata_endpoint, sau đó máy chủ IdP có thể liên kết yêu cầu không có thông tin xác thực với yêu cầu có thông tin xác thực (tính ngẫu nhiên) bằng cách sử dụng thời gian hoặc dữ liệu vân tay số khác. Hãy tham khảo các trang trình bày này để biết thêm thông tin chi tiết.

Thông báo cho trình duyệt về trạng thái đăng nhập của người dùng

Các IdP có thể báo hiệu trạng thái đăng nhập của người dùng cho trình duyệt bằng cách gửi tiêu đề HTTP hoặc bằng cách gọi API JavaScript, khi người dùng đăng nhập vào IdP hoặc khi người dùng đăng xuất khỏi tất cả tài khoản IdP của họ. Trình duyệt ghi lại trạng thái dưới dạng một trong các trạng thái sau: "đăng nhập", "đăng xuất" hoặc "không xác định" (mặc định).

Để báo hiệu rằng người dùng đã đăng nhập, hãy gửi tiêu đề HTTP IdP-SignIn-Status: action=signin trong một thao tác điều hướng cấp cao nhất hoặc yêu cầu tài nguyên phụ có cùng nguồn gốc:

IdP-SignIn-Status: action=signin

Ngoài ra, hãy gọi API JavaScript IdentityProvider.login() từ nguồn IdP:

IdentityProvider.login()

Các sự kiện này sẽ ghi lại trạng thái đăng nhập của người dùng là "đăng nhập". Khi trạng thái đăng nhập của người dùng được đặt thành "đăng nhập", lệnh gọi PR đến FedCM sẽ gửi yêu cầu đến điểm cuối danh sách tài khoản của IdP và hiển thị các tài khoản có sẵn cho người dùng trong hộp thoại FedCM.

Để báo hiệu rằng người dùng đã đăng xuất khỏi tất cả tài khoản của họ, hãy gửi tiêu đề HTTP IdP-SignIn-Status: action=signout-all trong một thao tác điều hướng cấp cao nhất hoặc yêu cầu tài nguyên phụ cùng nguồn gốc:

IdP-SignIn-Status: action=signout-all

Ngoài ra, hãy gọi API JavaScript IdentityProvider.logout() từ nguồn IdP:

IdentityProvider.logout()

Các sự kiện này sẽ ghi lại trạng thái đăng nhập của người dùng là "đăng xuất". Khi trạng thái đăng nhập của người dùng là "đăng xuất", lệnh gọi FedCM sẽ không thành công mà không tạo yêu cầu đến điểm cuối danh sách tài khoản của IdP.

Theo mặc định, trạng thái đăng nhập bằng IdP được đặt thành "không xác định". Trạng thái này được sử dụng trước khi IdP gửi tín hiệu bằng API Trạng thái đăng nhập của IdP. Chúng tôi giới thiệu trạng thái này để chuyển đổi hiệu quả hơn vì người dùng có thể đã đăng nhập vào IdP khi chúng tôi phân phối API này và IdP có thể không có cơ hội báo hiệu điều này cho trình duyệt vào thời điểm FedCM được gọi lần đầu tiên. Trong trường hợp này, chúng ta sẽ gửi một yêu cầu đến điểm cuối danh sách tài khoản của IdP và cập nhật trạng thái dựa trên phản hồi từ điểm cuối danh sách tài khoản:

Nếu điểm cuối trả về danh sách các tài khoản đang hoạt động, hãy cập nhật trạng thái thành "đăng nhập" và mở hộp thoại FedCM để hiển thị các tài khoản đó.
Nếu điểm cuối không trả về tài khoản nào, hãy cập nhật trạng thái thành "đăng xuất" và không thực hiện được lệnh gọi FedCM.

Điều gì sẽ xảy ra nếu phiên người dùng hết hạn? Cho phép người dùng đăng nhập thông qua quy trình đăng nhập linh động

Mặc dù IdP tiếp tục thông báo cho trình duyệt về trạng thái đăng nhập của người dùng, nhưng trạng thái này có thể không đồng bộ, chẳng hạn như khi phiên hết hạn. Trình duyệt cố gắng gửi yêu cầu xác thực đến điểm cuối danh sách tài khoản khi trạng thái đăng nhập là "đăng nhập", nhưng máy chủ từ chối yêu cầu đó vì phiên không còn hoạt động nữa. Trong trường hợp như vậy, trình duyệt có thể linh động cho phép người dùng đăng nhập vào IdP thông qua một cửa sổ bật lên.

Hộp thoại FedCM sẽ hiển thị một thông báo, như trong hình sau:

Hộp thoại FedCM đề xuất đăng nhập vào IdP.

Khi người dùng nhấp vào nút Tiếp tục, trình duyệt sẽ mở một cửa sổ bật lên để chuyển người dùng đến trang đăng nhập của IdP.

Bạn có thể chỉ định URL trang đăng nhập (phải là nguồn gốc của IdP) bằng signin_url trong tệp cấu hình IdP.

{
  "accounts_endpoint": "/auth/accounts",
  "client_metadata_endpoint": "/auth/metadata",
  "id_assertion_endpoint": "/auth/idtokens",
  "signin_url": "/signin"
  }
}

Cửa sổ bật lên là một cửa sổ trình duyệt thông thường sử dụng cookie của bên thứ nhất. Mọi việc xảy ra trong cửa sổ nội dung đều tuỳ thuộc vào IdP, nhưng không có tay điều khiển cửa sổ nào để tạo yêu cầu giao tiếp nhiều nguồn gốc đến trang RP. Sau khi người dùng đăng nhập, IdP phải:

Gửi tiêu đề IdP-SignIn-Status: action=signin hoặc gọi API IdentityProvider.login() để thông báo cho trình duyệt rằng người dùng đã đăng nhập.
Gọi IdentityProvider.close() để tự đóng (cửa sổ bật lên).

// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
  // Signal to the browser that the user has signed in.
  IdentityProvider.close();
}

Người dùng đăng nhập vào một RP sau khi đăng nhập vào IdP bằng FedCM

Lưu ý: Trải nghiệm đăng nhập động này dành cho trường hợp phiên IdP đã hết hạn mà không có thao tác đăng xuất rõ ràng, khiến trạng thái đăng nhập của trình duyệt mâu thuẫn với trạng thái thực tế. Lệnh này sẽ không được kích hoạt đối với những người dùng chưa đăng nhập vào IdP. Quy trình mới này được thiết kế để áp dụng cho các trường hợp trạng thái đăng nhập của IdP trên trình duyệt là "đăng nhập" nhưng điểm cuối danh sách tài khoản của IdP không trả về tài khoản nào.

Giả sử API Trạng thái đăng nhập của IdP được gọi ngay lập tức, khi FedCM được gọi, bất kỳ trường hợp nào sau đây đều có thể xảy ra:

Nếu trình duyệt không biết trạng thái đăng nhập của người dùng ("không xác định"), trạng thái này sẽ được cập nhật ("đăng nhập" hoặc "đăng xuất") tuỳ thuộc vào phản hồi của IdP từ điểm cuối danh sách tài khoản. Quy trình đăng nhập động sẽ không được kích hoạt.
Nếu người dùng đã đăng nhập vào IdP trên trình duyệt ("đăng nhập"), sau đó đăng xuất rõ ràng khỏi IdP ("đăng xuất"), thì quy trình đăng nhập động sẽ không được kích hoạt.
Nếu người dùng đã đăng nhập vào IdP trên trình duyệt ("đăng nhập"), nhưng phiên đăng nhập hết hạn mà không có thao tác đăng xuất rõ ràng, thì quy trình đăng nhập động sẽ được kích hoạt.

API Trạng thái đăng nhập của IdP không cho phép RP hiển thị hộp thoại "Đăng nhập vào IdP" cho những người dùng chưa đăng nhập vào IdP. Đây là một tính năng riêng biệt có thể được thêm vào trong tương lai.

Bạn có thể thử hành vi của API Trạng thái đăng nhập qua IdP trong mẫu minh hoạ của chúng tôi. Phiên này sẽ hết hạn sau 3 phút kể từ khi bạn đăng nhập vào Trình cung cấp dịch vụ nhận dạng (IdP) minh hoạ. Sau đó, bạn có thể quan sát quá trình đăng nhập vào IdP thông qua hành vi của cửa sổ bật lên.

Tham gia thử nghiệm về nguồn gốc

Bạn có thể thử API Trạng thái đăng nhập của IdP trên máy bằng cách bật cờ Chrome
chrome://flags#fedcm-idp-signin-status-api trên
Chrome 116 trở lên.

Bạn cũng có thể bật API Trạng thái đăng nhập qua IdP bằng cách đăng ký thử nghiệm nguồn gốc hai lần:

Đăng ký bản dùng thử nguồn gốc cho IdP.
Đăng ký bản dùng thử nguồn gốc 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 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 API Trạng thái đăng nhập của IdP có trong Chrome 116 đến Chrome 119.

Đăng ký bản dùng thử nguồn gốc cho IdP

Truy cập trang đăng ký dùng thử phiên bản gốc.
Nhấp vào nút Register (Đă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 là Nguồn gốc web.
Nhấp vào Gửi.
Thêm thẻ origin-trial <meta> vào đầu các trang sử dụng IdentityProvider.close(). Ví dụ: mã này có thể có dạng như sau:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

Cảnh báo: Việc gửi tiêu đề HTTP Origin-Trial sẽ không hoạt động với API này.

Đăng ký bản dùng thử nguồn gốc bên thứ ba cho RP

Truy cập trang đăng ký dùng thử phiên bản gốc.
Nhấp vào nút Register (Đă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 là Nguồn gốc web.
Đánh dấu vào So khớp bên thứ ba để chèn mã thông báo bằng JavaScript trên các nguồn gốc khác.
Nhấp vào Gửi.
Nhúng mã thông báo đã phát hành trên trang web của bên thứ ba.

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

Tham gia và chia sẻ ý kiến phản hồi

Nếu có ý kiến phản hồi hoặc gặp vấn đề trong quá trình kiểm thử, bạn có thể chia sẻ ý kiến phản hồi hoặc vấn đề đó tại crbug.com.

Ảnh chụp của Dan Cristian Pădureț trên Unsplash