Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

फ़ॉर्म से क्रेडेंशियल सेव करना

Eiji Kitamura

Meggin Kearney

साइन-इन फ़ॉर्म से क्रेडेंशियल सेव करना

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

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

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

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

फ़ॉर्म में `autocomplete` शामिल करें

आगे बढ़ने से पहले, देखें कि आपके फ़ॉर्म में autocomplete एट्रिब्यूट शामिल हैं या नहीं. इससे Credential Management API को फ़ॉर्म से id और password ढूंढने और क्रेडेंशियल ऑब्जेक्ट बनाने में मदद मिलती है.

इससे उन ब्राउज़र को भी Credential Management API के सिमैंटिक समझने में मदद मिलती है जिन पर यह एपीआई काम नहीं करता. जेसन ग्रिग्सबी के इस लेख में, जानकारी अपने-आप भरने की सुविधा के बारे में ज़्यादा जानें.

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

Browser Support

Source

`navigator.credentials.store()`