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 chức năng FedCM như Login Hint API, User Info API và RP Context API, đồng thời bắt đầu một thử nghiệm nguồn gốc cho IdP Sign-In Status API.

Trong Chrome 116, Chrome sẽ phát hành 3 tính năng mới sau đây của Federated Credential Management (FedCM) (Quản lý thông tin đăng nhập liên kết):

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

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

Login Hint API

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

Một hộp thoại FedCM cho thấy nhiều tài khoản người dùng.
Hộp thoại FedCM cho thấy 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 về tài khoản mà họ đã sử dụng. 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 phát hành trong Chrome 116 và 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 vào phản hồi accounts list endpoint (đ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 tài khoản có thể có dạng như sau khi 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 vào danh sách tài khoản, RP có thể gọi navigator.credentials.get() bằng thuộc tính loginHint như trong mẫu mã sau để chọn lọc hiển thị 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"
    }]
  }
});

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 liên kết danh tính hiện rất phổ biến. Tuy nhiên, việc trang trí nút bằng biểu tượng hồ sơ và thông tin của người dùng sẽ giúp họ đă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á

Thách thức 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 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 không còn được dùng nữa.

User Info API (sẽ ra mắt trong Chrome 116) cung cấp cho IdP một cách để lấy thông tin của người dùng quay lại 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ừ bên 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ể đó 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:

  • 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.
}

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

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

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

RP Context API

RP Context API (API Ngữ cảnh RP) có 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ể đáp ứng 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 khác nhau:

Hộp thoại FedCM hiển thị thông báo &quot;Đăng nhập vào ****&quot;.
Hộp thoại FedCM được hiển thị bằng "Đăng nhập vào ****". Đây là lựa chọn mặc định nếu bạn không chỉ định RP Context.
Hộp thoại FedCM được kết xuất bằng
Hộp thoại FedCM được hiển thị bằng "Đăng ký ****"
Hộp thoại FedCM được kết xuất bằng
Hộp thoại FedCM hiển thị nút "Tiếp tục đến ****"
Hộp thoại FedCM được hiển thị bằng &quot;Sử dụng ****&quot;
Hộp thoại FedCM được hiển thị bằng "Sử dụng ****"

Cách sử dụng rất đơn giản; hãy cung cấp một trong các thuộc tính identity.context sau: "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",
    }],
  }
});

Bản dùng thử theo nguyên gốc IdP Sign-In Status API

Chrome bắt đầu bản dùng thử theo nguyên gốc IdP Sign-In Status API trên máy tính từ Chrome 116, sau đó là Chrome trên 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.

IdP Sign-In Status API (API Trạng thái đăng nhập qua 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 đối với IdP và giảm thiểu các cuộc tấn công có thể xảy ra.

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 cho trình duyệt bằng cách gửi tiêu đề HTTP hoặc bằng cách gọi một 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 là một trong các trạng thái sau: "sign-in" (đăng nhập), "sign-out" (đăng xuất) hoặc "unknown" (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 yêu cầu đ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=signin

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

IdentityProvider.login()

Những thông tin 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", PR gọi 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 yêu cầu điều hướng cấp cao nhất hoặc một 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()

Những thông tin 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ẽ âm thầm không thành công mà không đưa ra yêu cầu đối với đ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 IdP được đặt thành "unknown" (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 IdP Sign-In Status API. Chúng tôi giới thiệu trạng thái này để có quá trình 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 phát hành 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 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 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ì 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 độ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 một yêu cầu có thông tin đăng nhập đế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ể cho phép người dùng đăng nhập vào IdP một cách linh hoạt 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:

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

Khi 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.

Một cửa sổ bật lên xuất hiện sau khi nhấp vào nút đăng nhập vào IdP.
Một cửa sổ bật lên xuất hiện sau khi nhấp vào nút đăng nhập vào IdP.

Bạn có thể chỉ định URL của trang đăng nhập (phải là nguồn 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. Bất cứ điều gì xảy ra trong cửa sổ nội dung đều phụ thuộc vào IdP, nhưng không có trình xử lý cửa sổ nào để đưa ra yêu cầu giao tiếp trên nhiều nguồn gốc cho 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() để đó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 một RP sau khi đăng nhập vào IdP bằng FedCM

Bạn có thể dùng thử hành vi của IdP Sign-In Status API trong bản minh hoạ của chúng tôi. Phiên sẽ hết hạn sau 3 phút kể từ khi bạn đăng nhập vào 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 dùng thử nguồn gốc

Bạn có thể thử IdP Sign-In Status API cục bộ 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 IdP Sign-In Status API bằng cách đăng ký dùng thử nguồn gốc hai lần:

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 IdP Sign-In Status API có sẵn từ Chrome 116 đến Chrome 119.

Đăng ký dùng thử nguồn cho IdP

  1. Chuyển đến trang đăng ký dùng thử nguồn gốc.
  2. 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.
  3. Nhập nguồn gốc của IdP dưới dạng Nguồn gốc web.
  4. Nhấp vào Gửi.
  5. Thêm thẻ origin-trial <meta> vào đầu những trang sử dụng IdentityProvider.close(). Ví dụ: thông tin này có thể có dạng như sau:
    <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

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

  1. Chuyển đến trang đăng ký dùng thử nguồn gốc.
  2. 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.
  3. Nhập nguồn gốc của IdP dưới dạng Nguồn gốc web.
  4. Chọn So khớp bên thứ ba để chèn mã thông báo bằng JavaScript trên các nguồn khác.
  5. Nhấp vào Gửi.
  6. 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 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.

Tương tác 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ẻ tại crbug.com.

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