Credential Management API は標準ベースのブラウザ API であり、サイトとブラウザ間のプログラム インターフェースを提供し、デバイス間でシームレスなログインを実現します。
Credential Management API:
- ログインフローの負担を軽減 - ユーザーは、セッションの有効期限が切れた場合や別のデバイスに認証情報を保存した場合でも、サイトに再び自動的にログインできます。
- Account Chooser によるワンタップでのログインを許可 - ユーザーはネイティブの Account Chooser でアカウントを選択できます。
- 認証情報を保存 - アプリケーションは、ユーザー名とパスワードの組み合わせ、またはフェデレーション アカウントの詳細を保存できます。これらの認証情報は、ブラウザを使用してデバイス間で同期できます。
実際の動作を確認するには、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.
}
ユーザーのログイン
ユーザーをログインさせるには、ブラウザのパスワード マネージャーから認証情報を取得し、それらを使用してユーザーのログインに使用します。
次に例を示します。
- ユーザーがサイトにアクセスして、ログインしていない場合は、
navigator.credentials.get()を呼び出します。 - 取得した認証情報を使用してユーザーのログインを行います。
- UI を更新して、ユーザーがログインしたことを示します。
詳しくは、ユーザーのログインをご覧ください。
ユーザー認証情報を保存または更新する
ユーザーが Google ログイン、Facebook、GitHub などのフェデレーション ID プロバイダでログインした場合:
- ユーザーがログインまたはアカウントを作成したら、そのユーザーのメールアドレスを ID として
FederatedCredentialを作成し、FederatedCredentials.providerで ID プロバイダを指定します。 navigator.credentials.store()を使用して認証情報オブジェクトを保存します。
詳しくは、ユーザーのログインをご覧ください。
ユーザーがユーザー名とパスワードを使用してログインした場合:
- ユーザーがログインまたはアカウントを作成したら、ユーザー ID とパスワードを使用して
PasswordCredentialを作成します。 navigator.credentials.store()を使用して認証情報オブジェクトを保存します。
詳しくは、フォームから認証情報を保存するをご覧ください。
ログアウト
ユーザーがログアウトしたら、navigator.credentials.preventSilentAccess() を呼び出して、ユーザーが自動的に再ログインしないようにします。
また、自動ログインを無効にすると、ユーザーはアカウントを簡単に切り替えることができます。たとえば、仕事用と個人用のアカウント、共有デバイス上のアカウント間で、ログイン情報を再入力せずに切り替えることができます。
詳しくは、ログアウトをご覧ください。