이 페이지는 Cloud Translation API를 통해 번역되었습니다.

양식에서 사용자 인증 정보 저장

Eiji Kitamura

Meggin Kearney

</ph>

로그인 양식에서 사용자 인증 정보 저장

등록 및 로그인 양식은 최대한 간단하게 만드세요.

로그인 양식에서 사용자 인증 정보 저장 사용자가 재방문할 때 다시 로그인할 필요가 없습니다.

양식의 사용자 인증 정보를 저장하려면 다음 단계를 따르세요.

양식에 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`

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

`navigator.credentials.store()`