Credential Management API

Eiji Kitamura
Meggin Kearney
Meggin Kearney

Credential Management API プログラマティック インターフェースを提供する標準ベースのブラウザ API サイトとブラウザの間でシームレスにログインできるようになります。

Credential Management API:

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

実際の動作を確認するには、ぜひ、 Credential Management API のデモ Chronicle の コード。

Credential Management API のブラウザ サポートを確認する

対応ブラウザ

  • Chrome: 51. <ph type="x-smartling-placeholder">
  • Edge: 18。 <ph type="x-smartling-placeholder">
  • Firefox: 60。 <ph type="x-smartling-placeholder">
  • Safari: 13。 <ph type="x-smartling-placeholder">

ソース

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 などのフェデレーション ID プロバイダを使用してログインした場合 ログイン、Facebook、GitHub:

  1. ユーザーが正常にログインするかアカウントを作成したら、ユーザーのメールアドレスを使用して FederatedCredential を作成します。 ID を追加し、FederatedCredentials.provider で ID プロバイダを指定します。
  2. navigator.credentials.store() を使用して認証情報オブジェクトを保存します。

詳細: ログイン ユーザー。

ユーザーがユーザー名とパスワードを使用してログインした場合:

  1. ユーザーが正常にログインするかアカウントを作成したら、ユーザー ID を使用して PasswordCredential を作成します。 表示されます。
  2. navigator.credentials.store() を使用して認証情報オブジェクトを保存します。

詳細: フォームから認証情報を保存する

ログアウト

ユーザーがログアウトしたら、navigator.credentials.preventSilentAccess() を呼び出します。 ユーザーが自動的に再ログインするのを防ぐことができます。

また、自動ログインを無効にするとアカウントを簡単に切り替えられるようになります。 たとえば、仕事用と個人用のアカウントの間や ログイン情報を入力し直す必要はありません。

詳細: ログアウトします。

フィードバック