अपने रजिस्ट्रेशन और साइन-इन फ़ॉर्म को जितना हो सके उतना आसान रखें.
साइन-इन फ़ॉर्म से क्रेडेंशियल सेव करें ताकि उपयोगकर्ताओं को वापस लौटने पर फिर से साइन इन न करना पड़े.
फ़ॉर्म से उपयोगकर्ता के क्रेडेंशियल सेव करने के लिए:
- फ़ॉर्म में
autocompleteशामिल करें. - फ़ॉर्म को सबमिट होने से रोकें.
- अनुरोध भेजकर पुष्टि करें.
- क्रेडेंशियल सेव करें.
- यूज़र इंटरफ़ेस (यूआई) अपडेट करें या आपके हिसाब से बनाए गए पेज पर जाएं.
फ़ॉर्म में autocomplete शामिल करें
आगे बढ़ने से पहले, देखें कि आपके फ़ॉर्म में autocomplete एट्रिब्यूट शामिल हैं या नहीं.
इससे क्रेडेंशियल मैनेजमेंट एपीआई को फ़ॉर्म से id और password ढूंढने और क्रेडेंशियल ऑब्जेक्ट बनाने में मदद मिलती है.
इससे क्रेडेंशियल मैनेजमेंट एपीआई के साथ काम न करने वाले ब्राउज़र को भी इसके सिमेंटिक्स को समझने में मदद मिलती है. ऑटोमैटिक भरने की सुविधा के बारे में ज़्यादा जानने के लिए, जेसन ग्रिग्सबी का यह लेख पढ़ें.
<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 का इस्तेमाल करके अपने सर्वर को क्रेडेंशियल की जानकारी दें.
सर्वर साइड पर, एचटीटीपी कोड 200 या 401 के साथ रिस्पॉन्स देने वाला एंडपॉइंट बनाएं (या मौजूदा एंडपॉइंट में बदलाव करें), ताकि ब्राउज़र को पता चल सके कि साइन अप/साइन इन/बदलाव करने का पासवर्ड पूरा हुआ है या नहीं.
उदाहरण के लिए:
// Try sign-in with AJAX
fetch('/signin', {
method: 'POST',
body: new FormData(e.target),
credentials: 'include',
});
क्रेडेंशियल सेव करना
क्रेडेंशियल को सेव करने के लिए, पहले देखें कि एपीआई उपलब्ध है या नहीं. इसके बाद, फ़ॉर्म एलिमेंट के साथ PasswordCredential को तर्क के तौर पर, सिंक्रोनस या एसिंक्रोनस रूप से इंस्टैंशिएट करें.
navigator.credentials.store() पर कॉल करें.
अगर एपीआई उपलब्ध नहीं है,
तो प्रोफ़ाइल की जानकारी को अगले चरण पर भेजा जा सकता है.
सिंक्रोनस का उदाहरण:
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 ब्राउज़र को क्रेडेंशियल की जानकारी मिल जाती है, तब एक सूचना पॉप-अप होती है. इस सूचना में, क्रेडेंशियल या फ़ेडरेशन प्रोवाइडर को सेव करने के लिए कहा जाता है.
यूज़र इंटरफ़ेस (यूआई) अपडेट करना
अगर सब कुछ ठीक रहता है, तो प्रोफ़ाइल की जानकारी इस्तेमाल करके यूज़र इंटरफ़ेस (यूआई) अपडेट करें या अपने हिसाब से बनाए गए पेज पर जाएं.
}).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
navigator.credentials.store()