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 로그인, Facebook, GitHub와 같은 제휴 ID 공급업체로 로그인한 경우:

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

사용자 로그인에서 자세히 알아보세요.

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

1. 사용자가 로그인하거나 계정을 만든 후 사용자 ID와 비밀번호로 PasswordCredential를 만듭니다.
2. navigator.credentials.store()를 사용하여 사용자 인증 정보 객체를 저장합니다.

양식에서 사용자 인증 정보 저장에서 자세히 알아보세요.

로그아웃

사용자가 로그아웃하면 navigator.credentials.preventSilentAccess()을 호출하여 사용자가 자동으로 다시 로그인하지 못하도록 합니다.

또한 자동 로그인을 사용 중지하면 사용자가 로그인 정보를 다시 입력하지 않고도 직장 계정과 개인 계정 간에 또는 공유 기기의 계정 간에 쉽게 전환할 수 있습니다.

로그아웃에서 자세히 알아보세요.

의견