Tarayıcıdan şifre kaydetmeyi istemesini nasıl sağlayabilirim?

Hey, şu şekilde çalışan bir oturum açma iletişim kutusu olan bir web uygulaması üzerinde çalışıyorum:

1. Kullanıcı "giriş yap" ı tıklar
2. Oturum açma formu HTML AJAX ile yüklenir ve sayfada DIV'de görüntülenir
3. Kullanıcı alanlara kullanıcı / şifre girer ve gönder düğmesine tıklar. Bu bir DEĞİLDİR <form>- kullanıcı / geçiş AJAX aracılığıyla gönderilir
4. Kullanıcı / geçiş tamamsa, sayfa kullanıcı oturum açmış olarak yeniden yüklenir.
5. Kullanıcı / geçiş kötüyse, sayfa yeniden YÜKLENMEZ, ancak DIV'de hata mesajı görünür ve kullanıcı tekrar deneyebilir.

Sorun şu: tarayıcı hiçbir zaman diğer sitelerde yaptığı gibi her zamanki "Bu parolayı kaydet? Evet / Asla / Şimdi Değil" komutunu sunmaz.

Ben sarma çalıştı <div>yılında <form>" 'açık' otomatik tamamlama =" ile etiketleri ama hiçbir fark yaptı.

Tarayıcıya, oturum açma akışımda büyük bir değişiklik yapmadan şifreyi saklamayı teklif etmesini sağlamak mümkün mü?

teşekkürler Eric

soruma eklemek için ps, kesinlikle şifreleri depolayan tarayıcılarla çalışıyorum ve "asla bu site için" tıklamadım ... bu, tarayıcının bunun bir giriş formu olduğunu algılamamasıyla ilgili teknik bir sorundur, değil operatör hatası :-)

Bu soru için eksiksiz bir çözüm buldum. (Bunu Chrome 27 ve Firefox 21'de test ettim).

Bilmeniz gereken iki şey var:

1. 'Şifreyi kaydet'i tetikleyin ve
2. Kaydedilen kullanıcı adını / şifreyi geri yükleyin

1. 'Şifreyi kaydet'i tetikleyin:

For Firefox 21 sunumundan giriş metin alanı ve giriş Şifre alanını içeren bir form olduğu tespit ettiğinde, 'Şifreyi kaydet' tetiklenir. Bu yüzden sadece kullanmamız gerekiyor

$('#loginButton').click(someFunctionForLogin);
$('#loginForm').submit(function(event){event.preventDefault();});

someFunctionForLogin()event.preventDefault()formun gönderilmesi nedeniyle orijinal yönlendirmeyi bloke ederken, ajax oturum açar ve oturum açılan sayfaya yeniden yükler / yeniden yönlendirir.

Yalnızca Firefox'la ilgileniyorsanız, yukarıdaki çözüm yeterlidir, ancak Chrome 27'de çalışmaz. Ardından, Chrome 27'de 'Şifreyi kaydet'i nasıl tetikleyeceğinizi soracaksınız.

For Chrome 27 , 'Şifreyi kaydet' tetiklenir sonra o giriş metin alanını içeren formu göndererek sayfasına yönlendirilir özellik name = 'kullanıcı adı' ile ve giriş şifre alanına özellik adının = 'şifre' ile . Bu nedenle, formu gönderirken yönlendirmeyi engelleyemiyoruz ancak ajax girişini yaptıktan sonra yönlendirmeyi yapabiliriz. (Ajax girişinin sayfayı yeniden yüklememesini veya bir sayfaya yönlendirme yapmamasını istiyorsanız, maalesef benim çözümüm çalışmıyor.) O halde kullanabiliriz.

<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>

Type = 'button' olan düğme, düğmeye tıklandığında formun gönderilmemesini sağlayacaktır. Ardından, ajax oturum açma için düğmeye bir işlev bağlanır. Son olarak, $('#loginForm').submit();oturum açma sayfasına yönlendirmeleri çağırmak . Oturum açılmış sayfa geçerli sayfaysa, "yenile" yapmak için "imzalı.

Şimdi, Chrome 27 için yöntemin Firefox 21'de de çalıştığını göreceksiniz. Bu yüzden kullanmak daha iyidir.

2. Kaydedilen kullanıcı adını / parolayı geri yükleyin:

LoginForm'u HTML olarak sabit kodlu hale getirdiyseniz, loginForm'da kayıtlı parolayı geri yüklemek için hiçbir sorun bulamazsınız.
Ancak, loginForm'u dinamik olarak yapmak için js / jquery kullanırsanız kaydedilen kullanıcı adı / parola loginForm'a bağlanmayacaktır çünkü kaydedilen kullanıcı adı / parola yalnızca belge yüklendiğinde bağlanır.
Bu nedenle, loginForm'u HTML olarak sabit kodlamanız ve loginForm'u dinamik olarak taşımak / göstermek / gizlemek için js / jquery kullanmanız gerekiyordu.

Not: Ajax girişini yaparsanız, aşağıdaki autocomplete='off'gibi etiket formunda eklemeyin

<form id='loginForm' action='signedIn.xxx' autocomplete='off'>

autocomplete='off' kullanıcı adını / parolayı "otomatik tamamlamasına" izin vermediğiniz için loginForm'a geri yükleme başarısız olur.

Oturum açmak için bir düğme kullanma :

Bir kullanırsanız type="button"bir ile onclickkullanarak giriş işleyicisi ajax, ardından tarayıcı sunmaz şifreyi kaydedin.

<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>

Bu formda bir gönder düğmesi olmadığından ve işlem alanı olmadığından, tarayıcı şifreyi kaydetmeyi teklif etmeyecektir.

Giriş yapmak için bir gönder düğmesi kullanmak :

Bununla birlikte, düğmeyi olarak değiştirir type="submit"ve gönderimi yönetirseniz, tarayıcı şifreyi kaydetmeyi teklif edecektir .

<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>

Bu yöntemi kullanarak, tarayıcı parolayı kaydetmeyi teklif etmelidir.

İşte her iki yöntemde de kullanılan 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
}

Bununla kendim mücadele ediyordum ve sonunda sorunu ve neyin başarısız olmasına neden olduğunu bulabildim.

Hepsi giriş formumun sayfaya dinamik olarak enjekte edilmesinden kaynaklanıyordu (backbone.js kullanarak). Giriş formumu doğrudan index.html dosyama yerleştirdiğim anda, her şey bir cazibe gibi çalıştı.

Sanırım bunun nedeni tarayıcının mevcut bir giriş formu olduğunun farkında olması gerektiğidir, ancak benimki sayfaya dinamik olarak enjekte edildiğinden, "gerçek" bir giriş formunun var olduğunu bilmiyordu.

Bu çözüm, Eric tarafından kodlama forumlarında yayınlanan benim için çalıştı

Bunu istememesinin nedeni, tarayıcının sayfanın sunucuya geri dönmek için fiziksel olarak yenilenmesine ihtiyaç duymasıdır. Yapabileceğiniz küçük bir numara, formla iki işlem yapmaktır. İlk eylem, Ajax kodunuzu çağırmasını sağlayın. Ayrıca formun gizli bir iframe hedeflemesini sağlayın.

Kod:

<iframe src="ablankpage.htm" id="temp" name="temp" style="display:none"></iframe>
<form target="temp" onsubmit="yourAjaxCall();">

Bunun istemin görünmesine neden olup olmadığına bakın.

Eric

Yayınlanan http://www.codingforums.com/showthread.php?t=123007

Tüm tarayıcıları (test edilen: chrome 25, safari 5.1, IE10, Firefox 16) jQuery ve ajax isteğini kullanarak şifreyi kaydetmeyi istemeye zorlayan nihai bir çözüm var :

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>

İşin püf noktası, formu kendi yolunu göndermek için durdurmaktır (event.stopPropagation ()), bunun yerine kendi kodunuzu ($ .ajax ()) gönderin ve ajax'ın başarı geri aramasında, tarayıcının onu yakalaması ve görüntülemesi için formu tekrar gönderin. şifre kaydetme isteği. Ayrıca bazı hata işleyiciler vb. Ekleyebilirsiniz.

Umarım birine yardımcı olmuştur.

Spetson'ın cevabını denedim ama bu benim için Chrome 18'de işe yaramadı. İşe yarayan şey, iframe'e bir yük işleyici eklemek ve gönderimi kesintiye uğratmamaktı (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 () bir AJAX çağrısı yapar ve başarısız olursa loginForm div'i gösterir. (Kullanıcının kimliği doğrulanmamışsa web hizmeti 403'ü döndürecektir).

FF ve IE8'de de çalışmak üzere test edilmiştir.

Tarayıcı, formunuzun bir giriş formu olduğunu algılayamayabilir. Bu önceki sorudaki bazı tartışmalara göre , bir tarayıcı benzer görünen form alanlarını arar <input type="password">. Şifre form alanınız buna benzer bir şekilde uygulandı mı?

Düzenleme: Aşağıdaki sorularınızı yanıtlamak için, Firefox'un parolaları form.elements[n].type == "password"(tüm form öğelerini yineleyerek) algıladığını ve ardından parola alanından hemen önceki metin alanı için form öğelerinde geriye doğru arama yaparak kullanıcı adı alanını algıladığını düşünüyorum (daha fazla bilgi burada ). Söyleyebileceğim kadarıyla, giriş formunuzun bir parçası olması gerekiyor, <form>yoksa Firefox onu algılamayacak.

Basit 2020 yaklaşımı

Bu, otomatik tamamlamayı otomatik olarak etkinleştirir ve tarayıcılarda şifreyi kaydeder.

• autocomplete="on" (form)
• autocomplete="username" (giriş, e-posta / kullanıcı adı)
• autocomplete="current-password" (giriş şifresi)

<form autocomplete="on">
  <input id="user-text-field" type="email" autocomplete="username"/>
  <input id="password-text-field" type="password" autocomplete="current-password"/>
</form>

Apple'ın belgelerine bakın: HTML Giriş Öğesinde Otomatik Parola Doldurmayı Etkinleştirme

Bu konudaki çeşitli cevapları okumak için çok zaman harcadım ve benim için aslında biraz farklı bir şeydi (ilgili ama farklı). Mobil Safari'de (iOS cihazlar), sayfa yüklendiğinde oturum açma formu GİZLİ ise, istem görünmeyecektir (formu gösterdikten sonra gönderdikten sonra). Sayfa yüklendikten 5 saniye sonra formu görüntüleyen aşağıdaki kodla test edebilirsiniz. JS'yi ve ekranı kaldırın: yok ve çalışıyor. Henüz buna bir çözüm bulamadım, sadece başka birinin aynı sorunu yaşaması ve nedenini çözememesi durumunda yayınladım.

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>

Yanıtların hiçbiri, şifreyi kaydetmenizi istemek için HTML5 Geçmiş API'sini kullanabileceğinizi zaten netleştirmiyor.

Öncelikle, <form>şifre ve e-posta veya kullanıcı adı alanına sahip en az bir öğeye sahip olduğunuzdan emin olmanız gerekir . Doğru giriş türlerini (şifre, e-posta veya kullanıcı adı) kullandığınız sürece çoğu tarayıcı bunu otomatik olarak halleder. Ancak emin olmak için her giriş öğesi için otomatik tamamlama değerlerini doğru ayarlayın.

Otomatik tamamlama değerlerinin bir listesini burada bulabilirsiniz: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

İhtiyacınız olanlar: username, emailvecurrent-password

O zaman iki seçeneğiniz var:

• Gönderdikten sonra farklı bir URL'ye giderseniz, çoğu tarayıcı şifreyi kaydetmenizi isteyecektir.
• Farklı bir URL'ye yeniden yönlendirmek veya hatta sayfayı yeniden yüklemek istemiyorsanız (örn. Tek sayfalı bir uygulama). Form gönderme işleyicinizde olay varsayılanlarını (e.preventDefault kullanarak) engellemeniz yeterlidir. Tek sayfalı uygulamanızın içinde "gezindiğinizi" belirtmek için geçmişe bir şeyler göndermek için HTML5 geçmiş API'sini kullanabilirsiniz. Tarayıcı şimdi şifreyi ve kullanıcı adını kaydetmenizi isteyecektir.

history.pushState({}, "Your new page title");

Sayfanın URL'sini de değiştirebilirsiniz, ancak bu, şifreyi kaydetmeniz için gerekli değildir:

history.pushState({}, "Your new page title", "new-url");

Belgeler: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Bu, kullanıcının parolayı yanlış girmesi durumunda tarayıcının parolayı kaydetmeyi istemesini engelleyebilmeniz gibi ek bir yararı da vardır. Bazı tarayıcılarda, .preventDefault'u çağırıp geçmiş API'sini kullanmasanız bile tarayıcının her zaman kimlik bilgilerini kaydetmenizi isteyeceğini unutmayın.

Başka bir yere gitmek ve / veya tarayıcı geçmişini değiştirmek istemiyorsanız, bunun yerine replaceState'i kullanabilirsiniz (bu da işe yarar).

Aşağıdaki kod üzerinde test edilmiştir

• Chrome 39.0.2171.99m: ÇALIŞMA
• Android Chrome 39.0.2171.93: ÇALIŞMA
• Android hisse senedi tarayıcısı (Android 4.4): ÇALIŞMIYOR
• Internet Explorer 5+ (öykünülmüş): ÇALIŞMA
• Internet Explorer 11.0.9600.17498 / Güncelleme Sürümü: 11.0.15: ÇALIŞMA
• Firefox 35.0: ÇALIŞMA

JS-Fiddle:
http://jsfiddle.net/ocozggqu/

Posta kodu:

// modified post-code from /programming/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
}

Uyarılar

• Dinamik oturum açma formları için bir çağrı window.external.AutoCompleteSaveFormgereklidir
• Mağaza parolası iletişim kutusunu göstermek için Internet Explorer'ın bir "parola" alanına ihtiyacı var
• Internet Explorer , gönder düğmesine tıklamayı gerektiriyor gibi görünüyor (sahte bir tıklama olsa bile)

Örnek bir ajax oturum açma kodu:

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
    });
};

Uyarılar

• "hesap / giriş" başarılı olursa bir çerez ayarlar
• Sayfa yeniden yönlendirme (js-kod tarafından "manuel olarak" başlatılan) gerekli görünüyor. Ayrıca bir iframe postasını da test ettim, ancak bunda başarılı olamadım.

Prototype.JS kullanıcıları için oldukça zarif bir çözüm (veya hack, hangisi uygunsa) buldum, bu da Prototip kullanan son beklemelerden biri. Karşılık gelen jQuery yöntemlerinin basit bir ikamesi hile yapmalıdır.

Öncelikle, aşağıda gösterildiği gibi, bir <form>etiketin ve daha sonra başvurulabilecek (bu durumda faux-submit) bir stil ayarlı bir öğenin içinde yuvalanmış bir sınıf adına sahip bir gönder düğmesi bulunduğundan emin olun 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>

Ardından button, formu gösterildiği gibi "gönderecek" bir tıklama gözlemcisi oluşturun :

$('submit_button').observe('click', function(event) {
    $('login_form').submit();
});

Ardından submitolay için bir dinleyici oluşturun ve durdurun. Gizli giriş düğmesinin sınıfıyla event.stop()sarmalanmadıkça Event.findElement(yukarıdaki gibi faux-submit) DOM'daki tüm gönderme olaylarını durdurur :

document.observe('submit', function(event) {
    if (event.findElement(".faux-submit")) { 
        event.stop();
    }
});

Bu, Firefox 43 ve Chrome 50'de çalıştığı için test edilmiştir.

Siteniz büyük olasılıkla, tarayıcınıza bir şifre kaydetmeyi istememesinin söylendiği listede zaten bulunuyor. Firefox'ta, Seçenekler -> Güvenlik -> Siteler için parolayı hatırla [onay kutusu] - istisnalar [düğme]

@Michal Roharik 'in cevabına biraz daha bilgi ekleyin.

ajax çağrınız bir dönüş url'si döndürürse, formu çağırmadan önce form eylem özniteliğini o url'ye değiştirmek için jquery kullanmalısınız.

ör.

$(form).attr('action', ReturnPath);
form.submitted = false;
form.submit(); 

Benzer bir sorun yaşadım, oturum açma ajax ile yapıldı, ancak tarayıcılar (firefox, chrome, safari ve IE 7-10) ajax ile form (#loginForm) gönderilirse şifre kaydetmeyi teklif etmiyor.

Bir itibariyle ÇÖZÜM ben girişi göndermek gizli için bir tıklama tetikleyecek başarıyı dönecekti ajax tarafından ve ajax çağrısından sonra sunuldu forma girdi (#loginFormHiddenSubmit) göndermek gizli ekledik. Sayfanın herhangi bir şekilde yenilenmesi gerekiyordu. Tıklama şu şekilde tetiklenebilir:

jQuery('#loginFormHiddenSubmit').click();

Gizli gönder düğmesi eklememin nedeni şudur:

jQuery('#loginForm').submit();

IE'de şifre kaydetmeyi teklif etmez (diğer tarayıcılarda çalışmasına rağmen).

Her tarayıcının (örneğin, IE 6) kimlik bilgilerini hatırlama seçeneği yoktur.

Yapabileceğiniz şeylerden biri (kullanıcı başarıyla oturum açtığında) kullanıcı bilgilerini tanımlama bilgisi aracılığıyla saklamak ve "Beni bu makinede hatırla" seçeneğine sahip olmaktır. Bu şekilde, kullanıcı tekrar geldiğinde (oturumu kapatmış olsa bile), web uygulamanız çerezi alabilir ve kullanıcı bilgilerini (kullanıcı kimliği + Oturum Kimliği) alabilir ve çalışmaya devam etmesine izin verebilir.

Umarım bu fikir verici olabilir. :-)

Gerçek şu ki, tarayıcıyı sormaya zorlayamazsınız. Eminim tarayıcının, girişini aramak gibi bir kullanıcı adı / şifre girip girmediğinizi tahmin etmek için kendi algoritması vardır, type="password"ancak tarayıcıyı zorlamak için hiçbir şey ayarlayamazsınız.

Başkalarının da önerdiği gibi, kullanıcı bilgilerini bir çereze ekleyebilirsiniz. Bunu yaparsanız , en azından şifrelemeniz ve şifrelerini saklamamanız daha iyi olur . Belki de kullanıcı adlarını en fazla saklayın.

İletişim kutusunu forma ekleyebilirsiniz, böylece tüm bu girişler bir formdadır. Diğer bir şey de şifre metin alanını kullanıcı adı metin alanından hemen sonra yapmaktır.

Bu benim için çok daha iyi çalışıyor, çünkü% 100 ajaxlı ve tarayıcı girişi tespit ediyor.

<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>

Çerez kullanmak muhtemelen bunu yapmanın en iyi yolu olacaktır.

'Beni hatırla' için bir onay kutunuz olabilir. ve formun // kullanıcının oturum açma bilgilerini // saklamak için bir çerez oluşturmasını sağlayın. DÜZENLE: Kullanıcı Oturumu Bilgileri

Bir çerez oluşturmak için, oturum açma formunu PHP ile işlemeniz gerekir.