등록 및 로그인 양식은 최대한 간단하게 유지합니다.
사용자가 돌아올 때 다시 로그인할 필요가 없도록 로그인 양식의 사용자 인증 정보를 저장하세요.
양식의 사용자 인증 정보를 저장하려면 다음 안내를 따르세요.
- 양식에
autocomplete를 포함합니다. - 양식이 제출되지 않도록 합니다.
- 요청을 전송하여 인증합니다.
- 사용자 인증 정보를 저장합니다.
- UI를 업데이트하거나 맞춤설정된 페이지로 이동하세요.
양식에 autocomplete 포함
계속하기 전에 양식에 autocomplete 속성이 포함되어 있는지 확인하세요.
이렇게 하면 Credential Management API가 양식에서 id 및 password를 찾아 사용자 인증 정보 객체를 구성하는 데 도움이 됩니다.
또한 Credential Management API를 지원하지 않는 브라우저가 시맨틱을 이해하는 데 도움이 됩니다. 자동 완성에 관한 자세한 내용은 제이슨 그릭스비의 이 문서를 참조하세요.
<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
navigator.credentials.store()