उपयोगकर्ताओं के साइन इन करने के लिए, ब्राउज़र के पासवर्ड मैनेजर से क्रेडेंशियल पाएं और उनका इस्तेमाल, उपयोगकर्ताओं को अपने-आप लॉग इन करने के लिए करें. कई खातों वाले उपयोगकर्ताओं को, खाता चुनने की सुविधा का इस्तेमाल करके, सिर्फ़ एक टैप करके खाता चुनने की अनुमति दें.
अपने-आप साइन इन होने की सुविधा
अपने-आप साइन-इन होने की सुविधा आपकी वेबसाइट पर कहीं भी हो सकती है. यह सिर्फ़ टॉप पेज पर ही नहीं, बल्कि लीफ़ पेज के अन्य पेजों पर भी हो सकती है. यह तब काम आता है, जब उपयोगकर्ता किसी सर्च इंजन के ज़रिए आपकी वेबसाइट के अलग-अलग पेजों पर पहुंचते हैं.
अपने-आप साइन-इन होने की सुविधा चालू करने के लिए:
- क्रेडेंशियल की जानकारी पाएं.
- उपयोगकर्ता की पुष्टि करें.
- यूज़र इंटरफ़ेस (यूआई) अपडेट करें या आपके हिसाब से बनाए गए पेज पर जाएं.
क्रेडेंशियल की जानकारी पाना
क्रेडेंशियल की जानकारी पाने के लिए, 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');
});
}
}
खाता चुनने वाले टूल की मदद से साइन इन करें
अगर किसी उपयोगकर्ता को मीडिएशन की ज़रूरत है या उसके पास एक से ज़्यादा खाते हैं, तो 'खाता चुनने की सुविधा' का इस्तेमाल करके, उपयोगकर्ता को साइन-इन करने की अनुमति देने के लिए, सामान्य साइन-इन फ़ॉर्म को छोड़ें. उदाहरण के लिए:
खाता चुनने के विकल्प की मदद से साइन इन करने का तरीका, अपने-आप साइन इन होने की सुविधा जैसा ही है. साथ ही, क्रेडेंशियल की जानकारी पाने के लिए, खाता चुनने के विकल्प को दिखाने के लिए एक और कॉल दिखता है:
- क्रेडेंशियल की जानकारी पाएं और खाता चुनने का विकल्प दिखाएं.
- उपयोगकर्ता की पुष्टि करें.
- यूज़र इंटरफ़ेस (यूआई) अपडेट करें या अपने हिसाब से बनाए गए पेज पर जाएं.
क्रेडेंशियल की जानकारी पाएं और खाता चुनने का विकल्प दिखाएं
किसी तय की गई उपयोगकर्ता कार्रवाई के जवाब में, खाता चुनने का विकल्प दिखाएं,
जैसे, जब उपयोगकर्ता "साइन-इन" बटन पर टैप करे. खाता चुनने का टूल दिखाने के लिए, 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';
});
}
});
फ़ेडरेटेड लॉगिन
फ़ेडरेटेड लॉगिन की मदद से उपयोगकर्ता, सिर्फ़ एक टैप से साइन इन कर सकते हैं. इसके लिए, उन्हें आपकी वेबसाइट के लॉगिन की अन्य जानकारी याद रखने की ज़रूरत नहीं होती.
फ़ेडरेटेड लॉगिन लागू करने के लिए:
- तीसरे पक्ष की पहचान के ज़रिए उपयोगकर्ता की पुष्टि करें.
- पहचान से जुड़ी जानकारी सेव करना.
- यूज़र इंटरफ़ेस (यूआई) अपडेट करें या 'मनमुताबिक पेज' पर जाएं (जैसा अपने-आप साइन-इन होने पर होता है).
तीसरे पक्ष की पहचान के ज़रिए उपयोगकर्ता की पुष्टि करें
जब कोई उपयोगकर्ता फ़ेडरेटेड लॉगिन बटन पर टैप करता है, तब FederatedCredential की मदद से, पहचान देने वाली सेवा की पुष्टि करने की खास प्रोसेस चलाएं.
उदाहरण के लिए, अगर सेवा देने वाली कंपनी 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 जैसे स्टैंडर्ड प्रोटोकॉल पर आधारित होते हैं. फ़ेडरेटेड खातों से पुष्टि करने का तरीका जानने के लिए, फ़ेडरेटेड आइडेंटिटी प्रोवाइडर के दस्तावेज़ देखें. ये लोकप्रिय उदाहरण हैं:
स्टोर की पहचान से जुड़ी जानकारी
पुष्टि हो जाने के बाद, पहचान से जुड़ी जानकारी सेव की जा सकती है.
यहां सेव की जाने वाली जानकारी, आइडेंटिटी प्रोवाइडर की 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();
}
इससे यह पक्का होगा कि जब तक उपयोगकर्ता अगली बार अपने-आप साइन-इन होने की सुविधा को चालू नहीं करता, तब तक अपने-आप साइन-इन होने की सुविधा को चालू नहीं किया जाएगा. अपने-आप साइन-इन होने की सुविधा को फिर से शुरू करने के लिए, उपयोगकर्ता खाता चुनने के विकल्प से अपनी पसंद के खाते को चुनकर, जान-बूझकर साइन इन कर सकते हैं. इसके बाद, उपयोगकर्ता हमेशा वापस साइन इन रहेगा, जब तक कि वह साफ़ तौर पर साइन आउट नहीं कर देता.