Credential Management API

Eiji Kitamura
Meggin Kearney
Meggin Kearney

Credential Management API는 여러 기기에서 원활하게 로그인할 수 있도록 사이트와 브라우저 사이에 프로그래매틱 인터페이스를 제공하는 표준 기반 브라우저 API입니다.

Credential Management API:

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

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

Credential Management API 브라우저 지원 확인

브라우저 지원

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

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

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

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

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

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

로그아웃

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

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

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

의견