브라우저에서 패스워드 저장을 요구받으려면 어떻게 해야 하나요?
이봐요, 저는 다음과 같은 로그인 대화 상자가 있는 웹 앱을 만들고 있어요.
- 사용자가 "로그인"을 클릭하다
- 로그인 양식 HTML이 AJAX와 함께 로드되어 페이지의 DIV에 표시됩니다.
- 사용자는 사용자/패스인 필드를 입력하고 [Submit]을 클릭합니다.★★★★★★★★★★★★★★★★★★★★★★★가 아닙니다
<form>는, AJAX 를 됩니다. - 사용자/합격에 문제가 없는 경우 로그인한 사용자가 페이지를 새로고침합니다.
- 사용자/합격에 문제가 있는 경우 페이지가 새로고침되지 않지만 DIV에 오류 메시지가 표시되고 사용자가 다시 시도합니다.
여기 문제가 있습니다.브라우저에서는 통상적인 "이 패스워드를 저장하시겠습니까?[Yes / Never / Not Now]라는 프롬프트가 표시됩니다.
★★★★★을 포장해 .<div><form>태그에 "불완전='on'"이 붙어있지만, 그것은 아무런 차이가 없었다.
로그인 흐름의 큰 변경 없이 브라우저에서 패스워드를 저장하도록 할 수 있습니까?
에릭 고마워
p.s. 제 질문에 덧붙이자면, 저는 비밀번호를 저장하는 브라우저를 사용하고 있으며, "never for this site"를 클릭해 본 적이 없습니다.이것은 브라우저가 오퍼레이터 에러가 아닌 로그인 폼임을 인식하지 못하는 기술적인 문제입니다:-)
이 질문에 대한 완벽한 해결책을 찾았습니다(Chrome 27과 Firefox 21에서 테스트했습니다).
다음 두 가지 사항을 알아야 합니다.
- 'Save password'를 트리거하고
- 저장된 사용자 이름/비밀번호 복원
1. 'Save password' 트리거:
파이어폭스 21의 경우 입력 텍스트 필드가 포함된 폼이 있는 것을 검출하고 입력 패스워드 필드가 송신되면 「Save password」가 트리거 됩니다.그래서 우리는 단지 그 정보를
$('#loginButton').click(someFunctionForLogin);
$('#loginForm').submit(function(event){event.preventDefault();});
someFunctionForLogin()후된 페이지로.Ajax는 로 리다이렉트 합니다.event.preventDefault()는 폼의 송신으로 인해 원래의 리다이렉션을 차단합니다.
Firefox만을 취급하는 경우 위의 솔루션이면 충분하지만 Chrome 27에서는 동작하지 않습니다.그런 다음 Chrome 27에서 'Save password(비밀번호 저장)'를 트리거하는 방법을 묻습니다.
Chrome 27의 경우 속성명='password' 입력 텍스트 필드와 속성명='password' 입력 비밀번호 필드가 포함된 양식을 제출하여 페이지로 리디렉션된 후 'Save password'가 트리거됩니다.따라서 폼 제출로 인해 리다이렉션을 차단할 수 없지만, 리다이렉트는 ajax 로그인을 한 후에 할 수 있습니다.(Ajax 로그인이 페이지를 새로고침하지 않도록 하거나 페이지로 리다이렉트하지 않도록 하려면 안타깝게도 솔루션이 작동하지 않습니다.그럼, 우리가 쓸 수 있다.
<form id='loginForm' action='signedIn.xxx' method='post'>
<input type='text' name='username'>
<input type='password' name='password'>
<button id='loginButton' type='button'>Login</button>
</form>
<script>
$('#loginButton').click(someFunctionForLogin);
function someFunctionForLogin(){
if(/*ajax login success*/) {
$('#loginForm').submit();
}
else {
//do something to show login fail(e.g. display fail messages)
}
}
</script>
유형='버튼' 버튼을 누르면 버튼을 클릭했을 때 양식을 제출하지 않습니다.아약스 「」, 「」를 합니다.$('#loginForm').submit();을 사용법'새로고침을 작성하기 현재 의 'signed In'에서 'signed 로 이동합니다.xxx'라고 합니다.
이제 Chrome 27의 방법이 Firefox 21에서도 작동한다는 것을 알게 될 것입니다.그래서 그것을 사용하는 것이 좋다.
2. 저장된 사용자 이름/비밀번호를 복원합니다.
이미 loginForm이 HTML로 하드코딩되어 있는 경우 loginForm에 저장된 비밀번호를 복원하는 데 문제가 없습니다.
그러나 저장된 사용자 이름/비밀번호는 문서가 로드될 때만 바인딩되므로 js/jquery를 사용하여 loginForm을 동적으로 만드는 경우 저장된 사용자 이름/비밀번호는 loginForm에 바인딩되지 않습니다.
login Form(로그인 폼) HTML(js/jquery) 로그인 폼(로그인 폼).
비고: Ajax 로그인을 할 경우 추가하지 마십시오.autocomplete='off' 으로, 「」와 같이
<form id='loginForm' action='signedIn.xxx' autocomplete='off'>
autocomplete='off'login Form/login Form 으비formform 。모자라다
버튼을 사용하여 로그인하기:
「 」를 하는 경우type="button" an onclick를 사용하여 ajax이 경우 브라우저는 비밀번호를 저장할 수 없습니다.
<form id="loginform">
<input name="username" type="text" />
<input name="password" type="password" />
<input name="doLogin" type="button" value="Login" onclick="login(this.form);" />
</form>
이 양식에는 제출 버튼이 없고 작업 필드가 없으므로 브라우저는 비밀번호 저장을 제공하지 않습니다.
[ Submit ]버튼을 사용한 로그인:
을 ''로 하면 '''로 바뀝니다.type="submit"송신 처리를 실시하면, 브라우저는 패스워드의 보존을 제안합니다.
<form id="loginform" action="login.php" onSubmit="return login(this);">
<input name="username" type="text" />
<input name="password" type="password" />
<input name="doLogin" type="submit" value="Login" />
</form>
이 방법을 사용하면 브라우저가 비밀번호 저장을 제안합니다.
다음은 두 가지 방법으로 사용되는 Javascript입니다.
function login(f){
var username = f.username.value;
var password = f.password.value;
/* Make your validation and ajax magic here. */
return false; //or the form will post your data to login.php
}
저도 이 문제에 대해 고민해 왔고, 마침내 문제의 원인과 실패의 원인을 찾아낼 수 있었습니다.
이 모든 것은 로그인 폼이 (backbone.js를 사용하여) 페이지에 동적으로 삽입되고 있었기 때문입니다.로그인 폼을 index.html 파일에 직접 넣자마자 모든 것이 잘 작동했습니다.
브라우저가 기존 로그인 폼이 있다는 것을 인식해야 하는데, 제 로그인 폼이 페이지에 동적으로 삽입되기 때문에 "진짜" 로그인 폼이 존재하는지 몰랐기 때문이라고 생각합니다.
이 솔루션은 에릭이 코딩 포럼에 올린 나에게 효과가 있었다.
프롬프트가 표시되지 않는 이유는 브라우저가 서버를 리프레시하기 위해 페이지를 물리적으로 필요로 하기 때문입니다.폼을 사용하여 두 가지 작업을 수행하는 방법이 있습니다.첫 번째 액션은 Ajax 코드를 호출하도록 송신하는 것입니다.또한 양식 대상을 숨겨진 iframe으로 지정합니다.
코드:
<iframe src="ablankpage.htm" id="temp" name="temp" style="display:none"></iframe>
<form target="temp" onsubmit="yourAjaxCall();">
이로 인해 프롬프트가 표시되는지 여부를 확인합니다.
에릭.
http://www.codingforums.com/showthread.php?t=123007에 게재
심플한 2020년식 어프로치
그러면 자동으로 브라우저에 자동 완성 및 암호 저장 기능이 활성화됩니다.
autocomplete="on"표준)autocomplete="username"/filename입력, 이메일/filename)autocomplete="current-password"(입력, 패스워드)
<form autocomplete="on">
<input id="user-text-field" type="email" autocomplete="username"/>
<input id="password-text-field" type="password" autocomplete="current-password"/>
</form>
자세한 것은, Apple 의 메뉴얼을 참조해 주세요.HTML 입력 요소에서의 패스워드 자동 입력의 이니블화
모든 브라우저(테스트 완료: chrome 25, safari 5.1, IE10, Firefox 16)에서 jQuery 및 ajax 요청을 사용하여 비밀번호 저장을 요구할 수 있는 궁극적인 솔루션이 있습니다.
JS:
$(document).ready(function() {
$('form').bind('submit', $('form'), function(event) {
var form = this;
event.preventDefault();
event.stopPropagation();
if (form.submitted) {
return;
}
form.submitted = true;
$.ajax({
url: '/login/api/jsonrpc/',
data: {
username: $('input[name=username]').val(),
password: $('input[name=password]').val()
},
success: function(response) {
form.submitted = false;
form.submit(); //invoke the save password in browser
}
});
});
});
HTML:
<form id="loginform" action="login.php" autocomplete="on">
<label for="username">Username</label>
<input name="username" type="text" value="" autocomplete="on" />
<label for="password">Password</label>
<input name="password" type="password" value="" autocomplete="on" />
<input type="submit" name="doLogin" value="Login" />
</form>
요령은 폼을 정지하고 독자적인 방식(event.stopPropagation())을 송신하는 것입니다.대신 자신의 코드($.ajax())를 송신해, 성공했을 경우, 폼을 다시 송신해, 브라우저에 패스워드 보존 요구를 표시하는 것입니다.에러 핸들러등을 추가할 수도 있습니다.
누군가에게 도움이 됐으면 좋겠네요
나는 Spetson의 답변을 시도했지만 Chrome 18에서는 그것이 작동하지 않았다.iframe에 로드 핸들러를 추가하여 전송을 중단하지 않았습니다(jQuery 1.7).
function getSessions() {
$.getJSON("sessions", function (data, textStatus) {
// Do stuff
}).error(function () { $('#loginForm').fadeIn(); });
}
$('form', '#loginForm').submit(function (e) {
$('#loginForm').fadeOut();
});
$('#loginframe').on('load', getSessions);
getSessions();
HTML:
<div id="loginForm">
<h3>Please log in</h3>
<form action="/login" method="post" target="loginframe">
<label>Username :</label>
<input type="text" name="login" id="username" />
<label>Password :</label>
<input type="password" name="password" id="password"/>
<br/>
<button type="submit" id="loginB" name="loginB">Login!</button>
</form>
</div>
<iframe id="loginframe" name="loginframe"></iframe>
getSessions()는 AJAX 호출을 수행하고 실패 시 loginForm div를 표시합니다(사용자가 인증되지 않은 경우 웹 서비스는 403을 반환합니다).
FF 및 IE8에서도 동작 테스트 완료.
브라우저는 사용자의 양식이 로그인 양식임을 감지하지 못할 수 있습니다.이전 질문의 일부 설명에 따르면 브라우저는 다음과 같은 양식 필드를 찾습니다.<input type="password">스워드폼폼필????????
편집: 아래 질문에 답하기 위해 Firefox는 다음 방법으로 패스워드를 검출합니다.form.elements[n].type == "password"(모든 폼 요소에서 반복)를 사용하여 비밀번호 필드 직전에 폼 요소를 거꾸로 검색하여 사용자 이름 필드를 검색합니다(자세한 내용은 여기를 참조하십시오).제가 알기로는 로그인 폼은 다음 중 하나여야 합니다.<form>파이어폭스
HTML5 History API를 사용하여 비밀번호를 저장하도록 지시할 수 있는 답변은 아직 없습니다.
'아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 네.<form>요소에는 패스워드, 이메일 또는 사용자 이름 필드가 있습니다.대부분의 브라우저는 올바른 입력 유형(패스워드, 이메일 또는 사용자 이름)을 사용하는 한 이 작업을 자동으로 처리합니다.그러나 확실하게 하기 위해 각 입력 요소에 대해 자동 완성 값을 올바르게 설정하십시오.
자동완료값 목록은 https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete 에서 확인할 수 있습니다.
은 다음과 같습니다.username,email ★★★★★★★★★★★★★★★★★」current-password
다음 두 가지 가능성이 있습니다.
- 송신 후에 다른 URL로 이동하면, 대부분의 브라우저는 패스워드를 저장하도록 요구됩니다.
- 다른 URL로 리디렉션하지 않거나 페이지를 다시 로드하지 않으려면(예: 단일 페이지 응용프로그램).폼의 송신 핸들러에서 이벤트 기본값(e.proventDefault 사용)을 방지하기만 하면 됩니다.HTML5 이력 API를 사용하여 이력상의 무언가를 푸시하여 단일 페이지 응용 프로그램 내에서 '내비게이트'했음을 나타낼 수 있습니다.이제 브라우저에 비밀번호와 사용자 이름을 저장하라는 메시지가 표시됩니다.
history.pushState({}, "Your new page title");
또한 페이지의 URL을 변경할 수 있지만, 비밀번호 저장 여부를 확인하는 데 반드시 필요한 것은 아닙니다.
history.pushState({}, "Your new page title", "new-url");
문서: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
이로 인해 사용자가 비밀번호를 잘못 입력했을 경우 브라우저가 비밀번호를 저장하도록 요구하는 것을 방지할 수 있다는 추가적인 이점이 있습니다.브라우저에 따라서는 .proventDefault를 호출하여 이력 API를 사용하지 않아도 브라우저는 항상 자격 정보의 저장을 요구합니다.
브라우저 기록을 이동하거나 수정하지 않으려면 대신 replaceState를 사용할 수 있습니다(이것도 작동합니다).
저는 이 스레드에 대한 다양한 답을 읽으면서 많은 시간을 보냈고, 저로서는 사실 조금 달랐습니다(관련되어 있지만, 다른).Mobile Safari(iOS 디바이스)에서 페이지 로드 시 로그인 폼이 HIDDEN일 경우 프롬프트는 표시되지 않습니다(폼을 표시한 후 전송).다음 코드를 사용하여 테스트할 수 있습니다.이 코드는 페이지 로드 후 5초 후에 폼을 표시합니다.JS 와 디스플레이를 떼어냅니다.없음. 그러면 동작합니다.저는 아직 해결책을 찾지 못했습니다.다른 사람이 같은 문제를 가지고 있고 원인을 알 수 없는 경우를 대비해서 게시한 것입니다.
JS:
$(function() {
setTimeout(function() {
$('form').fadeIn();
}, 5000);
});
HTML:
<form method="POST" style="display: none;">
<input name='email' id='email' type='email' placeholder='email' />
<input name='password' id='password' type='password' placeholder='password' />
<button type="submit">LOGIN</button>
</form>
다음 코드는 테스트 대상입니다.
- 크롬 39.0.2171.99m: 작동 중
- Android Chrome 39.0.2171.93: 작동 중
- Android 스톡 브라우저(Android 4.4): 작동하지 않음
- Internet Explorer 5+ (에뮬레이션):일해
- Internet Explorer 11.0.9600.17498 / 업데이트 버전: 11.0.15: 작동 중
- 파이어폭스 35.0: 기능하고 있다
JS-Fiddle:
http://jsfiddle.net/ocozggqu/httpjsfiddle.net//
우편 번호:
// modified post-code from https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit
function post(path, params, method)
{
method = method || "post"; // Set method to post by default if not specified.
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
var form = document.createElement("form");
form.id = "dynamicform" + Math.random();
form.setAttribute("method", method);
form.setAttribute("action", path);
form.setAttribute("style", "display: none");
// Internet Explorer needs this
form.setAttribute("onsubmit", "window.external.AutoCompleteSaveForm(document.getElementById('" + form.id + "'))");
for (var key in params)
{
if (params.hasOwnProperty(key))
{
var hiddenField = document.createElement("input");
// Internet Explorer needs a "password"-field to show the store-password-dialog
hiddenField.setAttribute("type", key == "password" ? "password" : "text");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
var submitButton = document.createElement("input");
submitButton.setAttribute("type", "submit");
form.appendChild(submitButton);
document.body.appendChild(form);
//form.submit(); does not work on Internet Explorer
submitButton.click(); // "click" on submit-button needed for Internet Explorer
}
언급
- 동적 로그인 폼의 경우 로의 콜이 필요합니다.
- Internet Explorer에서 store-password-dialog를 표시하려면 "password" 필드가 필요합니다.
- Internet Explorer에서 송신 버튼을 클릭할 필요가 있는 것 같습니다(가짜 클릭이라도).
다음은 Ajax 로그인 코드의 예를 제시하겠습니다.
function login(username, password, remember, redirectUrl)
{
// "account/login" sets a cookie if successful
return $.postJSON("account/login", {
username: username,
password: password,
remember: remember,
returnUrl: redirectUrl
})
.done(function ()
{
// login succeeded, issue a manual page-redirect to show the store-password-dialog
post(
redirectUrl,
{
username: username,
password: password,
remember: remember,
returnUrl: redirectUrl
},
"post");
})
.fail(function ()
{
// show error
});
};
언급
- 성공한 경우 "account/module"이 쿠키를 설정합니다.
- 페이지 리다이렉트("js-code에 의해 수동으로")가 필요한 것 같습니다.iframe-post도 테스트했지만 성공하지 못했습니다.
프로토타입을 위한 꽤 우아한 솔루션(혹은 해킹 등)을 찾았습니다.JS 사용자는 프로토타입을 사용한 마지막 홀드아웃 중 하나입니다.대응하는 jQuery 메서드를 간단하게 치환하면 문제가 없습니다.
선, ,, 그, 그, 그, 그, 인, 인, 인, 합, 니, first, first, first, first, first, first, first이 있는지<form>및 수 있는 (이 경우는 「」)faux-submit로 설정된 스타일을 된 것을 .display:none과 같이)
<form id="login_form" action="somewhere.php" method="post">
<input type="text" name="login" />
<input type="password" name="password" />
<div style="display:none">
<input class="faux-submit" type="submit" value="Submit" />
</div>
<button id="submit_button">Login</button>
</form>
다음 ' 옵저버'를 보세요.button'무조건'하다
$('submit_button').observe('click', function(event) {
$('login_form').submit();
});
다음 ''라는 보세요.submit★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ event.stop() DOM 로 한, 합니다.Event.findElement버튼의 (상기와와합니다.faux-submit
document.observe('submit', function(event) {
if (event.findElement(".faux-submit")) {
event.stop();
}
});
이것은 Firefox 43 및 Chrome 50에서 동작하는 것으로 테스트되고 있습니다.
귀하의 사이트는 이미 브라우저에 비밀번호 저장 여부를 묻는 메시지를 표시하지 않는 목록에 있을 수 있습니다.파이어폭스에서 옵션 -> 보안 -> 사이트 비밀번호 기억하기[체크박스] - 예외[버튼]
@Michal Roharik의 답변에 조금 더 정보를 추가합니다.
ajax 콜이 반환 URL을 반환하는 경우 jquery를 사용하여 폼을 호출하기 전에 해당 URL로 폼액션 속성을 변경해야 합니다.
예를 들어,
$(form).attr('action', ReturnPath);
form.submitted = false;
form.submit();
비슷한 문제가 있었습니다만, 로그인은 ajax로 이루어졌지만, 브라우저(firefox, chrome, safari 및 IE 7-10)는 양식(#loginForm)을 ajax와 함께 제출하면 패스워드를 저장할 수 없습니다.
솔루션으로서 Ajax가 송신한 폼에 숨겨진 송신 입력(#loginInFormHiddenSubmit)을 추가해, Ajax 콜이 성공했을 경우, 숨겨진 송신 입력에 클릭을 트리거 합니다.페이지를 새로 고쳐야 했습니다.클릭은 다음 방법으로 트리거할 수 있습니다.
jQuery('#loginFormHiddenSubmit').click();
숨겨진 송신 버튼을 추가한 이유는 다음과 같습니다.
jQuery('#loginForm').submit();
(다른 브라우저에서는 동작하고 있지만) IE에서는 패스워드를 저장할 수 없습니다.
나는 모든 방법을 시도해 보았다.모든 것이 완벽하게 되는 것은 아니다.이게 제 해결책입니다.저는 좋아요.잘 됐으면 좋겠어요.이메일/사용자 이름 입력을 텍스트 영역으로 바꿉니다.
<form>
<textarea required placeholder="Email" rows=1></textarea>
<input required placeholder="Password" type="password" readonly onfocus="this.removeAttribute('readonly')" />
<button>
Sign in
</button>
모든 브라우저(예: IE 6)에 자격 정보를 기억하는 옵션이 있는 것은 아닙니다.
사용자가 정상적으로 로그인하면 쿠키를 통해 사용자 정보를 저장하고 "Remember Me on this machine" 옵션을 사용할 수 있습니다.이렇게 하면 사용자가 다시 로그인한 경우에도 웹 응용 프로그램이 쿠키를 가져와 사용자 정보(사용자 ID + 세션 ID)를 가져와 작업을 계속할 수 있습니다.
이것이 시사적이기를 바랍니다. :-)
사실 브라우저에 강제로 물어볼 수는 없습니다.비밀번호가 이 있을 예를 , 된 사용자 비밀번호가 됩니다. 예를 들어, 입력된 사용자 이름/비밀번호를 찾는 등type="password"브라우저를 강제적으로 설정할 수 없습니다.
다른 사용자가 제안하는 것처럼 쿠키에 사용자 정보를 추가할 수 있습니다.이 경우 최소한 암호화하고 비밀번호를 저장하지 않는 것이 좋습니다.아마도 그들의 사용자 이름을 많이 저장할 것이다.
모든 입력이 양식에 포함되도록 대화 상자를 양식에 첨부할 수 있습니다.다른 하나는 사용자 이름 텍스트 필드 바로 뒤에 비밀번호 텍스트 필드를 만드는 것입니다.
이것은 100% 에이잭스되어 브라우저가 로그인을 검출하기 때문에 훨씬 효과적입니다.
<form id="loginform" action="javascript:login(this);" >
<label for="username">Username</label>
<input name="username" type="text" value="" required="required" />
<label for="password">Password</label>
<input name="password" type="password" value="" required="required" />
<a href="#" onclick="document.getElementById("loginform").submit();" >Login</a>
</form>
쿠키를 사용하는 것이 가장 좋은 방법일 것입니다.
"Remember me?" 체크박스를 켜고 //user login// 정보를 저장하는 쿠키를 만들 수 있습니다.편집: 사용자 세션 정보
쿠키를 만들려면 PHP로 로그인 양식을 처리해야 합니다.
언급URL : https://stackoverflow.com/questions/2382329/how-can-i-get-browser-to-prompt-to-save-password
'source' 카테고리의 다른 글
| org.json을 효율적으로 매핑하는 방법.JSONObject to POJO? (0) | 2023.02.14 |
|---|---|
| 다른 지시문 안에 각도 지시문 사용 (0) | 2023.02.14 |
| react-module, 번들 (0) | 2023.02.10 |
| asp.net MVC에서 JsonResult를 통해 반환된 ExpandoObject를 평탄하게 하려면 어떻게 해야 합니까? (0) | 2023.02.10 |
| 부모 노드와 통신하기 위한 react.display 사용자 지정 이벤트 (0) | 2023.02.10 |