Credential Management API

Eiji Kitamura
Meggin Kearney
Meggin Kearney

Credential Management API는 여러 기기 간에 원활한 로그인을 위해 사이트와 브라우저 사이에서 프로그래밍 방식의 인터페이스를 제공하는 표준 기반 브라우저 API입니다.

Credential Management API:

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

실제 사례를 보고 싶으세요? Credential Management API 데모를 사용해 보고 코드를 살펴보세요.

Credential Management API 브라우저 지원 확인

브라우저 지원

  • Chrome: 51
  • Edge: 18.
  • Firefox: 60.
  • Safari: 13

소스

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

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

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

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

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

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

로그아웃

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

또한, 자동 로그인을 비활성화하면 사용자가 로그인 정보를 다시 입력할 필요 없이 예컨대 업무용 계정과 개인용 계정 사이, 또는 공유 기기의 계정들 사이에서 손쉽게 전환할 수 있습니다.

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

의견