이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Chrome의 WebAuthn을 위한 힌트, 관련 출처 요청, JSON 직렬화 도입

Chrome 128 및 129에서는 WebAuthn을 위한 흥미로운 새 기능인 기본 API를 사용하여 패스키 기반 인증 시스템을 빌드할 수 있습니다.

Eiji Kitamura

힌트: 힌트를 사용하면 신뢰 당사자 (RP)가 WebAuthn을 더 효과적으로 제어할 수 있습니다. 구현됩니다. 이러한 기능은 특히 이러한 제품을 원하는 기업 사용자에게 유용합니다. 보안 키를 사용할 수 있습니다.
관련 출처 요청: 관련 출처 포함 요청에 따라 RP는 여러 도메인에서 패스키를 유효하게 만들 수 있습니다. 여러 계정을 이제 사용자가 사이트 전체에서 패스키를 재사용하도록 로그인 문제 해결
JSON 직렬화: JSON 직렬화 API는 인코딩 및 디코딩 옵션을 통해 RP의 프런트엔드 코드를 단순화합니다. 사용자 인증 정보를 제공합니다.

힌트

hints를 사용하면 이제 신뢰 당사자 (RP)가 패스키 또는 패스키로 인증

이전에는 RP가 사용자가 사용할 수 있는 인증자를 제한하려는 경우 인증하기 위해 패스키를 사용하려면 authenticatorSelection.authenticatorAttachment: "platform" 또는 "cross-platform"입니다. 이들은 각각 인증자를 플랫폼으로 제한합니다. OTP 또는 로밍이 가능한가요? Authenticator를 사용합니다. hints를 사용하면 이 사양을 더 유연하게 할 수 있습니다.

RP는 PublicKeyCredentialCreationOptions에서 선택적 hints를 사용할 수 있습니다. PublicKeyCredentialRequestOptions: "security-key" 지정 배열의 환경설정 순서로 "client-device" 및 "hybrid"

다음은 사용자 인증 정보 생성 요청의 예입니다. 이 요청에는 "security-key"를 힌트로 사용하는 "cross-platform" 인증자 이를 통해 Chrome에서 기업 사용자에게 보안 키에 중점을 둔 UI를 표시합니다.

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

'security-key' 지정 힌트로서, 브라우저에 보안 키에 중점을 둔 대화상자가 표시됩니다. — '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 등) 모두 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 요청 및 응답 객체에는 원시 값이 포함된 여러 필드가 있습니다. 사용자 인증 정보 ID, 사용자 ID 또는 챌린지와 같은 ArrayBuffer의 바이너리 데이터 웹사이트가 JSON을 사용하여 이 데이터를 서버와 교환하려는 경우 바이너리는 데이터(예: Base64URL)를 먼저 인코딩해야 합니다. 이렇게 하면 복잡성을 고려해야 합니다.

이제 WebAuthn에서 파싱을 위한 API 제공 PublicKeyCredentialCreationOptions 드림 및 PublicKeyCredentialRequestOptions JSON에서 WebAuthn 요청 객체를 직접 요청하고 PublicKeyCredential JSON으로 직접 변환할 수 있습니다 원시 바이너리를 전달하는 모든 ArrayBuffer 값 필드 데이터는 Base64URL로 인코딩된 값에서 또는 해당 값으로 자동 변환됩니다. 이 API는 Chrome 129부터 사용할 수 있습니다.

패스키를 만들기 전에 인코딩된 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 및 패스키에 관해 자세히 알아보려면 다음 리소스를 확인하세요.