사용자 인증 정보 관리 API 최신 업데이트

Eiji Kitamura

여기에 설명된 일부 업데이트는 Google I/O 세션 안전하고 원활한 로그인: 사용자 참여 유지에서 설명합니다.

Chrome 57

Chrome 57에서는 Credential Management API에 다음과 같은 중요한 변경사항이 도입되었습니다.

다른 하위 도메인에서 사용자 인증 정보를 공유할 수 있음

이제 Chrome은 Credential Management API를 사용하여 다른 하위 도메인에 저장된 사용자 인증 정보를 가져올 수 있습니다. 예를 들어 비밀번호가 login.example.com에 저장된 경우 www.example.com의 스크립트는 계정 선택기 대화상자에 계정 항목 중 하나로 비밀번호를 표시할 수 있습니다.

navigator.credentials.store()를 사용하여 비밀번호를 명시적으로 저장해야 합니다. 그러면 사용자가 대화상자를 탭하여 사용자 인증 정보를 선택할 때 비밀번호가 현재 출처로 전달되고 복사됩니다.

저장된 비밀번호는 정확히 동일한 출처 www.example.com에서 사용자 인증 정보로 사용할 수 있습니다.

다음 스크린샷에서 login.aliexpress.com에 저장된 사용자 인증 정보는 m.aliexpress.com에 표시되며 사용자가 선택할 수 있습니다.

Chrome 60

Chrome 60에는 Credential Management API에 대한 몇 가지 중요한 변경사항이 도입되었습니다.

• PasswordCredential 객체에 이제 비밀번호가 포함됩니다.

• 비밀번호를 가져오는 데 더 이상 커스텀 fetch() 함수가 필요하지 않으므로 곧 지원 중단될 예정입니다.

• navigator.credentials.get()는 이제 불리언 플래그 unmediated 대신 enum mediation를 허용합니다.

• requireUserMediation()의 이름이 preventSilentAccess()(으)로 변경되었습니다.

• 새 메서드 navigator.credentials.create()는 사용자 인증 정보 객체를 비동기식으로 만듭니다.

특성 인식 확인 필요

비밀번호 기반 및 제휴 사용자 인증 정보에 액세스하기 위한 Credential Management API를 사용할 수 있는지 확인하려면 window.PasswordCredential 또는 window.FederatedCredential를 사용할 수 있는지 확인하세요.

if (window.PasswordCredential || window.FederatedCredential) {
  // The Credential Management API is available
}

이제 PasswordCredential 객체에 비밀번호가 포함됩니다.

Credential Management API는 비밀번호를 처리하는 데 보수적인 접근 방식을 취했습니다. 이 API는 JavaScript에서 비밀번호를 숨기므로 개발자는 fetch() API의 확장 프로그램을 통해 검증을 위해 PasswordCredential 객체를 서버로 직접 전송해야 했습니다.

하지만 이 접근 방식에는 여러 제한사항이 있었습니다. 개발자가 다음과 같은 이유로 API를 사용할 수 없다는 의견을 받았습니다.

• 비밀번호를 JSON 객체의 일부로 전송해야 했습니다.

• 비밀번호의 해시 값을 서버로 전송해야 했습니다.

Google은 보안 분석을 수행한 후 JavaScript에서 비밀번호를 숨기는 것이 기대만큼 모든 공격 벡터를 효과적으로 방지하지 못한다는 사실을 인식하고 변경하기로 결정했습니다.

이제 Credential Management API는 반환된 사용자 인증 정보 객체에 원시 비밀번호를 포함하므로 일반 텍스트로 액세스할 수 있습니다. 기존 방법을 사용하여 사용자 인증 정보 정보를 서버에 전송할 수 있습니다.

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).the>n(passwordCred = {
    if (passwordCred) {
    let form = new FormData();
    form.append('email', passwordCred.id);
    form.append('password', passwordCred.password);
    form.append('csrf_token', csrf_token);
    return fetch('/signin', {
        method: 'POST',
        credentials: 'include',
        body: form
    });
 >   } else {

    // Fallback to sign-in form
    }
}).then(res = {
    if (res.status === 200) {
    return res.json(>);
    } else {
    throw 'Auth failed';
    }
}).then(profile = {
    console.log('Auth succeeded', profile);
});

맞춤 가져오기가 곧 지원 중단됩니다.

커스텀 fetch() 함수를 사용 중인지 확인하려면 PasswordCredential 객체 또는 FederatedCredential 객체를 credentials 속성 값으로 사용하는지 확인합니다. 예를 들면 다음과 같습니다.

fetch('/signin', {
    method: 'POST',
    credentials: c
})

이전 코드 예시에 표시된 대로 일반 fetch() 함수를 사용하거나 XMLHttpRequest를 사용하는 것이 좋습니다.

이제 navigator.credentials.get()에서 enum 미디에이션을 허용합니다.

Chrome 60까지는 navigator.credentials.get()에서 불리언 플래그가 있는 선택적 unmediated 속성을 허용했습니다. 예를 들면 다음과 같습니다.

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    unmediated: true
}).>then(c = {

    // Sign-in
});

unmediated: true를 설정하면 사용자 인증 정보를 전달할 때 브라우저에 계정 선택기가 표시되지 않습니다.

이제 플래그가 미디에이션으로 확장됩니다. 사용자 중재는 다음과 같은 경우에 발생할 수 있습니다.

• 사용자가 로그인에 사용할 계정을 선택해야 합니다.

• 사용자가 navigator.credentials.requireUseMediation() 호출 후 명시적으로 로그인하려고 합니다.

mediation 값에 대해 다음 옵션 중 하나를 선택합니다.

이 예시에서는 계정 선택 도구를 표시하지 않고 사용자 인증 정보가 전달됩니다. 이는 이전 플래그인 unmediated: true와 동일합니다.

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent&>#39;
}).then(c = {

    // Sign-in
});

requireUserMediation()에서 preventSilentAccess()로 이름이 변경되었습니다.

get() 호출에서 제공되는 새로운 mediation 속성과 잘 맞도록 navigator.credentials.requireUserMediation() 메서드의 이름이 navigator.credentials.preventSilentAccess()로 변경되었습니다.

이름이 변경된 메서드는 계정 선택 도구를 표시하지 않고 사용자 인증 정보를 전달하는 것을 방지합니다(사용자 중재 없이 호출되는 경우도 있음). 이는 사용자가 웹사이트에서 로그아웃하거나 등록을 취소하고 다음 방문 시 자동으로 다시 로그인하지 않으려는 경우에 유용합니다.

signoutUser();
if (navigator.credentials) {
    navigator.credentials.preventSilentAccess();
}

새 메서드 navigator.credentials.create()를 사용하여 사용자 인증 정보 객체를 비동기식으로 만듭니다.

이제 새 메서드 navigator.credentials.create()를 사용하여 사용자 인증 정보 객체를 비동기식으로 만들 수 있습니다. 동기식 접근 방식과 비동기식 접근 방식의 비교를 계속 읽어보세요.

PasswordCredential 객체 만들기

동기화 접근 방식

let c = new PasswordCredential(form);

비동기 접근 방식 (신규)

let c = await navigator.credentials.create({
    password: form
});

또는:

let c = await navigator.credentials.create({
    password: {
    id: id,
    password: password
    }
});

FederatedCredential 객체 만들기

동기화 접근 방식

let c = new FederatedCredential({
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
});

비동기 접근 방식 (신규)

let c = await navigator.credentials.create({
    federated: {
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
    }
});

이전 가이드

Credential Management API를 이미 구현했나요? 새 버전으로 업그레이드하는 데 따를 수 있는 이전 가이드 문서가 있습니다.