此页面由 Cloud Translation API 翻译。

隆重推出适用于 Chrome 中的 WebAuthn 的提示、相关源请求和 JSON 序列化

Chrome 128 和 129 为 WebAuthn 引入了一些激动人心的新功能，构建基于通行密钥的身份验证系统。

Eiji Kitamura

提示：提示可让信赖方 (RP) 更好地控制 WebAuthn 浏览器的界面。对于需要使用安全密钥。
相关源站请求：具有相关源站请求，RP 可以使通行密钥在多个网域上有效。如果您拥有多个那么现在您可以允许用户在各个网站上重复使用通行密钥从而消除登录障碍
JSON 序列化：JSON 序列化 API 可让您通过编码和解码选项来简化 RP 的前端代码， WebAuthn API 来传递和传递凭据。

提示

借助 hints，依赖方 (RP) 现在可以指定用于创建或者使用通行密钥进行身份验证

以前，当 RP 想要限制用户可以使用的身份验证器时，创建通行密钥或进行身份验证 authenticatorSelection.authenticatorAttachment 用于指定 "platform"，或 "cross-platform"。它们分别将身份验证器限制在一个平台身份验证器或漫游身份验证器。借助 hints，此规范可以更加灵活。

RP 可以使用 PublicKeyCredentialCreationOptions 中的可选 hints 或 PublicKeyCredentialRequestOptions 用于指定 "security-key"，数组中按偏好顺序排列的 "client-device" 和 "hybrid"。

以下是一个凭据创建请求示例，使用 "security-key" 作为提示的 "cross-platform" 身份验证器。这说明 Chrome 为企业用户显示侧重于安全密钥的界面。

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    hints: ['security-key'],
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

通过指定“security-key”作为提示，浏览器会显示一个以安全密钥为中心的对话框。

当 RP 想要优先考虑跨设备验证场景时，可以发送优先使用 "cross-platform" 个身份验证器的身份验证请求并使用 "hybrid" 作为提示。

const credential = await navigator.credentials.create({
  publicKey: {
    challenge: *****,
    residentKey: true,
    hints: ['hybrid']
    authenticatorSelection: {
      authenticatorAttachment: 'cross-platform'
    }
  }
});

。

有相关来源请求，RP 可以确保通行密钥可在多个网域中使用构建集中式登录和使用联合协议仍是推荐解决方案，。但是，如果您拥有多个网域且无法实现联合可能是一种解决方案

所有 WebAuthn 请求都必须指定信赖方 ID (RP ID) 以及所有通行密钥都与单个 RP ID 相关联。以前，源只能指定 RP ID，在这种情况下，www.example.co.uk 可以指定 RP ID 为 example.co.uk，但不是 example.com。有相关来源请求，可以通过提取众所周知的 JSON 文件来验证已声明的 RP ID 位于目标网域的 /.well-known/webauthn 中。所以example.co.uk （以及 example.in、example.de 等）都可以使用 RP ID 如果 example.com 按以下格式指定它们，则为 example.com：

URL：https://example.com/.well-known/webauthn

{
  "origins": [
    "https://example.co.uk",
    "https://example.de",
    "https://example.sg",
    "https://example.net",
    "https://exampledelivery.com",
    "https://exampledelivery.co.uk",
    "https://exampledelivery.de",
    "https://exampledelivery.sg",
    "https://myexamplerewards.com",
    "https://examplecars.com"
  ]
}

如需了解如何设置相关源请求，请参阅允许在 Google Play 中重复使用通行密钥具有相关来源的网站请求。

JSON 序列化

WebAuthn 请求和响应对象有多个字段，其中包含原始的 ArrayBuffer 中的二进制数据，例如凭据 ID、用户 ID 或质询。如果网站想使用 JSON 来与其服务器交换此类数据，则二进制文件数据必须先进行编码，例如使用 Base64网址。这会增加不必要的对于想要开始在自家网站上使用通行密钥的开发者而言，这非常复杂。

WebAuthn 现在提供 API 来解析 PublicKeyCredentialCreationOptions 和 PublicKeyCredentialRequestOptions WebAuthn 直接从 JSON 请求对象，并将 PublicKeyCredential 转换为 JSON。所有带有原始二进制文件的 ArrayBuffer 值字段数据会自动与 Base64网址编码的值相互转换。 Chrome 129 及更高版本提供这些 API。

在创建通行密钥之前，请先提取 JSON 编码的 PublicKeyCredentialCreationOptions 对象，并使用 PublicKeyCredential.parseCreationOptionsFromJSON()。

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

export async function registerCredential() {

  // Fetch encoded `PublicKeyCredentialCreationOptions`
  // and JSON decode it.
  const options = await fetch('/auth/registerRequest').json();

  // Decode `PublicKeyCredentialCreationOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseCreationOptionsFromJSON(options);  

  // Invoke the WebAuthn create() function.
  const cred = await navigator.credentials.create({
    publicKey: decodedOptions,
  });
  ...

创建通行密钥后，使用 toJSON() 对生成的凭据进行编码，以便将其发送到服务器

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

  ...
  const cred = await navigator.credentials.create({
    publicKey: options,
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch('/auth/registerResponse', credential);
  ...

在使用通行密钥进行身份验证之前，请提取 JSON 编码的 PublicKeyRequestCreationOptions，并使用 PublicKeyCredential.parseRequestOptionsFromJSON()。

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

export async function authenticate() {

  // Fetch encoded `PublicKeyCredentialRequestOptions`
  // and JSON decode it.
  const options = await fetch('/auth/signinRequest').json();

  // Decode `PublicKeyCredentialRequestOptions` JSON object
  const decodedOptions = PublicKeyCredential.parseRequestOptionsFromJSON(options);

  // Invoke the WebAuthn get() function.
  const cred = await navigator.credentials.get({
    publicKey: options
  });
  ...

使用通行密钥进行身份验证后，使用 toJSON() 方法，以便将其发送到服务器。

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

  ...
  const cred = await navigator.credentials.get({
    publicKey: options
  });

  // Encode the credential to JSON and stringify
  const credential = JSON.stringify(cred.toJSON());

  // Send the encoded credential to the server
  await fetch(`/auth/signinResponse`, credential);
  ...

了解详情

如需详细了解 WebAuthn 和通行密钥，请查看以下资源：