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

Meggin Kearney 氏
Meggin Kearney

ログイン フォームから認証情報を保存する

登録フォームとログインフォームはできる限りシンプルに作成してください。

ログイン フォームの認証情報を保存しておくと、ユーザーがアプリに戻ったときに再度ログインする必要がなくなります。

フォームからユーザー認証情報を保存するには:

  1. フォームに autocomplete を含めます。
  2. フォームが送信されないようにします。
  3. リクエストを送信して認証します。
  4. 認証情報を保存します。
  5. UI を更新するか、カスタマイズされたページに移動します。

フォームに autocomplete を含めます

先に進む前に、フォームに autocomplete 属性が含まれているかどうかを確認してください。これにより、Credential Management API がフォームから idpassword を見つけて、認証情報オブジェクトを作成できます。

また、Credential Management API をサポートしていないブラウザがセマンティクスを理解するのに役立ちます。自動入力について詳しくは、Jason Grigsby によるこちらの記事をご覧ください。

<form id="signup" method="post">
  <input name="email" type="text" autocomplete="username email" />
  <input name="display-name" type="text" autocomplete="name" />
  <input name="password" type="password" autocomplete="new-password" />
  <input type="submit" value="Sign Up!" />
</form>

フォームを送信できないようにする

ユーザーが送信ボタンを押したときに、フォームが送信されないようにします。そうしないと、ページが遷移します。

    var f = document.querySelector('#signup');
    f.addEventListener('submit', e => {
      e.preventDefault();

ページの遷移を防ぐことで、認証情報を保持しながら真正性を検証できます。

リクエストを送信して認証する

ユーザーを認証するには、AJAX を使用して認証情報をサーバーに送信します。

サーバー側で、HTTP コード 200 または 401 で応答するエンドポイントを作成(または単に既存のエンドポイントを変更)して、登録、ログイン、パスワードの変更が成功したかどうかをブラウザで明確にします。

次に例を示します。

// Try sign-in with AJAX
fetch('/signin', {
  method: 'POST',
  body: new FormData(e.target),
  credentials: 'include',
});

認証情報を保存する

認証情報を保存するには、まず API が使用可能かどうかを確認してから、フォーム要素を引数として同期的または非同期的に PasswordCredential をインスタンス化します。navigator.credentials.store() を呼び出します。この API を使用できない場合は、プロファイル情報を次のステップに転送します。

同期の例:

if (window.PasswordCredential) {
  var c = new PasswordCredential(e.target);
  return navigator.credentials.store(c);
} else {
  return Promise.resolve(profile);
}

非同期の例:

if (window.PasswordCredential) {
  var c = await navigator.credentials.create({password: e.target});
  return navigator.credentials.store(c);
} else {
  return Promise.resolve(profile);
}

リクエストが成功したら、認証情報を保存します。(リクエストに失敗した場合は、リピーターを混乱させるため、認証情報を保存しないでください)。

Chrome ブラウザが認証情報を取得すると、認証情報(またはフェデレーション プロバイダ)を保存するように求める通知がポップアップ表示されます。

認証情報を保存
自動ログイン ユーザーへの通知

UI を更新する

問題がなければ、プロフィール情報を使用して UI を更新するか、カスタマイズされたページに移動します。

     }).then(profile => {
       if (profile) {
         updateUI(profile);
       }
     }).catch(error => {
       showError('Sign-in Failed');
     });
    });

完全なコードサンプル

// Get form's DOM object
var f = document.querySelector('#signup');
f.addEventListener('submit', (e) => {
  // Stop submitting form by itself
  e.preventDefault();

  // Try sign-in with AJAX
  fetch('/signin', {
    method: 'POST',
    body: new FormData(e.target),
    credentials: 'include',
  })
    .then((res) => {
      if (res.status == 200) {
        return Promise.resolve();
      } else {
        return Promise.reject('Sign-in failed');
      }
    })
    .then((profile) => {
      // Instantiate PasswordCredential with the form
      if (window.PasswordCredential) {
        var c = new PasswordCredential(e.target);
        return navigator.credentials.store(c);
      } else {
        return Promise.resolve(profile);
      }
    })
    .then((profile) => {
      // Successful sign-in
      if (profile) {
        updateUI(profile);
      }
    })
    .catch((error) => {
      // Sign-in failed
      showError('Sign-in Failed');
    });
});

ブラウザの互換性

PasswordCredential

対応ブラウザ

  • 51
  • 79
  • x
  • x

ソース

対応ブラウザ

  • 51
  • 79
  • 60
  • 13

ソース

フィードバック