Chrome で WebAuthn のヒント、関連オリジン リクエスト、JSON シリアル化を導入

Chrome 128、129 では、WebAuthn の API を使用して、パスキーベースの認証システムを構築します。

• ヒント: ヒントを使用すると、リライング パーティ（RP）が WebAuthn をより適切に制御できます。 表示されます。特に、エンタープライズ ユーザーが 使用する必要があります。
• 関連するオリジン リクエスト: 関連するオリジン リクエストに応じて、RP は複数のドメインでパスキーを有効にできます。複数の 複数のサイトでパスキーを再利用できるようにし ログインの手間を省くことができます
• JSON シリアル化: JSON シリアル化 API を使用すると、エンコードとデコードのオプションと併せて RP のフロントエンド コードを簡素化できます。 認証情報など）が含まれます。

ヒント

hints により、リライング パーティ（RP）は以下を作成するための UI 設定を指定できるようになりました。 パスキーによる認証などです

以前は RP が、ユーザーが使用できる認証システムを 認証には、パスキーの作成、パスキーの作成、 authenticatorSelection.authenticatorAttachment: "platform" または "cross-platform"。それぞれ認証システムを特定のプラットフォームに制限する 認証システム またはローミング 認証システムをご覧ください。 hints を使用すると、この仕様をより柔軟に設定できます。

RP は、PublicKeyCredentialCreationOptions でオプションの hints を使用するか、 PublicKeyCredentialRequestOptions で "security-key" を指定します。 配列内の優先順位の "client-device" と "hybrid"。

以下は、優先される認証情報の作成リクエストの例です。 "security-key" をヒントとする "cross-platform" 認証システム。これにより、 企業ユーザーに対してセキュリティ キーに焦点を当てた UI を表示する Chrome。

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

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

</ph>

RP がクロスデバイス検証シナリオを優先する必要がある場合、RP は以下を行うことができます。 "cross-platform" 認証システムを優先する認証リクエストを送信する "hybrid" をヒントとして使用します。

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

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

</ph>

で確認できます。

関連するオリジン リクエスト

関連する起源を含む リクエストに応じて、RP は 複数のドメインからパスキーを使用できるようにする。一元化されたログインの構築 連携プロトコルの使用経験がある組織にとっては、 アクセスしますただし、複数のドメインを所有していて連携が不可能な場合は、 解決策となる可能性があります。

すべての WebAuthn リクエストで証明書利用者 ID（RP ID）とすべてのパスキーを指定する必要があります 単一の RP ID に関連付けられます。従来、送信元は 1 つのサーバー間でのみ ドメインに基づく RP ID。その場合、www.example.co.uk では次のように指定します。 RP ID は example.co.uk ですが、example.com ではありません。関連オリジン リクエスト。要求された RP ID は、既知の JSON ファイルを取得することで検証できます。 （ターゲット ドメインの /.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"
  ]
}

関連するオリジン リクエストの設定方法については、パスキーの再利用を 関連するオリジンがあるサイト リクエストをご覧ください。

JSON シリアル化

WebAuthn のリクエスト オブジェクトとレスポンス オブジェクトには、未加工の URL を含む複数のフィールドがあります。 配列バッファ内のバイナリデータ（認証情報 ID、ユーザー ID、チャレンジなど） ウェブサイトで JSON を使用してこのデータをサーバーと交換する場合、バイナリは まず、Base64URL などでエンコードする必要があります。これにより、 ウェブサイトでパスキーを使い始めたいデベロッパーにとって、複雑さを軽減できます。

WebAuthn では、 PublicKeyCredentialCreationOptions および PublicKeyCredentialRequestOptions JSON から直接 WebAuthn リクエスト オブジェクトを取得し、 PublicKeyCredential JSON に変換します。未加工のバイナリを格納するすべての ArrayBuffer 値フィールド データは Base64URL エンコード値から、または Base64URL エンコード値に自動的に変換されます。 これらの API は Chrome 129 以降で使用できます。

パスキーを作成する前に、JSON でエンコードされたデータを PublicKeyCredentialCreationOptions オブジェクトを取得し、 PublicKeyCredential.parseCreationOptionsFromJSON()。

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() を使用して、生成された認証情報をエンコードします。 サーバーに送信できます。

  ...
  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()。

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() メソッドを呼び出し、サーバーに送信できるようにします。

  ...
  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 とパスキーについて詳しくは、次のリソースをご覧ください。

• パスキー |デベロッパー向け Chrome
• サーバーサイド パスキーの概要 実装
• passkeys.dev