Credential Management API

Eiji Kitamura
Meggin Kearney
Meggin Kearney

認証情報管理 API は、サイトとブラウザ間のプログラマティック インターフェースを提供する標準ベースのブラウザ API で、デバイス間でシームレスにログインできます。

認証情報管理 API:

  • ログインフローの手間を省く - セッションが期限切れになった場合や、認証情報を別のデバイスに保存した場合でも、ユーザーはサイトに自動的に再ログインできます。
  • アカウント選択ツールによるワンタップ ログインを許可する - ユーザーはネイティブのアカウント選択ツールでアカウントを選択できます。
  • 認証情報を保存する - アプリは、ユーザー名とパスワードの組み合わせや、フェデレーション アカウントの詳細を保存できます。これらの認証情報は、ブラウザによってデバイス間で同期できます。

実際に試してみたい場合は、認証情報管理 API のデモをお試しいただき、コードをご覧ください。

認証情報管理 API のブラウザ サポートを確認する

Browser Support

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

Source

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() を呼び出して、ユーザーが自動的に再ログインしないようにします。

自動ログインを無効にすると、ログイン情報を再入力しなくても、仕事用アカウントと個人用アカウント、共有デバイス上のアカウントなどを簡単に切り替えることができます。

詳しくは、ログアウトするをご覧ください。

フィードバック