उपयोगकर्ताओं को साइन इन करने की सुविधा देना

Eiji Kitamura

Meggin Kearney

उपयोगकर्ताओं को साइन इन कराने के लिए, ब्राउज़र के पासवर्ड मैनेजर से क्रेडेंशियल वापस पाएं. इसके बाद, उपयोगकर्ताओं को अपने-आप लॉग इन कराने के लिए, उन क्रेडेंशियल का इस्तेमाल करें. एक से ज़्यादा खातों का इस्तेमाल करने वाले उपयोगकर्ताओं को, खाता चुनने की सुविधा का इस्तेमाल करके सिर्फ़ एक टैप में खाता चुनने की सुविधा दें.

अपने आप साइन इन करने की सुविधा

अपने-आप साइन-इन होने की सुविधा, आपकी वेबसाइट पर कहीं भी काम कर सकती है. यह सुविधा, टॉप पेज के साथ-साथ सामान की जानकारी के अन्य पेजों पर भी काम कर सकती है. यह तब काम आता है, जब उपयोगकर्ता किसी सर्च इंजन के ज़रिए आपकी वेबसाइट के अलग-अलग पेजों पर पहुंचते हैं.

अपने-आप साइन इन होने की सुविधा चालू करने के लिए:

1. क्रेडेंशियल की जानकारी पाना.
2. उपयोगकर्ता की पुष्टि करें.
3. यूज़र इंटरफ़ेस (यूआई) को अपडेट करें या आपकी दिलचस्पी के हिसाब से बनाए गए पेज पर जाएं.

क्रेडेंशियल की जानकारी पाना

Browser Support

• 51
• 18
• 60
• 13

Source

क्रेडेंशियल की जानकारी पाने के लिए, navigator.credentials.get() को शुरू करें. अनुरोध करने के लिए क्रेडेंशियल का टाइप बताएं. इसके लिए, password या federated दें.

अपने-आप साइन इन होने की सुविधा के लिए, हमेशा mediation: 'silent' का इस्तेमाल करें. इससे, अगर उपयोगकर्ता इनमें से कोई कार्रवाई करता है, तो प्रोसेस को आसानी से खारिज किया जा सकता है:

• कोई क्रेडेंशियल सेव नहीं किया गया है.
• एक से ज़्यादा क्रेडेंशियल सेव किए गए हैं.
• साइन आउट किया गया हो.

क्रेडेंशियल पाने से पहले, यह देखना न भूलें कि उपयोगकर्ता ने पहले से साइन इन किया हुआ है या नहीं:

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials.get({
      password: true,
      federated: {
        providers: ['https://accounts.google.com'],
      },
      mediation: 'silent',
    });
    // ...
  }
}

navigator.credentials.get() से मिला प्रॉमिस, क्रेडेंशियल ऑब्जेक्ट या null की मदद से रिज़ॉल्व होता है. यह पता लगाने के लिए कि यह PasswordCredential है या FederatedCredential, ऑब्जेक्ट की .type प्रॉपर्टी देखें. यह password या federated होगी.

अगर .type की वैल्यू federated है, तो .provider प्रॉपर्टी एक स्ट्रिंग होती है, जो आइडेंटिटी प्रोवाइडर को दिखाती है.

उपयोगकर्ता की पुष्टि करना

क्रेडेंशियल मिलने के बाद, क्रेडेंशियल के टाइप के हिसाब से, पुष्टि करने की प्रोसेस चलाएं, password या federated:

    }).then(c => {
     if (c) {
       switch (c.type) {
         case 'password':
           return sendRequest(c);
           break;
         case 'federated':
           return gSignIn(c);
           break;
       }
     } else {
       return Promise.resolve();
     }

प्रॉमिस रिज़ॉल्व होने पर, देखें कि आपको क्रेडेंशियल ऑब्जेक्ट मिला है या नहीं. अगर ऐसा नहीं है, तो इसका मतलब है कि अपने-आप साइन इन होने की सुविधा काम नहीं कर रही है. अपने-आप साइन इन होने की प्रोसेस को बिना किसी सूचना के खारिज करें.

यूज़र इंटरफ़ेस (यूआई) अपडेट करना

अगर पुष्टि हो जाती है, तो यूज़र इंटरफ़ेस (यूआई) को अपडेट करें या उपयोगकर्ता को उसकी पसंद के मुताबिक बनाए गए पेज पर भेजें:

    }).then(profile => {
     if (profile) {
       updateUI(profile);
     }

पुष्टि करने से जुड़ी गड़बड़ी का मैसेज दिखाना न भूलें

उपयोगकर्ताओं को भ्रम से बचाने के लिए, क्रेडेंशियल ऑब्जेक्ट मिलने के समय उन्हें नीले रंग का टोस्ट दिखना चाहिए. इसमें “साइन इन किया जा रहा है” लिखा होना चाहिए:

एक अहम सलाह: अगर आपको क्रेडेंशियल ऑब्जेक्ट मिल जाता है, लेकिन उपयोगकर्ता की पुष्टि नहीं हो पाती है, तो आपको गड़बड़ी का मैसेज दिखाना चाहिए:

        }).catch(error => {
          showError('Sign-in Failed');
        });
      }
    }

कोड का पूरा उदाहरण

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'silent',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        }
      })
      .catch((error) => {
        showError('Sign-in Failed');
      });
  }
}

खाता चुनने की सुविधा से साइन-इन करना

अगर किसी उपयोगकर्ता को मीडिएशन की ज़रूरत है या उसके पास एक से ज़्यादा खाते हैं, तो उसे साइन-इन करने के लिए खाता चुनने की सुविधा का इस्तेमाल करें. इससे उपयोगकर्ता को साइन-इन करने का सामान्य फ़ॉर्म नहीं भरना पड़ेगा. उदाहरण के लिए:

खाता चुनने की सुविधा का इस्तेमाल करके साइन इन करने का तरीका, अपने-आप साइन इन होने की सुविधा का इस्तेमाल करके साइन इन करने के तरीके जैसा ही है. हालांकि, क्रेडेंशियल की जानकारी पाने के लिए, खाता चुनने की सुविधा को दिखाने के लिए एक और कॉल करना पड़ता है:

1. क्रेडेंशियल की जानकारी पाना और खाता चुनने की सुविधा दिखाना.
2. उपयोगकर्ता की पुष्टि करना.
3. यूज़र इंटरफ़ेस (यूआई) को अपडेट करें या आपकी दिलचस्पी के हिसाब से बनाए गए पेज पर जाएं.

क्रेडेंशियल की जानकारी पाना और खाता चुनने की सुविधा दिखाना

उपयोगकर्ता की किसी तय कार्रवाई के जवाब में, खाता चुनने की सुविधा दिखाएं. उदाहरण के लिए, जब उपयोगकर्ता "साइन इन करें" बटन पर टैप करता है. navigator.credentials.get() को कॉल करें और खाता चुनने की सुविधा दिखाने के लिए, mediation: 'optional' या mediation: 'required' जोड़ें.

mediation के required होने पर, उपयोगकर्ता को साइन इन करने के लिए हमेशा खाता चुनने की सुविधा दिखती है. इस विकल्प की मदद से, एक से ज़्यादा खाते इस्तेमाल करने वाले लोग आसानी से एक खाते से दूसरे खाते पर स्विच कर सकते हैं. mediation के optional होने पर, उपयोगकर्ता को navigator.credentials.preventSilentAccess() कॉल के बाद, साइन इन करने के लिए खाता चुनने की सुविधा साफ़ तौर पर दिखाई जाती है. आम तौर पर, ऐसा यह पक्का करने के लिए किया जाता है कि उपयोगकर्ता के साइन-आउट करने या रजिस्ट्रेशन रद्द करने के बाद, अपने-आप साइन इन होने की सुविधा काम न करे.

mediation: 'optional' दिखाने वाला उदाहरण:

    var signin = document.querySelector('#signin');
    signin.addEventListener('click', e => {
     if (window.PasswordCredential || window.FederatedCredential) {
       navigator.credentials.get({
         password: true,
         federated: {
           providers: [
             'https://accounts.google.com'
           ]
         },
         mediation: 'optional'
       }).then(c => {

जब उपयोगकर्ता कोई खाता चुनता है, तो प्रॉमिस क्रेडेंशियल के साथ रिज़ॉल्व हो जाता है. अगर उपयोगकर्ता, खाता चुनने की सुविधा को रद्द कर देता है या कोई क्रेडेंशियल सेव नहीं किया गया है, तो प्रॉमिस null के साथ रिज़ॉल्व हो जाता है. ऐसे में, साइन इन करने के लिए फ़ॉर्म वाले तरीके का इस्तेमाल करें.

साइन-इन फ़ॉर्म पर वापस जाना न भूलें

इनमें से किसी भी वजह से, आपको साइन-इन फ़ॉर्म पर वापस जाना चाहिए:

• कोई क्रेडेंशियल सेव नहीं किया जाता.
• उपयोगकर्ता ने कोई खाता चुने बिना, खाता चुनने की सुविधा को खारिज कर दिया.
• एपीआई उपलब्ध नहीं है.

    }).then(profile => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
    }).catch(error => {
        location.href = '/signin';
    });

कोड का पूरा उदाहरण

var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
  if (window.PasswordCredential || window.FederatedCredential) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'optional',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
      })
      .catch((error) => {
        location.href = '/signin';
      });
  }
});

फ़ेडरेटेड लॉगिन

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

फ़ेडरेटेड लॉगिन की सुविधा लागू करने के लिए:

1. तीसरे पक्ष की पहचान की मदद से, उपयोगकर्ता की पुष्टि करना.
2. पहचान की जानकारी सेव करना.
3. यूज़र इंटरफ़ेस (यूआई) को अपडेट करना या उपयोगकर्ता की दिलचस्पी के हिसाब से बनाए गए पेज पर जाना (अपने-आप साइन-इन होने की सुविधा की तरह).

तीसरे पक्ष की पहचान का इस्तेमाल करके, उपयोगकर्ता की पुष्टि करना

जब कोई उपयोगकर्ता फ़ेडरेटेड लॉगिन बटन पर टैप करता है, तो FederatedCredential के साथ, आइडेंटिटी प्रोवाइडर की पुष्टि करने वाला फ़्लो चलाएं.

Browser Support

• 51
• 79
• x
• x

Source

उदाहरण के लिए, अगर सेवा देने वाली कंपनी Google है, तो Google साइन-इन JavaScript लाइब्रेरी का इस्तेमाल करें:

navigator.credentials
  .get({
    password: true,
    mediation: 'optional',
    federated: {
      providers: ['https://account.google.com'],
    },
  })
  .then(function (cred) {
    if (cred) {
      // Instantiate an auth object
      var auth2 = gapi.auth2.getAuthInstance();

      // Is this user already signed in?
      if (auth2.isSignedIn.get()) {
        var googleUser = auth2.currentUser.get();

        // Same user as in the credential object?
        if (googleUser.getBasicProfile().getEmail() === cred.id) {
          // Continue with the signed-in user.
          return Promise.resolve(googleUser);
        }
      }

      // Otherwise, run a new authentication flow.
      return auth2.signIn({
        login_hint: id || '',
      });
    }
  });

Google साइन-इन की सुविधा, पुष्टि के सबूत के तौर पर एक आईडी टोकन देती है.

आम तौर पर, फ़ेडरेटेड लॉगिन, OpenID Connect या OAuth जैसे स्टैंडर्ड प्रोटोकॉल पर बनाए जाते हैं. फ़ेडरेटेड खातों से पुष्टि करने का तरीका जानने के लिए, फ़ेडरेटेड आइडेंटिटी प्रोवाइडर के दस्तावेज़ देखें. आम तौर पर, इस्तेमाल होने वाले कुछ प्लैटफ़ॉर्म हैं:

• Google साइन-इन
• Facebook Login
• Twitter पर साइन-इन करना
• GitHub OAuth

स्टोर की पहचान की जानकारी

पहचान की पुष्टि होने के बाद, पहचान की जानकारी को सेव किया जा सकता है. यहां सेव की जाने वाली जानकारी, आइडेंटिटी प्रोवाइडर से मिला id और आइडेंटिटी प्रोवाइडर को दिखाने वाली प्रोवाइडर स्ट्रिंग होती है. name और iconURL ज़रूरी नहीं हैं. इस जानकारी के बारे में ज़्यादा जानने के लिए, क्रेडेंशियल मैनेजमेंट की खास जानकारी देखें.

फ़ेडरेटेड खाते की जानकारी सेव करने के लिए, उपयोगकर्ता के आइडेंटिफ़ायर और सेवा देने वाली कंपनी के आइडेंटिफ़ायर के साथ, एक नया FederatedCredential ऑब्जेक्ट इंस्टैंशिएट करें. इसके बाद, पहचान की जानकारी सेव करने के लिए, navigator.credentials.store() को कॉल करें.

फ़ेडरेशन की प्रोसेस पूरी होने के बाद, FederatedCredential को सिंक्रोनस या एसिंक्रोनस तरीके से इंस्टैंशिएट करें:

सिंक्रोनस तरीके का उदाहरण:

// Create credential object synchronously.
var cred = new FederatedCredential({
  id: id, // id in IdP
  provider: 'https://account.google.com', // A string representing IdP
  name: name, // name in IdP
  iconURL: iconUrl, // Profile image url
});

एसिंक्रोनस तरीके का उदाहरण:

// Create credential object asynchronously.
var cred = await navigator.credentials.create({
  federated: {
    id: id,
    provider: 'https://accounts.google.com',
    name: name,
    iconURL: iconUrl,
  },
});

इसके बाद, क्रेडेंशियल ऑब्जेक्ट को सेव करें:

// Store it
navigator.credentials.store(cred).then(function () {
  // continuation
});

साइन आउट करें

साइन-आउट बटन पर टैप करने पर, अपने उपयोगकर्ताओं को साइन आउट करें. पहले सेशन को खत्म करें. इसके बाद, आने वाले समय में होने वाली विज़िट के लिए, अपने-आप साइन इन होने की सुविधा बंद करें. (सेशन खत्म करने का तरीका पूरी तरह से आप पर निर्भर करता है.)

आगे कभी भी इस वेबसाइट पर जाने पर, अपने-आप साइन इन होने की सुविधा बंद करना

navigator.credentials.preventSilentAccess() को कॉल करें:

signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  navigator.credentials.preventSilentAccess();
}

इससे यह पक्का होगा कि उपयोगकर्ता के अपने-आप साइन-इन होने की सुविधा को फिर से चालू करने तक, अपने-आप साइन-इन नहीं होगा. अपने-आप साइन इन होने की सुविधा को फिर से चालू करने के लिए, उपयोगकर्ता को खाता चुनने की सुविधा से वह खाता चुनना होगा जिससे उसे साइन इन करना है. इसके बाद, उपयोगकर्ता को तब तक साइन इन रखा जाता है, जब तक वह खुद साइन आउट न कर दे.

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