Forms से क्रेडेंशियल सेव करें

Eiji Kitamura

Meggin Kearney

अपने रजिस्ट्रेशन और साइन-इन फ़ॉर्म को जितना हो सके उतना आसान रखें.

साइन-इन फ़ॉर्म में दिए गए क्रेडेंशियल सेव करें ताकि उपयोगकर्ताओं को वापस आने के बाद, उन्हें फिर से साइन इन नहीं करना पड़े.

फ़ॉर्म से उपयोगकर्ता के क्रेडेंशियल सेव करने के लिए:

1. फ़ॉर्म में autocomplete शामिल करें.
2. फ़ॉर्म को सबमिट होने से रोकें.
3. अनुरोध भेजकर पुष्टि करें.
4. क्रेडेंशियल सेव करें.
5. यूज़र इंटरफ़ेस (यूआई) को अपडेट करें या आपके हिसाब से बनाए गए पेज पर जाएं.

फ़ॉर्म में 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()

सुझाव/राय दें या शिकायत करें