Credential Management API

Eiji Kitamura

Meggin Kearney

Credential Management API 프로그래밍 방식의 인터페이스를 제공하는 표준 기반 브라우저 API입니다. 사이트 및 브라우저 간의 상호 연결을 통해 여러 기기에서 원활하게 로그인할 수 있습니다.

Credential Management API:

• 로그인 절차의 불편함 제거: 세션이 만료되었거나 다른 기기에 사용자 인증 정보를 저장한 경우에도 사용자가 자동으로 사이트에 다시 로그인할 수 있습니다.
• 계정 선택기로 원탭 로그인 허용: 사용자가 기본 계정 선택기에서 계정을 선택할 수 있습니다.
• 사용자 인증 정보 저장 - 애플리케이션은 사용자 이름과 비밀번호 조합 또는 제휴 계정 세부정보를 저장할 수 있습니다. 이러한 사용자 인증 정보는 브라우저를 통해 기기 간에 동기화될 수 있습니다.

실제 사례를 보고 싶으신가요? 이 Credential Management API 데모 자세한 내용은 코드가 있습니다.

Credential Management API 브라우저 지원 확인

Credential Management API를 사용하기 전에 먼저 PasswordCredential이(가) 있는지 확인합니다. 또는 FederatedCredential만 지원됩니다.

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

사용자 로그인

사용자를 로그인시키려면 브라우저 비밀번호에서 사용자 인증 정보를 가져오세요. 이를 사용하여 사용자 로그인을 처리할 수 있습니다.

예를 들면 다음과 같습니다.

1. 사용자가 로그인하지 않고 사이트를 방문했을 때 navigator.credentials.get()를 호출합니다.
2. 가져온 사용자 인증 정보를 사용하여 사용자를 로그인 처리합니다.
3. 사용자가 로그인되었음을 나타내도록 UI를 업데이트합니다.

자세히 알아보기: 사용자 로그인.

사용자 인증 정보 저장 또는 업데이트

사용자가 Google과 같은 제휴 ID 공급업체를 통해 로그인한 경우 로그인, Facebook, GitHub:

1. 사용자가 정상적으로 로그인하거나 계정을 만들면 사용자의 이메일 주소를 다음과 같이 사용하여 FederatedCredential를 만듭니다. ID를 지정하고 FederatedCredentials.provider로 ID 공급업체를 지정합니다.
2. navigator.credentials.store()를 사용하여 사용자 인증 정보 객체를 저장합니다.

자세히 알아보기: 사용자 로그인.

사용자가 사용자 이름과 비밀번호로 로그인한 경우:

1. 사용자가 정상적으로 로그인하거나 계정을 만들면 사용자 ID 및 PasswordCredential 입력합니다.
2. navigator.credentials.store()를 사용하여 사용자 인증 정보 객체를 저장합니다.

자세히 알아보기: Forms에서 사용자 인증 정보 저장

로그아웃

사용자가 로그아웃하면 navigator.credentials.preventSilentAccess()를 호출합니다. 사용자가 자동으로 다시 로그인되는 것을 방지할 수 있습니다.

자동 로그인을 사용 중지하면 사용자가 계정 간에 쉽게 전환할 수 있습니다. 예를 들어 직장 계정과 개인 계정 간 또는 로그인 정보를 다시 입력할 필요 없이 여러 기기를 공유할 수 있습니다.

자세히 알아보기: 로그아웃.

의견