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

Chrome 116 cung cấp các tính năng của 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 bản dùng thử theo nguyên gốc cho API trạng thái đăng nhập của IdP.

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

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

Ngoài ra, Chrome sẽ bắt đầu bản dùng thử theo nguyên gốc cho API Trạng thái đăng nhập IdP. API trạng thái đăng nhập của IdP là một yêu cầu và sẽ là thay đổi có thể gây lỗi khi được vận chuyển. Nếu bạn đang triển khai FedCM, hãy nhớ tham gia chương trình dùng thử 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ê mọi 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 đáng tin cậy (RP) 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 chắn mình đang sử dụng tài khoản nào. Nếu bên bị hạn chế có thể chỉ định tài khoản để đăng nhập thì sẽ dễ dàng hơn cho người dùng. Gợi ý đăng nhập là cách vận chuyển trong Chrome 116 và với gợi ý này, RP có thể thu hẹp danh sách xuống còn một người.

Tiện ích này thêm một mảng login_hints vào phản hồi điểm cuối của 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 của tài khoản có thể có dạng như sau khi một IdP hỗ trợ tính năng 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 chuyển login_hints vào danh sách tài khoản, RP có thể gọi navigator.credentials.get() với thuộc tính loginHint như minh hoạ trong mã mẫu sau đây để hiển thị có chọn lọc tài khoản được chỉ định:

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

API Thông tin người dùng

Hiện nay, 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 liên kết danh tính đã trở nên phổ biến. Tuy nhiên, hãy 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ọ thậm chí còn trực quan hơn để đăng nhập, đặc biệt là khi người dùng đã đăng ký trên trang web này với IdP trước đây.

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 được cá nhân hoá bằng Google

Thách thức ở đây 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 iframe để xác định người dùng đã đăng nhập để hiển thị nút, nên nút này sẽ không hoạt động khi cookie của bên thứ ba không được dùng nữa.

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

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

Trước đây, người dùng đã đăng nhập vào RP bằng IdP thông qua FedCM trên cùng một phiên bản trình duyệt và dữ liệu chưa bị xoá.
Người dùng đăng nhập vào IdP trên cùng một phiên bản 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.
}

Lưu ý rằng để cho phép gọi IdentityProvider.getUserInfo() từ bên trong iframe có cùng nguồn gốc với IdP, HTML nhúng phải cho phép rõ ràng với chính sách về 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.

API ngữ cảnh RP

RP Context API, vận chuyển 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ể phù hợp với 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 những cách khác nhau:

Hộp thoại FedCM hiển thị với nội dung "Đăng nhập vào ****". Đây là lựa 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, một trong các giá trị "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 bản dùng thử theo nguyên gốc API trạng thái đăng nhập IdP trên máy tính từ Chrome 116, sau đó là Android Chrome. Bản dùng thử theo nguyên gốc cấp cho bạn quyền truy cập vào 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 có hạn trước khi tính năng này được cung cấp cho mọi người.

API trạng thái đăng nhập IdP là một cơ chế trong đó 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 có thể xảy ra về thời gian.

Lưu ý: FedCM đưa ra yêu cầu đã xác thực đến điểm cuối của danh sách tài khoản. Yêu cầu này không gửi dữ liệu nhận dạng 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 xác thực chứa thông tin RP cho client_metadata_endpoint, sau đó máy chủ IdP có thể tương quan yêu cầu không xác thực với yêu cầu được xác thực (một cách ngẫu nhiên) bằng cách sử dụng thời gian hoặc các dữ liệu vân tay 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

IdP có thể báo hiệu trạng thái đăng nhập của người dùng với 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 trên IdP hoặc khi người dùng đăng xuất khỏi tất cả cá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 phần đ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, bạn có thể gọi API JavaScript IdentityProvider.login() từ nguồn gốc IdP:

IdentityProvider.login()

Các bản ghi 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", FedCM gọi PR 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 thành phần đ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=signout-all

Ngoài ra, bạn có thể gọi API JavaScript IdentityProvider.logout() từ nguồn gốc IdP:

IdentityProvider.logout()

Các bản ghi 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", việc gọi FedCM sẽ tự động không thực hiện được mà không gửi yêu cầu đến điểm cuối trong danh sách tài khoản của IdP.

Theo mặc định, trạng thái đăng nhập qua IdP được đặt thành "không xác định". Trạng thái này được 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 hiển thị trạng thái này để chuyển đổi tốt hơn vì người dùng có thể đã đăng nhập vào IdP khi chúng tôi gử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 tôi sẽ gửi yêu cầu đến điểm cuối trong 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 của danh sách tài khoản:

Nếu điểm cuối trả về danh sách 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 một quy trình đăng nhập độ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 có thể trạng thái đó không đồng bộ, chẳng hạn như khi phiên hết hạn. Trình duyệt sẽ cố gắng gửi một yêu cầu đã xác thực đến điểm cuối của 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 nữa. Trong trường hợp như vậy, trình duyệt có thể cho phép người dùng tự động đăng nhập vào IdP thông qua 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. — Hộp thoại của FedCM đề xuất đăng nhập vào IdP.

Khi bạn nhấp vào nút Continue (Tiếp tục), trình duyệt sẽ mở một cửa sổ bật lên gửi 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à cửa sổ trình duyệt thông thường sử dụng cookie của bên thứ nhất. Bất kỳ điều gì xảy ra trong cửa sổ nội dung đều tuỳ thuộc vào IdP, nhưng không có giao diện người dùng cửa sổ nào để gửi yêu cầu liên lạc giữa 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 chính nó (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 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 khi phiên IdP đã hết hạn mà không có lượt đă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ế. Thao tác này sẽ không được kích hoạt đối với người dùng chưa đăng nhập vào IdP. Quy trình mới này được thiết kế để xử lý các trường hợp trạng thái đăng nhập qua IdP của người dùng trên trình duyệt là "đăng nhập" nhưng điểm cuối trong 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, khi FedCM được gọi, thì bất kỳ trường hợp nào sau đây 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 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 của 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") rồi đă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 hết hạn mà không có trang đă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 bản minh hoạ của chúng tôi. Phiên này sẽ hết hạn sau 3 phút sau khi bạn đăng nhập vào IdP minh hoạ. Sau đó, bạn có thể quan sát hoạt động đăng nhập vào IdP thông qua hành vi của cửa sổ bật lên.

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

Bạn có thể dùng thử trên máy tính API trạng thái đăng nhập qua IdP bằng cách bật một cờ
của 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 của IdP bằng cách đăng ký bản dùng thử theo nguyên gốc hai lần:

Đăng ký bản dùng thử theo nguyên gốc cho IdP.
Đă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 trạng thái đăng nhập của IdP được cung cấp trên Chrome 116 cho đến Chrome 119.

Đăng ký bản dùng thử theo nguyên gốc cho IdP

Truy cập trang đăng ký bản dùng thử theo nguyên gốc.
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.
Nhập nguồn gốc của IdP dưới dạng Nguồn gốc web.
Nhấp vào Gửi.
Thêm thẻ origin-trial <meta> vào phần đầu của những trang sử dụng IdentityProvider.close(). Ví dụ: tệp này có thể có dạng như:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

Cảnh báo: Bạn không thể gửi tiêu đề HTTP Origin-Trial cho API này.

Đăng ký bản dùng thử theo nguyên gốc của bên thứ ba cho bên bị hạn chế

Truy cập trang đăng ký bản dùng thử theo nguyên gốc.
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.
Nhập nguồn gốc của IdP dưới dạng Nguồn gốc web.
Chọn 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.
Nhấp vào Gửi.
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 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.

Thu hút và chia sẻ ý kiến phản hồi

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

Ảnh của Dan Cristian Pădurechính là trên Unsplash