사용자 인증 정보 관리 API를 사용한 로그인 흐름 간소화

Eiji Kitamura

정교한 사용자 환경을 제공하려면 웹사이트를 직접 인증해야 합니다. 인증된 사용자가 전용 프로필을 사용하여 서로에게 연결하거나, 기기 간에 데이터를 동기화하거나, 데이터를 처리합니다 오프라인 상태일 때 목록은 계속됩니다. 하지만 만들고, 기억하고, 입력하는 것은 비밀번호는 최종 사용자, 특히 모바일 화면에서 번거로운 경향이 있습니다. 여러 사이트에서 동일한 비밀번호를 재사용하게 됩니다. 물론 보안 위험입니다

최신 버전의 Chrome (51)은 Credential Management API를 지원합니다. 이것은 이를 통해 개발자에게 프로그램 방식의 액세스를 제공하는 W3C의 이를 통해 사용자가 더 쉽게 로그인할 수 있습니다.

Credential Management API란 무엇인가요?

Credential Management API를 사용하면 개발자가 비밀번호를 저장하고 가져올 수 있습니다. 사용자 인증 정보 및 제휴 사용자 인증 정보를 제공하며

  • navigator.credentials.get()
  • navigator.credentials.store()
  • navigator.credentials.requireUserMediation()

개발자는 이 간단한 API를 사용하여 다음과 같은 강력한 작업을 수행할 수 있습니다.

  • 사용자가 탭 한 번으로 로그인할 수 있습니다.
  • 사용자가 로그인할 때 사용한 제휴 계정을 기억합니다.
  • 세션이 만료되면 사용자를 다시 로그인 처리합니다.

Chrome 구현 시 사용자 인증 정보는 Chrome 비밀번호에 저장됩니다. 있습니다. 사용자가 Chrome에 로그인한 경우 사용자의 비밀번호를 동기화할 수 있습니다. 확인할 수 있습니다 동기화된 비밀번호를 Android 앱과 공유할 수도 있습니다. Android용 비밀번호 대용 Smart Lock API가 통합됨 원활한 크로스 플랫폼 환경을 제공합니다.

사이트에 Credential Management API 통합

웹사이트에서 Credential Management API를 사용하는 방법은 다양할 수 있습니다. 사용할 수 있습니다 단일 페이지 앱인가요? 유산인가 아키텍처를 살펴보겠습니다. 로그인 양식이 페이지 상단에만 페이지에 있습니까? 로그인 버튼이 모든 곳에 배치되어 있나요? 사용자가 내 웹사이트에서 의미 있는 방식으로 어떻게 해야 할까요? 제휴가 팝업 창 내에서 작동하나요? 아니면 상호작용을 해야 하나요?

모든 사례를 다루는 것은 거의 불가능하지만 일반적인 단일 페이지 앱입니다.

  • 맨 위 페이지는 등록 양식입니다.
  • '로그인'을 탭합니다. 버튼을 누르면 사용자가 로그인 양식으로 이동합니다.
  • 등록 및 로그인 양식 모두 일반적인 ID/비밀번호 옵션이 있습니다. 인증 및 제휴(예: Google 로그인과 Facebook 로그인을 사용하면 됩니다

Credential Management API를 사용하여 다음을 추가할 수 있습니다. 사이트에 추가하세요.

  • 로그인 시 계정 선택기 표시: 기본 계정 선택기 UI를 표시합니다. 사용자가 '로그인'을 탭할 때
  • 사용자 인증 정보 저장: 성공한 로그인 시 사용자 인증 정보를 나중에 사용할 수 있도록 브라우저의 비밀번호 관리자에 저장합니다.
  • 사용자가 자동으로 다시 로그인하도록 허용: 세션이 만료되었습니다.
  • 자동 로그인 중재: 사용자가 로그아웃하면 다음 기기에 대해 자동 로그인을 사용 중지합니다. 확인할 수 있습니다.

데모 사이트의 샘플 코드를 통해 이러한 기능을 경험해 볼 수 있습니다.

로그인 시 계정 선택기 표시

사용자가 '로그인'을 탭할 때 로그인 양식으로 이동하는 경우 사용 가능 navigator.credentials.get() 사용자 인증 정보를 가져올 수 있습니다 Chrome에 계정 선택기 UI가 표시되며 사용자가 계정을 선택할 수 있습니다.

<ph type="x-smartling-placeholder">
</ph> 사용자가 로그인할 계정을 선택할 수 있는 계정 선택기 UI가 표시됩니다.
사용자가 로그인할 계정을 선택할 수 있는 계정 선택기 UI 팝업

비밀번호 사용자 인증 정보 객체 가져오기

계정 옵션으로 비밀번호 사용자 인증 정보를 표시하려면 password: true를 사용합니다.

navigator.credentials.get({
    password: true, // `true` to obtain password credentials
}).then(function(cred) {
    // continuation
    ...

비밀번호 사용자 인증 정보를 사용하여 로그인

사용자가 계정을 선택하면 확인 기능이 사용자 인증 정보가 있어야 합니다. fetch()를 사용하여 서버에 전송할 수 있습니다.

    // continued from previous example
}).then(function(cred) {
    if (cred) {
    if (cred.type == 'password') {
        // Construct FormData object
        var form = new FormData();

        // Append CSRF Token
        var csrf_token = document.querySelector('csrf_token').value;
        form.append('csrf_token', csrf_token);

        // You can append additional credential data to `.additionalData`
        cred.additionalData = form;

        // `POST` the credential object as `credentials`.
        // id, password and the additional data will be encoded and
        // sent to the url as the HTTP body.
        fetch(url, {           // Make sure the URL is HTTPS
        method: 'POST',      // Use POST
        credentials: cred    // Add the password credential object
        }).then(function() {
        // continuation
        });
    } else if (cred.type == 'federated') {
        // continuation

제휴 사용자 인증 정보를 사용하여 로그인

사용자에게 제휴 계정을 표시하려면 배열을 사용하는 federated를 추가합니다. get() 옵션에 추가할 수 있습니다.

<ph type="x-smartling-placeholder">
</ph> 비밀번호 관리자에 여러 계정이 저장된 경우 <ph type="x-smartling-placeholder">
</ph> 비밀번호 관리자에 여러 계정이 저장된 경우 
navigator.credentials.get({
    password: true, // `true` to obtain password credentials
    federated: {
    providers: [  // Specify an array of IdP strings
        'https://accounts.google.com',
        'https://www.facebook.com'
    ]
    }
}).then(function(cred) {
    // continuation
    ...

사용자 인증 정보 객체의 type 속성을 검사하여 PasswordCredential인지 확인할 수 있습니다. (type == 'password') 또는 FederatedCredential (type == 'federated'). 사용자 인증 정보가 FederatedCredential, 포함된 정보를 사용하여 적절한 API를 호출할 수 있습니다.

    });
} else if (cred.type == 'federated') {
    // `provider` contains the identity provider string
    switch (cred.provider) {
    case 'https://accounts.google.com':
        // Federated login using Google Sign-In
        var auth2 = gapi.auth2.getAuthInstance();

        // In Google Sign-In library, you can specify an account.
        // Attempt to sign in with by using `login_hint`.
        return auth2.signIn({
        login_hint: cred.id || ''
        }).then(function(profile) {
        // continuation
        });
        break;

    case 'https://www.facebook.com':
        // Federated login using Facebook Login
        // continuation
        break;

    default:
        // show form
        break;
    }
}
// if the credential is `undefined`
} else {
// show form
사용자 인증 정보 관리 흐름 차트

사용자 인증 정보 저장

사용자가 양식을 사용하여 웹사이트에 로그인하면 navigator.credentials.store() 사용자 인증 정보를 저장합니다 사용자에게 저장할지 묻는 메시지가 표시됩니다. 상황에 따라 사용자 인증 정보 유형에는 new PasswordCredential()를 사용합니다. 또는 new FederatedCredential() 저장할 사용자 인증 정보 객체를 만듭니다.

<ph type="x-smartling-placeholder">
</ph> Chrome에서 사용자에게 사용자 인증 정보 (또는 제휴 공급업체)를 저장할지 묻습니다. <ph type="x-smartling-placeholder">
</ph> Chrome에서 사용자에게 사용자 인증 정보 (또는 제휴 제공업체)를 저장할지 묻습니다.

양식 요소에서 비밀번호 사용자 인증 정보 생성 및 저장

다음 코드는 autocomplete 속성을 사용하여 자동으로 지도 양식 요소를 PasswordCredential에 추가 객체 매개변수를 제공합니다.

HTML html <form id="form" method="post"> <input type="text" name="id" autocomplete="username" /> <input type="password" name="password" autocomplete="current-password" /> <input type="hidden" name="csrf_token" value="******" /> </form>

자바스크립트

var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
    // continuation
});

제휴 사용자 인증 정보 만들기 및 저장

// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
    id: id,                                  // The id for the user
    name: name,                              // Optional user name
    provider: 'https://accounts.google.com',  // A string that represents the identity provider
    iconURL: iconUrl                         // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
    // continuation
});
로그인 흐름 다이어그램

사용자가 자동으로 다시 로그인하도록 허용

사용자가 웹사이트를 떠났다가 나중에 다시 돌아올 때는 세션이 만료되었습니다. 사용자가 비밀번호를 매번 입력하지 않도록 하세요. 오세요. 사용자가 자동으로 다시 로그인하도록 합니다.

<ph type="x-smartling-placeholder">
</ph> 사용자가 자동으로 로그인되면 알림이 표시됩니다. <ph type="x-smartling-placeholder">
</ph> 사용자가 자동으로 로그인되면 알림이 표시됩니다.

사용자 인증 정보 객체 가져오기

navigator.credentials.get({
    password: true, // Obtain password credentials or not
    federated: {    // Obtain federation credentials or not
    providers: [  // Specify an array of IdP strings
        'https://accounts.google.com',
        'https://www.facebook.com'
    ]
    },
    unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
    if (cred) {
    // auto sign-in possible
    ...
    } else {
    // auto sign-in not possible
    ...
    }
});

코드는 '계정 선택기 표시' 로그인할 때'라는 메시지가 표시됩니다. 섹션으로 이동합니다. 유일한 차이점은 unmediated: true

이렇게 하면 함수가 즉시 확인되고 자동으로 로그인됩니다 다음과 같은 몇 가지 조건이 있습니다.

  • 사용자가 환영 인사에서 자동 로그인 기능을 확인함
  • 사용자가 이전에 Credential Management API를 사용하여 웹사이트에 로그인했습니다.
  • 사용자의 출처에 대해 저장된 사용자 인증 정보가 하나만 있습니다.
  • 사용자가 이전 세션에서 명시적으로 로그아웃하지 않았습니다.

이러한 조건 중 하나라도 충족되지 않으면 함수가 거부됩니다.

사용자 인증 정보 객체 흐름 다이어그램

자동 로그인 미디에이션

사용자가 웹사이트에서 로그아웃할 때 웹사이트에서 로그아웃하도록 사용자가 자동으로 다시 로그인되지 않도록 하기 위한 조치를 취합니다. 따라서 이를 위해 Credential Management API는 미디에이션이라는 메커니즘을 제공합니다. 다음을 호출하여 미디에이션 모드를 사용 설정할 수 있습니다. navigator.credentials.requireUserMediation() 출처에 대한 사용자의 미디에이션 상태가 사용 설정된 경우 unmediated: true를 navigator.credentials.get()와 함께 사용하면 이 함수는 undefined로 확인

자동 로그인 미디에이션

navigator.credentials.requireUserMediation();
자동 로그인 흐름 차트

FAQ

웹사이트의 JavaScript가 웹사이트에서 어떻게 해야 하나요? 아니요. PasswordCredential를 통해서만 비밀번호를 가져올 수 있으며 어떤 방법으로든 노출될 수 있습니다.

사용자 인증 정보를 사용하여 ID에 3자리 숫자를 저장할 수 있나요? Management API는 무엇인가요? 현재는 그렇게 할 수 없습니다. 사양에 대한 의견은 감사합니다.

iframe 내에서 Credential Management API를 사용할 수 있나요? API는 최상위 컨텍스트로 제한됩니다. .get() 또는 .store() 호출 아무런 영향 없이 즉시 해결됩니다.

비밀번호 관리 Chrome 확장 프로그램을 사용자 인증 정보와 통합할 수 있나요? Management API는 무엇인가요? navigator.credentials를 재정의하여 Chrome 확장 프로그램에 연결하여 다음 작업을 수행할 수 있습니다. get() 또는 store() 사용자 인증 정보

리소스

Credential Management API에 관한 자세한 내용은 통합 가이드를 참고하세요.