크롬이 AJAX 폼의 비밀번호를 기억하게 하는 방법?

크롬이 AJAX 폼의 비밀번호를 기억하게 하는 방법?

로그인 페이지에서 빠른 입력 확인을 위해 AJAX를 사용하고 있습니다.모든 것이 맞으면 사용자가 리디렉션됩니다.

코드는 다음과 같습니다.

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
   }
...

모든 브라우저에서 정말 잘 작동합니다.하지만 크롬에 문제가 있습니다.비밀번호 저장 기능은 제공되지 않습니다.

자바스크립트를 끄면 암호가 저장되므로 문제는 분명히 새로운 위치로 리디렉션됩니다.

어떻게 고쳐야 하죠?

보이지 않는 iframe을 삽입하고 폼을 대상으로 지정하여 이 문제에 대한 더러운 해결책을 찾았습니다.

<iframe src="/blank.html" id="loginTarget" name="loginTarget" style="display:none">
</iframe>

<form id="loginForm" action="/blank.html" method="post" target="loginTarget"></form>

해당 자바스크립트:

$('#loginForm').submit(function () {
    $.post('/login', $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
    })
})

비결은 정말로 두 가지 요청이 있다는 것입니다.먼저 /blank.html로 양식을 제출하면 서버에서 무시되지만 Chrome에서 암호 저장 대화상자가 트리거됩니다.또한 axis 요청을 하고 /login에 실물 양식을 제출합니다.첫 번째 요청의 대상이 보이지 않는 iframe이므로 페이지가 새로 고쳐지지 않습니다.

다른 페이지로 리디렉션하지 않으려면 이 방법이 더 유용합니다.작업 속성을 변경하는 방법으로 리디렉션하려면 더 나은 솔루션입니다.

편집:

여기 간단한 JS Fiddle 버전이 있습니다.댓글란의 주장과는 달리 필요한 페이지를 다시 로드할 필요가 없고 매우 안정적으로 작동하는 것 같습니다.크롬을 탑재한 Win XP와 크롬을 탑재한 Linux에서 테스트해 보았습니다.

양식을 변경할 수 있습니까?action의 가치.data.redirectUrl그리고 양식을 평소대로 제출하게 합니까?이렇게 하면 브라우저에서 사용자 이름과 암호를 저장하라는 메시지가 표시됩니다.

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            $("form#name").attr('action', data.redirectUrl);
        }
    }
...

여기 읽어보세요 - 크롬이 이 로그인 양식을 인식하지 못하는 이유는 무엇입니까?

중요한 의견은 다음과 같습니다.

네, 반품 false를 제거하면 작동하지 않습니다.코드를 다시 작성해야 합니다.Chrome은 보안 기능으로 "제출"되지 않은 양식에서 암호를 저장할 수 없습니다.암호 저장 기능이 작동하려면 화려한 AJAX 로그인을 취소해야 합니다.

따라서 Ajax를 제거하고 양식 게시물이 로그인하도록 허용하는 것을 고려할 수 있습니다. 이것이 자바스크립트가 활성화되어 있지 않은 사용자도 양식으로 로그인할 수 있는 유일한 방법일 것입니다.

다음과 같은 방법으로 수정했습니다.

<form action="/login"></form>

그리고 자바스크립트:

$(form).submit(function () {
   if(-1 !== this.action.indexOf('/login')) {
      var jForm = $(this);
      $.post(this.action, $(this).serialize(), function (data) {
         if (data.status == 'SUCCESS') {

            // change the form action to another url
            jForm[0].action = data.redirectUrl;

            // and resubmit -> so, no AJAX will be used 
            // and function will return true
            jForm.submit();
         }
      });
      return false;
   }
}

제 경우 Chrome은 하나의 양식(한 양식에서 생성/로그인)에 서로 다른 두 개의 유형 비밀번호 입력이 있어서 비밀번호를 기억하지 못했습니다.저의 경우 어떤 제출된 필드에 credential data가 포함되어 있는지 브라우저가 판단할 수 있도록 타입 패스워드 입력 중 하나를 제거하는 자바스크립트 조작을 통해 문제를 해결하였습니다.

따라서 2019년에는 Credential Management API를 사용하여 이 작업을 수행할 수 있습니다.

참고: 실험용 API입니다!확인하기: https://developers.google.com/web/fundamentals/security/credential-management/save-forms

필수 코드:

function onSubmit() {
    makeAjaxLoginRequest()
    .then((status) => {
        if (status.success) {
            if (window.PasswordCredential) {
                var cr = new PasswordCredential({ id: login, password: password });
                return navigator.credentials.store(cr);
            } else {
                return Promise.resolve();
            }
        }
    }).then(
        () => { // redirect || hide login window, etc... },
        () => { // show errors, etc... }
    )
}

Chrome이 비밀번호를 저장하기 위해서는 사용자 이름과 비밀번호 입력 필드에 이름표가 설정되어 있어야 한다는 것을 알았습니다.이 스레드는 간단한 양식에 관한 것이지만 동일한 수정된 내 jquery AJAX 양식 제출에 관한 것입니다.

어제인 2013년 10월 7일부터 Chrome 28까지 아무런 속임수 없이 가능합니다.그들이 고친 것 같군요...

브라우저가 AJAX 요청에 대한 사용자 자격 증명을 저장하도록 강제하는 방법과 같은 문제가 있었습니다.제 답변을 여기서 보세요 - https://stackoverflow.com/a/64140352/994289 .

도움이 되길 바랍니다.적어도 윈도우의 크롬에서는 잘 작동했습니다.

언급URL : https://stackoverflow.com/questions/5430129/how-to-make-chrome-remember-password-for-an-ajax-form