getClientCapabilities()
로 WebAuthn 기능을 감지하고 사용자에게 맞게 인증 워크플로를 조정하는 방법을 알아보세요.
게시일: 2025년 1월 22일
인증 워크플로가 사용자의 브라우저와 기기에 원활하게 적응하도록 하려면 어떻게 해야 하나요?
Chrome 133부터 getClientCapabilities()
WebAuthn API를 사용하면 브라우저에서 지원되는 인증 기능을 확인할 수 있습니다. 개발자는 PublicKeyCredential.getClientCapabilities()
를 호출하여 지원되는 기능 목록을 가져오고 그에 따라 인증 워크플로를 조정할 수 있습니다.
이 개선사항을 통해 개발자는 사용자 환경에 맞게 더 강력하고 사용자 친화적인 인증 흐름을 만들 수 있습니다.
구현 방법은 다음과 같습니다.
if (window.PublicKeyCredential &&
PublicKeyCredential.getClientCapabilities) {
const capabilities = await PublicKeyCredential.getClientCapabilities();
if (capabilities.conditionalGet === true &&
capabilities.passkeyPlatformAuthenticator === true) {
// The browser supports passkeys and conditional mediation.
}
}
이 메서드를 사용하면 패스키, 조건부 미디에이션 (대화상자의 패스키 자동 완성), 하이브리드 전송 (블루투스를 사용한 교차 기기 인증), 확장 프로그램과 같은 지원되는 기능을 식별하여 사용자에게 적합한 인증 환경을 조정할 수 있습니다.
기능 감지가 중요한 이유
클라이언트 기능을 이해하면 다음 작업을 할 수 있습니다.
- 클라이언트에서 지원되는 기능에 맞게 구현을 조정하여 더 원활한 사용자 환경을 만들고 인증 안정성을 개선하세요.
- 지원되지 않는 WebAuthn 기능으로 인한 오류를 줄입니다.
getClientCapabilites()
를 사용하면 다양한 기기와 브라우저에서 작동하는 인증 환경을 확신할 수 있습니다.
탐색 시작
시작할 준비가 되면 getClientCapabilities()
를 사용한 간편한 WebAuthn 기능 감지에서 기능의 전체 목록, 자세한 안내, 권장사항을 확인하세요.
패스키 및 패스워드리스 로그인에 대해 자세히 알아보려면 패스키 Chrome 페이지를 방문하세요.