Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

Credential Management API 기능 감지 확인

Eiji Kitamura

요약

WebAuthn은 공개 키 사용자 인증 정보 기반 인증을 웹에 도입하여 보안을 강화하는 데 도움이 되며, 곧 Chrome, Firefox, Edge에서 지원될 예정입니다 (업데이트된 사양). 새로운 종류의 Credential 객체를 추가하지만, 사용 중인 특정 사용자 인증 정보 유형을 기능 감지하지 않고 Credential Management API를 사용하는 웹사이트가 중단될 수 있습니다.

현재 기능 감지를 위해 이 작업을 수행하는 경우

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // use CM API
}

권장사항

if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

샘플 코드에 적용된 변경사항을 예로 참고하세요.

자세한 내용을 알아보려면 계속 읽어보세요.

Credential Management API란 무엇인가요?

Credential Management API(CM API)는 웹사이트에 사용자 에이전트의 사용자 인증 정보 저장소에 대한 프로그래매틱 액세스를 제공하여 호출 출처의 사용자 인증 정보를 저장/검색합니다.

기본 API는 다음과 같습니다.

navigator.credentials.get()
navigator.credentials.store()
navigator.credentials.create()
navigator.credentials.preventSilentAccess()

원래 CM API 사양에는 두 가지 사용자 인증 정보 유형이 정의되어 있습니다.

PasswordCredential
FederatedCredential

PasswordCredential는 사용자의 ID와 비밀번호가 포함된 사용자 인증 정보입니다. FederatedCredential는 사용자의 ID와 ID 공급업체를 나타내는 문자열이 포함된 사용자 인증 정보입니다.

이 두 가지 사용자 인증 정보를 사용하여 웹사이트는 다음을 수행할 수 있습니다.

사용자가 방문하는 즉시 이전에 저장된 비밀번호 기반 또는 제휴 사용자 인증 정보로 로그인할 수 있도록 허용 (자동 로그인)
사용자가 로그인한 비밀번호 기반 또는 제휴 사용자 인증 정보를 저장합니다.
사용자의 로그인 사용자 인증 정보를 최신 상태로 유지 (예: 비밀번호 변경 후)

WebAuthn이란?

WebAuthn (웹 인증)은 공개 키 사용자 인증 정보를 CM API에 추가합니다. 예를 들어 웹사이트에서 FIDO 2.0 호환 인증자 기기를 사용하여 2단계 인증을 구현하는 표준화된 방법을 제공합니다.

기술적인 측면에서 WebAuthn은 PublicKeyCredential 인터페이스를 사용하여 CM API를 확장합니다.

어떤 문제가 있나요?

이전에는 개발자에게 다음 코드를 사용하여 CM API를 기능 감지하도록 안내했습니다.

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  // Use CM API
}

But as you can see from the descriptions above, the `navigator.credentials` is
now expanded to support public-key credentials in addition to password
credentials and federated credentials.

The problem is that user agents don't necessarily support all kinds of
credentials. If you continue feature detect using `navigator.credentials`, your
website may break when you are using a certain credential type not supported by
the browser.

**Supported credential types by browser<s**
table class="properties with-head><ing-t><in>t<&q><uot>;<tb>odytr
th/th
thPasswordCredential / Feder<ate>d<Cr>edential/th
thPubli<cKe>y<Cre><de><nt>ial/th
</tr><tr>thChrome
/<tht><dA>vailable
/tdtdI<n d><eve><lo><pm>ent
/td/<trt><rt>hFir<efo><x<>/span>
/thtdN/A
/tdtdAiming <to ><shi><p ><on> 60
/<td/><tr>trth<Edg><e<>/span>
/thtdN/A
/tdtdImp<lemented with a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello->in-micros<of>t-edge/"older API/a. New API (navigator.cr<ede><nti><als) c><oming >soon.
/td/tr/tbody/table


## The solution
You can avoid this by modifying feature detection code as follows to explicitly
test for the credential type that you intend to use.

```js
if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if&& (navigator.credentials  navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

샘플 코드에 적용된 실제 변경사항을 예시로 참고하세요.

참고로 WebAuthn에 추가된 PublicKeyCredential를 감지하는 방법은 다음과 같습니다.

if (window.PublicKeyCredential) {
    // use CM API with PublicKeyCredential added in the WebAuthn spec
}

일정

WebAuthn의 가장 빠른 구현은 Firefox이며 2018년 5월 초에 안정화될 예정입니다.

최종

궁금한 점이 있으면 @agektmr 또는 agektmr@chromium.org로 보내주세요.