사용자 인증 정보 관리 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에 표시되며 사용자가 다음 중에서 선택할 수 있습니다.

</ph>

Chrome 60

Chrome 60에서는 사용자 인터페이스에 몇 가지 중요한 변경사항이 Credential Management API

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

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

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

• 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는 비밀번호 처리에 보수적인 접근 방식을 취했습니다. JavaScript로부터 비밀번호를 숨겨 개발자가 PasswordCredential 객체를 서버에 직접 전송 fetch() API에 대한 확장 프로그램을 통한 유효성 검사

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

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

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

보안 분석을 수행하고 비밀번호를 숨기는 행위가 기대만큼 효과적으로 모든 공격 벡터를 방어하지는 못했지만, 변경하기로 결정했습니다.

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

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).then(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'
}).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의 기존 구현이 있나요? Google의 이전 가이드 문서를 새 버전으로 업그레이드할 수 있습니다