登録フォームとログイン フォームはできる限りシンプルにしましょう。
ログイン フォームの認証情報を保存する 再度アクセスしたときに再度ログインする必要はありません。
フォームのユーザー認証情報を保存するには:
- フォームに
autocompleteを含めます。 - フォームが送信されないようにします。
- リクエストを送信して認証します。
- 認証情報を保存します。
- UI を更新するか、パーソナライズされたページに移動します。
フォームに autocomplete を含めます
先に進む前に
フォームに autocomplete 属性が含まれているかどうかを確認します。
これにより、Credential Management API が id と password を見つけられるようになります。
認証情報オブジェクトを作成して、
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 ブラウザが認証情報を取得すると、 認証情報の保存を求める通知がポップアップ表示される またはフェデレーションプロバイダに 接続します
<ph type="x-smartling-placeholder">
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
navigator.credentials.store()