Credential Management API

Eiji Kitamura
Meggin Kearney
Meggin Kearney

Credential Management API は標準ベースのブラウザ API であり、複数のデバイスでシームレスなログインを実現するためにサイトとブラウザ間にプログラム インターフェースを提供します。

Credential Management API:

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

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

自動ログインを無効にすると、ユーザーは簡単にアカウントを切り替えることができます。たとえば、ログイン情報を再入力することなく、仕事用のアカウントと個人用のアカウント、または共有端末上のアカウントを切り替えることができます。

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

フィードバック