Chrome 128 및 129에서는 WebAuthn을 위한 흥미로운 새 기능인 기본 API를 사용하여 패스키 기반 인증 시스템을 빌드할 수 있습니다.
- 힌트: 힌트를 사용하면 신뢰 당사자 (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'
}
}
});
<ph type="x-smartling-placeholder">!['security-key' 지정 힌트로서, 브라우저에 보안 키에 중점을 둔 대화상자가 표시됩니다.](https://developer.chrome.com/static/blog/passkeys-updates-chrome-129/image/security-key.png?hl=ko)
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">!['하이브리드' 지정 힌트로 말하면 브라우저에 교차 기기 로그인에 중점을 둔 대화상자가 표시됩니다.](https://developer.chrome.com/static/blog/passkeys-updates-chrome-129/image/cross-device.png?hl=ko)
관련 출처 요청
관련 기원 요청, 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 및 패스키에 관해 자세히 알아보려면 다음 리소스를 확인하세요.