मुझे पासवर्ड बचाने के लिए संकेत देने के लिए ब्राउज़र कैसे मिल सकता है?

Question

अरे, मैं एक वेब ऐप पर काम कर रहा हूं जिसमें एक लॉगिन डायलॉग है जो इस तरह काम करता है:

1. उपयोगकर्ता क्लिक "लॉगिन"
2. लॉगिन फॉर्म HTML को AJAX के साथ लोड किया गया है और पृष्ठ पर DIV में प्रदर्शित किया गया है
3. उपयोगकर्ता फ़ील्ड्स और क्लिक सबमिट में उपयोगकर्ता / पास दर्ज करता है। यह एक नहीं है<form> - उपयोगकर्ता / पास को AJAX के माध्यम से प्रस्तुत किया जाता है
4. यदि उपयोगकर्ता / पास ठीक हैं, तो पेज लॉग इन उपयोगकर्ता के साथ पुनः लोड होता है।
5. यदि उपयोगकर्ता / पास खराब हैं, तो पृष्ठ पुनः लोड नहीं होता है, लेकिन DIV में त्रुटि संदेश दिखाई देता है और उपयोगकर्ता को फिर से प्रयास करने के लिए मिलता है।

यहां समस्या यह है: ब्राउज़र कभी भी "इस पासवर्ड को सहेजें? हाँ / कभी नहीं / अब नहीं" संकेत देता है कि यह अन्य साइटों के लिए करता है।

मैं लपेटकर कोशिश की <div>में<form> "स्वत: पूर्ण =" के साथ टैग लेकिन इससे कोई फर्क नहीं पड़ा।

क्या मेरे लॉगिन प्रवाह के एक प्रमुख rework के बिना पासवर्ड को स्टोर करने की पेशकश करने के लिए ब्राउज़र प्राप्त करना संभव है?

धन्यवाद एरिक

अपने सवाल में जोड़ने के लिए, मैं निश्चित रूप से ब्राउज़रों के साथ काम कर रहा हूं जो पासवर्ड स्टोर करते हैं, और मैंने "इस साइट के लिए कभी नहीं" पर क्लिक किया है ... यह ब्राउज़र के साथ एक तकनीकी समस्या है जो यह नहीं पता लगा रही है कि यह एक लॉगिन फ़ॉर्म है, नहीं ऑपरेटर त्रुटि :-)

Comments

मत भूलो कि सभी ब्राउज़र पासवर्ड स्टोर नहीं कर सकते हैं।

— बुहाके सिंडी

mabe ब्राउज़र ने आपके उपयोगकर्ता / पास को बचाने की पेशकश की और आपने "फिर कभी मत पूछो!" ?

— clyfe 20

संबंधित: stackoverflow.com/questions/6142725/…

— user123444555621

Answer 1

मुझे इस सवाल का पूरा हल मिल गया। (मैंने इसे क्रोम 27 और फ़ायरफ़ॉक्स 21 में परीक्षण किया है)।

जानने के लिए दो चीजें हैं:

1. ट्रिगर 'सेव पासवर्ड', और
2. सहेजे गए उपयोगकर्ता नाम / पासवर्ड को पुनर्स्थापित करें

1. ट्रिगर 'सेव पासवर्ड':

के लिए फ़ायरफ़ॉक्स 21 , 'सहेजें पासवर्ड' शुरू हो रहा है, जब यह पता लगाता है एक फार्म इनपुट पाठ फ़ील्ड और इनपुट पासवर्ड क्षेत्र युक्त प्रस्तुत किया जाता है है कि वहाँ है। इसलिए हमें बस इस्तेमाल करने की जरूरत है

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

someFunctionForLogin()ajax लॉगिन करता है और event.preventDefault()फॉर्म को सबमिट करने के कारण मूल पुनर्निर्देशन को अवरुद्ध करते समय पृष्ठ में हस्ताक्षरित पर पुनः लोड / रीडायरेक्ट करता है।

यदि आप केवल फ़ायरफ़ॉक्स से निपटते हैं, तो उपरोक्त समाधान पर्याप्त है, लेकिन यह क्रोम 27 में काम नहीं करता है। तब आप पूछेंगे कि क्रोम 27 में 'पासवर्ड सहेजें' को कैसे ट्रिगर किया जाए।

के लिए क्रोम 27 , 'सहेजें पासवर्ड' शुरू हो रहा है के बाद यह रूप है जो इनपुट पाठ फ़ील्ड में जमा करके पृष्ठ पर पुनः निर्देशित किया गया है विशेषता नाम = 'उपयोगकर्ता नाम' के साथ और इनपुट पासवर्ड फ़ील्ड विशेषता नाम = 'पासवर्ड' के साथ । इसलिए, हम फॉर्म सबमिट करने के कारण पुनर्निर्देशन को रोक नहीं सकते हैं, लेकिन हमने 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();हस्ताक्षरित पृष्ठ पर पुनर्निर्देशित करना। यदि हस्ताक्षरित पृष्ठ वर्तमान पृष्ठ है, तो आप 'ताज़ा' बनाने के लिए 'हस्ताक्षरित' XXX 'को वर्तमान पृष्ठ से बदल सकते हैं।

अब, आप पाएंगे कि क्रोम 27 के लिए विधि फ़ायरफ़ॉक्स 21 में भी काम करती है। इसलिए इसका उपयोग करना बेहतर है।

2. सहेजे गए उपयोगकर्ता नाम / पासवर्ड को पुनर्स्थापित करें:

यदि आपके पास पहले से ही HTML के रूप में लॉगिनफ़ॉर्म हार्ड-कोडेड है, तो आपको लॉगिनफ़ॉर्म में सहेजे गए पासवर्ड को पुनर्स्थापित करने के लिए कोई समस्या नहीं मिलेगी।
हालाँकि, सहेजे गए उपयोगकर्ता नाम / पासवर्ड लॉगिनफ़ॉर्म के लिए बाध्य नहीं होंगे यदि आप लॉगफ़ॉर्म को गतिशील रूप से बनाने के लिए js / jquery का उपयोग करते हैं, क्योंकि सहेजे गए उपयोगकर्ता नाम / पासवर्ड केवल तभी लोड होते हैं जब दस्तावेज़ लोड होता है।
इसलिए, आपको HTML के रूप में लॉगिनफ़ॉर्म को हार्ड-कोड करने की आवश्यकता है और गतिशील रूप से लॉगिनफ़ॉर्म को स्थानांतरित / दिखाने / छिपाने के लिए js / jquery का उपयोग करें।

---

टिप्पणी: यदि आप ajax लॉगिन करते हैं, autocomplete='off'जैसे टैग फॉर्म में न जोड़ें

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

autocomplete='off' लॉगिन यूज़रनेम / पासवर्ड को लॉगिनफ़ॉर्म में बना देगा, क्योंकि आप इसे उपयोगकर्ता नाम / पासवर्ड को 'स्वतः पूर्णता' की अनुमति नहीं देते हैं।

Comments

Chrome में 'event.preventDefault ()' 'पासवर्ड सेव करें "प्रॉम्प्ट को दिखाने से रोकता है, इस बग को देखें: code.google.com/p/chromium/issues/detail?id=282488

— mkurz

किसी और के लिए जो इस तरह से ठोकर

बहुत से उपयोगकर्ता ENTERफ़ॉर्म जमा करने के लिए कुंजी का उपयोग कर रहे हैं , क्योंकि आपके पास prevented defaultजब उपयोगकर्ता ने फ़ॉर्म जमा किया है, तो कुछ भी नहीं होगा, यह बुरा यूएक्स है। keycodeसबमिट करते समय आप प्रवेश कुंजी की जांच कर सकते हैं , हालांकि आप फिर से भीख मांगने के लिए मिलेंगे ...

— डेविड रीनबर्गर

Chrome 46 ने अपने गलत व्यवहार को ठीक कर लिया - अब किसी भी तरह के वर्कअराउंड की आवश्यकता नहीं है। देखें stackoverflow.com/a/33113374/810109

— mkurz

मज़बूती से काम नहीं करता है, कुछ ब्राउज़र जावास्क्रिप्ट से सबमिट करते हैं तो "याद रखें" सुविधा को ट्रिगर नहीं करते हैं।

— जस्टमार्टिन

Answer 2

लॉगिन करने के लिए एक बटन का उपयोग करना :

यदि आप type="button"एक 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>

चूंकि इस फॉर्म में एक सबमिट बटन नहीं है और इसमें कोई एक्शन फ़ील्ड नहीं है, इसलिए ब्राउज़र पासवर्ड को सहेजने की पेशकश नहीं करेगा।

---

लॉगिन करने के लिए सबमिट बटन का उपयोग करना :

हालांकि, यदि आप 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>

इस पद्धति का उपयोग करते हुए, ब्राउज़र को पासवर्ड को सहेजने की पेशकश करनी चाहिए।

---

यहाँ जावास्क्रिप्ट का उपयोग दोनों विधियों में किया गया है:

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
}

Comments

@Bigood क्योंकि यह काम करता है, जबकि स्वीकृत जवाब नहीं था (मेरे लिए, कम से कम)। धन्यवाद स्पेट्सन!

— डबल एम

IE में भी मेरे लिए काम करता है। मैं तुम्हें अब चुंबन सकता है!

— रेना

मेरे लिए भी काम किया .. :)

— नबील

यह सही है और समस्या का सबसे सुरुचिपूर्ण समाधान भी है।

— अर्श काज़मी

यह काम करता है क्योंकि मैं केवल 2 कोड की प्रतिलिपि बनाता हूं और इसे निरीक्षण तत्व के माध्यम से लॉगिन पृष्ठ पर पेस्ट करता हूं, उस पृष्ठ पर दर्ज किए गए नए जोड़े में उपयोगकर्ता नाम / पासवर्ड दर्ज करें और लॉगिन दबाएं तो यह मुझे उपयोगकर्ता / पासवर्ड को बचाने के लिए संकेत देता है। फिर मैं पृष्ठ और

— वॉइला

Answer 3

मैं खुद इसके साथ संघर्ष कर रहा हूं, और मैं आखिरकार इस मुद्दे को ट्रैक करने में सक्षम था और क्या कारण था कि यह विफल हो गया।

यह सब इस तथ्य से उपजा है कि मेरे लॉगिन फ़ॉर्म को गतिशील रूप से पृष्ठ में (backbone.js का उपयोग करके) इंजेक्ट किया जा रहा था। जैसे ही मैं अपने लॉगिन फॉर्म को सीधे अपनी index.html फ़ाइल में एम्बेड करता हूं, सब कुछ एक आकर्षण की तरह काम करता है।

मुझे लगता है कि ऐसा इसलिए है क्योंकि ब्राउज़र को इस बात की जानकारी होनी चाहिए कि एक मौजूदा लॉगिन फ़ॉर्म है, लेकिन चूंकि खान को गतिशील रूप से पृष्ठ में इंजेक्ट किया जा रहा था, इसलिए यह नहीं पता था कि "वास्तविक" लॉगिन फ़ॉर्म कभी अस्तित्व में था।

Comments

Chrome संस्करण 46 से शुरू करके आप अब गतिशील रूप से भी इंजेक्शन लगा सकते हैं और उन्हें "वास्तविक" लॉगिन फ़ॉर्म के रूप में पहचाना जाएगा जिसे क्रेडेंशियल्स को बचाया जा सकता है। देखें stackoverflow.com/a/33113374/810109

— mkurz 22

Answer 4

इस समाधान ने मेरे लिए एरिक द्वारा कोडिंगफोरम पर पोस्ट किया

---

इसका कारण यह संकेत नहीं देता है क्योंकि ब्राउज़र को पृष्ठ को सर्वर पर वापस ताज़ा करने के लिए पृष्ठ की आवश्यकता है। एक छोटी सी चाल जो आप कर सकते हैं वह है फॉर्म के साथ दो क्रिया करना। पहली कार्रवाई है ऑन्सुबमिट ने इसे आपका अजाक्स कोड कहा है। इसके अलावा प्रपत्र को एक छिपे हुए आइफ्रेम को लक्षित करें।

कोड:

<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 पर पोस्ट किया गया

Comments

एक नोट के रूप में, मैंने पाया कि यदि आपके द्वारा फॉर्म सबमिट किया जाता है तो क्रोम 11 आपकी साख बचाने की पेशकश नहीं करता है । इसलिए आपको actionकुछ डमी पृष्ठ पर सेट करने की आवश्यकता है ।

— user123444555621

यह url में पासवर्ड प्लेटेक्स्ट को एक अनुरोध के रूप में भेजेगा। यदि विधि POST में बदल जाती है, तो फ़ायरफ़ॉक्स (16) एक नए टैब में पूर्व में छिपा हुआ फ्रेम खोल देगा। एंड्रॉइड 4 पर क्रोम के लिए भी यही सच है। :-(

— stefan.s

Chrome 46 ने अपने गलत व्यवहार को ठीक कर लिया - iframeअब किसी भी तरह के वर्कअराउंड की आवश्यकता नहीं है। देखें stackoverflow.com/a/33113374/810109

— mkurz

Answer 5

सभी ब्राउज़रों को मजबूर करने के लिए एक अंतिम समाधान है (परीक्षण किया गया: क्रोम 25, सफारी 5.1, IE10, फ़ायरफ़ॉक्स 16) jQuery और ajax अनुरोध का उपयोग करके पासवर्ड बचाने के लिए कहें :

जे एस:

$(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) (और) भेजें और ajax की सफलता कॉलबैक फ़ॉर्म को फिर से सबमिट करें ताकि ब्राउज़र इसे पकड़ ले और प्रदर्शित करे। पासवर्ड बचाने के लिए अनुरोध। आप कुछ त्रुटि हैंडलर आदि भी जोड़ सकते हैं।

आशा है कि इसने किसी की मदद की।

Comments

यह वास्तव में एक HTTP प्राप्त करेगा, login.php?username=username&password=passwordजो पहली बार में पासवर्ड बचाने के पूरे उद्देश्य को धता बताता है

— Adaptabi

वुओओओओउऊऊऊओओओओओओओओओओओओओओओओओहु! मेरे लिए काम किया;) बहुत बहुत धन्यवाद!

— हार्दिक ठाकर

हां, event listenerफॉर्म में event.preventDefault()event.stopPropagation()

— जोड़ो

Answer 6

मैंने स्‍पेसटन के जवाब की कोशिश की, लेकिन यह मेरे लिए क्रोम 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>

getSession () AJAX कॉल करता है और अगर यह विफल होता है तो लॉगिनफर्म डिव को दिखाता है। (यदि उपयोगकर्ता प्रमाणित नहीं है तो वेब सेवा 403 वापस आ जाएगी)।

FF और IE8 में भी काम करने के लिए परीक्षण किया गया।

Comments

मैंने क्रोम में इस विधि की कोशिश की, और यह तब तक काम नहीं करेगा जब तक कि कार्रवाई पृष्ठ ( /loginआपके उदाहरण में) ने कुछ पाठ या अन्य दृश्यमान सामग्री वापस नहीं की।

— स्टीफन बंच

Chrome 46 ने अपने गलत व्यवहार को ठीक कर लिया - iframeअब किसी भी तरह के वर्कअराउंड की आवश्यकता नहीं है। देखें stackoverflow.com/a/33113374/810109

— mkurz

Answer 7

ब्राउज़र यह पता लगाने में सक्षम नहीं हो सकता है कि आपका फ़ॉर्म एक लॉगिन फ़ॉर्म है। इस पिछले प्रश्न में कुछ चर्चा के अनुसार , एक ब्राउज़र फॉर्म फ़ील्ड्स की तलाश करता है जो कि जैसा दिखता है <input type="password">। क्या आपका पासवर्ड फॉर्म फ़ील्ड उसी के समान लागू है?

संपादित करें: नीचे दिए गए आपके प्रश्नों का उत्तर देने के लिए, मुझे लगता है कि फ़ायरफ़ॉक्स पासवर्ड का पता लगाता है form.elements[n].type == "password"(सभी फ़ॉर्म तत्वों के माध्यम से पुनरावृत्ति करता है) और फिर पासवर्ड फ़ील्ड से पहले पाठ फ़ील्ड के लिए फ़ॉर्म तत्वों के माध्यम से पीछे की ओर खोज करके उपयोगकर्ता नाम फ़ील्ड का पता लगाता है (अधिक जानकारी यहाँ )। मैं जो बता सकता हूं, उससे आपके लॉगिन फॉर्म का हिस्सा होना चाहिए <form>या फ़ायरफ़ॉक्स इसका पता नहीं लगाएगा।

Comments

यह समान है, हाँ, धन्यवाद मैं इसे आधिकारिक उत्तर के रूप में स्वीकार करूंगा क्योंकि यह लगभग उतना ही है जितना कि हम प्राप्त कर रहे हैं। यहाँ कुछ निराशाजनक है: मुझे लगता है कि (वेब ​​पर कहीं भी) एक साधारण ब्लॉग पोस्ट नहीं मिल सकती है जो कहती है कि "यहां वे नियम हैं जो यह पता लगाने के लिए उपयोग करते हैं कि क्या आप जिस फॉर्म को भर रहे हैं वह एक लॉगिन फ़ॉर्म है, इसलिए वे पेशकश कर सकते हैं उपयोगकर्ता के पासवर्ड को बचाने के लिए। " यह देखते हुए कि यह काला जादू है (और मोज़िला को देखते हुए, कम से कम, खुला स्रोत है), आपको लगता है कि कोई व्यक्ति केवल आंकड़े प्रकाशित करेगा।

— एरिक

(और इसी तरह, मेरे लिए मेरा लॉगिन फ़ॉर्म "संकेत" करने का कोई तरीका प्रतीत नहीं होता है, इसलिए ब्राउज़र जानता है कि यह एक लॉगिन फ़ॉर्म है। फिर से, यह आश्चर्य की बात नहीं है कि वेब पर इसका बेहतर दस्तावेज़ नहीं है। मुझे लगता है कि मेरे बदलाव हैं। प्रपत्र फ़ील्ड नामों और समग्र HTML संरचना के लिए होगा, और फिर मुझे उम्मीद है [!] जो समस्या को ठीक करता है।)

— एरिक

ठीक है, नसीब नहीं। मैंने एक नया सवाल पूछा है, थोड़ा अलग कोण से इस पर बात करते हुए: stackoverflow.com/questions/2398763/…

— एरिक

Answer 8

सरल 2020 aproach

यह स्वचालित रूप से स्वत: पूर्ण और ब्राउज़र में पासवर्ड सहेजने में सक्षम करेगा।

• autocomplete="on" (प्रपत्र)
• autocomplete="username" (इनपुट, ईमेल / उपयोगकर्ता नाम)
• 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 इनपुट तत्व पर पासवर्ड ऑटोफिल को सक्षम करना

Comments

FYI करने के लिए फ़ॉर्म जमा करने की आवश्यकता होती है (XHR का उपयोग नहीं कर सकते हैं preventDefault) और यह तब काम नहीं करेगा जब केवल एक पासवर्ड फ़ील्ड (डिजिटल-सुरक्षित प्रकार अनुप्रयोग) हो। किसी और के लिए इन निष्कर्षों को साझा करना जो इसे उपयोगी पा सकते हैं।

— टॉमहूस हुबेलबॉउर

Answer 9

मैंने इस थ्रेड पर विभिन्न उत्तरों को पढ़ने में बहुत समय बिताया, और मेरे लिए, यह वास्तव में कुछ अलग (संबंधित, लेकिन अलग) था। मोबाइल सफारी (iOS डिवाइस) पर, यदि पेज लोड होने पर लॉगिन फॉर्म HIDDEN है, तो प्रॉम्प्ट दिखाई नहीं देगा (आप फॉर्म दिखाने के बाद फिर सबमिट करें)। आप निम्न कोड के साथ परीक्षण कर सकते हैं, जो पेज लोड के 5 सेकंड बाद फॉर्म प्रदर्शित करता है। जेएस और डिस्प्ले को हटा दें: कोई नहीं और यह काम करता है। मुझे अभी तक इसका हल नहीं मिला है, बस किसी और के मामले में एक ही मुद्दा है और कारण का पता नहीं लगा सकता।

जे एस:

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

Answer 10

उत्तर में से कोई भी पहले से ही यह स्पष्ट नहीं करता है कि आप पासवर्ड को बचाने के लिए एचटीएमएल 5 इतिहास एपीआई का उपयोग कर सकते हैं।

सबसे पहले, आपको यह सुनिश्चित करने की आवश्यकता है कि आपके पास कम से कम एक है <form> पासवर्ड और ईमेल या उपयोगकर्ता नाम फ़ील्ड के साथ तत्व है। जब तक आप सही इनपुट प्रकारों (पासवर्ड, ईमेल या उपयोगकर्ता नाम) का उपयोग करते हैं, तब तक अधिकांश ब्राउज़र इसे स्वचालित रूप से संभाल लेते हैं। लेकिन सुनिश्चित करने के लिए, प्रत्येक इनपुट तत्व के लिए स्वत: पूर्ण मानों को सही ढंग से सेट करें।

आप स्वत: पूर्ण मूल्यों की एक सूची यहां पा सकते हैं: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

जिन्हें आप की जरूरत है: username,email औरcurrent-password

तब आपके पास दो संभावनाएँ हैं:

• यदि आप सबमिट करने के बाद किसी भिन्न URL पर जाते हैं, तो अधिकांश ब्राउज़र पासवर्ड सहेजने का संकेत देंगे।
• यदि आप किसी भिन्न URL पर पुनर्निर्देशित नहीं करना चाहते हैं या पृष्ठ को पुनः लोड नहीं कर सकते हैं (उदाहरण के लिए एकल पृष्ठ अनुप्रयोग)। फॉर्म के सबमिट हैंडलर में केवल ईवेंट डिफॉल्ट (e.preventDefault का उपयोग करके) को रोकें। आप अपने एकल पृष्ठ एप्लिकेशन के अंदर 'नेविगेट' करने के लिए इतिहास पर कुछ पुश करने के लिए एचटीएमएल 5 इतिहास एपीआई का उपयोग कर सकते हैं। ब्राउज़र अब पासवर्ड और उपयोगकर्ता नाम बचाने के लिए संकेत देगा।

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

इसका अतिरिक्त लाभ है कि आप ब्राउज़र को पासवर्ड को बचाने के लिए कह सकते हैं यदि उपयोगकर्ता ने पासवर्ड गलत दर्ज किया है। ध्यान दें कि कुछ ब्राउज़रों में ब्राउज़र हमेशा क्रेडेंशियल्स को सहेजने के लिए कहेंगे, यहां तक ​​कि जब आप कॉल करते हैं।।

यदि आप ब्राउज़र इतिहास को दूर करना और / या संशोधित नहीं करना चाहते हैं, तो आप इसके बजाय रिप्लेसमेंट का उपयोग कर सकते हैं (यह भी काम करता है)।

Comments

यह वर्ष 2020 का उत्तर है! मुझे history.pushState({}, null "Your new page title");बिना किसी नेविगेशन के url को बदलने के लिए उपयोग करना था

— Delcon

Answer 11

निम्नलिखित कोड का परीक्षण किया जाता है

• Chrome 39.0.2171.99 मीटर: काम कर रहा है
• Android Chrome 39.0.2171.93: काम कर रहा है
• Android स्टॉक-ब्राउज़र (Android 4.4): काम नहीं कर रहा है
• इंटरनेट एक्सप्लोरर 5+ (उत्सर्जित): काम कर रहा है
• इंटरनेट एक्सप्लोरर 11.0.9600.17498 / अपडेट-वर्जन: 11.0.15: वर्किंग
• फ़ायरफ़ॉक्स 35.0: काम कर रहा है

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

पोस्ट-कोड:

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

टिप्पणियों

• डायनामिक लॉगइन-फॉर्म्स के लिए एक कॉल window.external.AutoCompleteSaveFormकी जरूरत होती है
• स्टोर-पासवर्ड-डायलॉग दिखाने के लिए इंटरनेट एक्सप्लोरर को "पासवर्ड" -फील्ड की आवश्यकता होती है
• इंटरनेट एक्सप्लोरर को सबमिट बटन पर क्लिक करने की आवश्यकता होती है (भले ही यह एक नकली क्लिक हो)

यहाँ एक नमूना अजाक्स लॉगिन-कोड है:

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

टिप्पणियों

• "खाता / लॉगिन" सफल होने पर एक कुकी सेट करता है
• पृष्ठ-पुनर्निर्देशित ("मैन्युअल रूप से जेएस-कोड द्वारा शुरू किया गया") की आवश्यकता प्रतीत होती है। मैंने एक आइफ्रेम-पोस्ट का परीक्षण भी किया, लेकिन मैं इसके साथ सफल नहीं था।

Answer 12

मुझे प्रोटोटाइप के लिए एक बहुत ही सुंदर समाधान (या हैक, जो कुछ भी फिट बैठता है) मिला है। उपयोगकर्ता, प्रोटोटाइप का उपयोग करके अंतिम होल्डआउट में से एक हैं। इसी jQuery तरीकों का एक सरल प्रतिस्थापन चाल करना चाहिए।

पहले, सुनिश्चित करें कि एक <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()जब तक यह Event.findElementछिपे हुए इनपुट बटन (ऊपर के रूप में faux-submit) के वर्ग के साथ लिपटे हुए डोम में सभी घटनाओं को रोक देगा ,:

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

यह फ़ायरफ़ॉक्स 43 और क्रोम 50 में काम करने के रूप में परीक्षण किया गया है।

Answer 13

आपकी साइट संभवतः उस सूची में पहले से ही है जहाँ ब्राउज़र को पासवर्ड बचाने के लिए संकेत देने के लिए नहीं कहा गया है। फ़ायरफ़ॉक्स में, विकल्प -> सुरक्षा -> साइटों के लिए पासवर्ड याद रखें [चेक बॉक्स] - अपवाद [बटन]

Answer 14

@Michal Roharik के उत्तर के लिए थोड़ा और जानकारी जोड़ें।

यदि आपका ajax कॉल रिटर्न url लौटाएगा, तो आपको फॉर्म कॉल करने से पहले उस url को फ़ॉर्म एक्शन विशेषता को बदलने के लिए jquery का उपयोग करना चाहिए।

पूर्व।

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

Answer 15

मुझे भी ऐसी ही समस्या थी, लॉगिन अजाक्स के साथ किया गया था, लेकिन ब्राउज़र (फ़ायरफ़ॉक्स, क्रोम, सफारी और IE 7-10) पासवर्ड बचाने की पेशकश नहीं करेंगे यदि फॉर्म (#loginForm) अजाक्स के साथ प्रस्तुत किया गया है।

एक समाधान के रूप में मैंने ajax द्वारा प्रस्तुत किया गया प्रपत्र बनाने के लिए हिडन सबमिट इनपुट (#loginFormHiddenSubmit) को जोड़ा है और ajax कॉल सफलता लौटने के बाद मैं छिपे हुए सबमिट इनपुट पर एक क्लिक ट्रिगर करूँगा। पृष्ठ को रीफ्रेश करने के लिए किसी भी तरह की आवश्यकता है। क्लिक को ट्रिगर किया जा सकता है:

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

कारण है कि मैंने छिपाया हुआ सबमिट बटन जोड़ा है क्योंकि:

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

IE में पासवर्ड सहेजने की पेशकश नहीं करेगा (हालांकि यह अन्य ब्राउज़रों में काम कर चुका है)।

Answer 16

हर ब्राउज़र (जैसे IE 6) में क्रेडेंशियल्स को याद रखने के विकल्प नहीं हैं।

एक चीज जो आप कर सकते हैं (एक बार जब उपयोगकर्ता सफलतापूर्वक लॉग इन करता है) कुकी के माध्यम से उपयोगकर्ता जानकारी संग्रहीत करता है और इस मशीन पर "मुझे याद रखें" विकल्प है। इस तरह, जब उपयोगकर्ता फिर से आता है (भले ही वह लॉग ऑफ हो), तो आपका वेब एप्लिकेशन कुकी को पुनः प्राप्त कर सकता है और उपयोगकर्ता की जानकारी (उपयोगकर्ता आईडी + सत्र आईडी) प्राप्त कर सकता है और उसे काम पर ले जाने की अनुमति दे सकता है।

आशा है कि यह विचारोत्तेजक हो सकता है। :-)

Comments

मैं कुकी में उपयोगकर्ता जानकारी संग्रहीत नहीं करूंगा, कम से कम संवेदनशील कुछ भी।

— जैक मार्शेटी

मेरा मतलब उपयोगकर्ता पासवर्ड स्टोर करना नहीं था। जाहिर है कि useful garbageउपयोगकर्ता जानकारी की पहचान करने के लिए आपको बहुत रचनात्मक होना पड़ेगा । यहां तक ​​कि SO आपको पहचानने के लिए कुकी में जानकारी संग्रहीत करता है।

— बुहके सिंडी

काफी उचित है, लेकिन मैं अब भी उतना ही एन्क्रिप्ट करूंगा जितना आप कर सकते हैं।

— जैक मार्शेट्टी

@JackMarchetti यह ग्राहक पक्ष को एन्क्रिप्ट करना एक बुरा (और थोड़े बेकार) विचार होगा। चूंकि एन्क्रिप्ट करने के लिए आवश्यक कोड दिखाई देता है, कोई भी .js फ़ाइल ढूंढ सकता है और उसे डिक्रिप्ट कर सकता है। इसका मतलब है कि आपको डेटा को कुकी में नहीं रखना चाहिए

— यूनिवर्सल बिजली

Answer 17

सच तो यह है, आप ब्राउज़र को पूछने के लिए मजबूर नहीं कर सकते। मुझे यकीन है कि यदि आपने उपयोगकर्ता नाम / पासवर्ड दर्ज किया है, तो यह अनुमान लगाने के लिए कि यह इनपुट के लिए खोज रहा है, type="password"लेकिन आप ब्राउज़र को बाध्य करने के लिए कुछ भी सेट नहीं कर सकते हैं, यह सुनिश्चित करने के लिए ब्राउज़र का स्वयं का एल्गोरिदम है।

जैसा कि आप दूसरों को सुझाव देते हैं, कुकी में उपयोगकर्ता जानकारी जोड़ सकते हैं। यदि आप ऐसा करते हैं, तो आप इसे कम से कम एन्क्रिप्ट करते हैं और उनके पासवर्ड को स्टोर नहीं करते हैं। शायद उनके उपयोगकर्ता नाम को अधिक से अधिक स्टोर करें।

Comments

और आप कुकीज़ का सुझाव देते हैं?

— बुहके सिंडी

मैं कहता हूं कि आप उनमें जो भी स्टोर करते हैं उसे एन्क्रिप्ट करें।

— जैक मार्शेटी

कुकीज़? Thats एक बुरा विचार है जो होने की प्रतीक्षा कर रहा है

— NightSkyCode

Answer 18

आप डायलॉग को फॉर्म से जोड़ सकते हैं, इसलिए वे सभी इनपुट फॉर्म में हैं। उपयोगकर्ता नाम पाठ फ़ील्ड के ठीक बाद दूसरी चीज़ पासवर्ड टेक्स्ट फ़ील्ड बनाती है।

Answer 19

यह मेरे लिए बहुत बेहतर है, क्योंकि यह 100% ajaxed है और ब्राउज़र लॉगिन का पता लगाता है।

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

Answer 20

एक कुकी का उपयोग करना संभवतः ऐसा करने का सबसे अच्छा तरीका होगा।

आपके पास 'मुझे याद रखें?' के लिए एक चेकबॉक्स हो सकता है। और / / उपयोगकर्ता के लॉगिन // जानकारी को संग्रहीत करने के लिए एक कुकी बनाएँ। संपादित करें: उपयोगकर्ता सत्र सूचना

कुकी बनाने के लिए, आपको PHP के साथ लॉगिन फ़ॉर्म को संसाधित करना होगा।