बेहतरीन उपयोगकर्ता अनुभव देने के लिए, यह ज़रूरी है कि आपकी वेबसाइट पर उपयोगकर्ताओं की पुष्टि करने में उनकी मदद की जाए. पुष्टि किए गए उपयोगकर्ता एक खास प्रोफ़ाइल का इस्तेमाल करके एक-दूसरे से इंटरैक्ट कर सकते हैं, सभी डिवाइसों पर डेटा सिंक कर सकते हैं या ऑफ़लाइन होने पर डेटा प्रोसेस कर सकते हैं; यह सूची आगे बढ़ती रहती है. हालांकि, असली उपयोगकर्ताओं के लिए पासवर्ड बनाना, उन्हें याद रखना, और उन्हें टाइप करना काफ़ी मुश्किल होता है. खास तौर पर, मोबाइल स्क्रीन पर यह काम बहुत मुश्किल होता है. इस वजह से उन्हें अलग-अलग साइटों पर एक ही पासवर्ड का दोबारा इस्तेमाल करना पड़ता है. ज़ाहिर है कि यह सुरक्षा के लिए खतरा है.
Chrome (51) का सबसे नया वर्शन, क्रेडेंशियल मैनेजमेंट एपीआई के साथ काम करता है. यह W3C पर स्टैंडर्ड ट्रैक वाला एक प्रस्ताव है, जो डेवलपर को प्रोग्राम के हिसाब से ब्राउज़र के क्रेडेंशियल मैनेजर का ऐक्सेस देता है. साथ ही, इससे उपयोगकर्ताओं को ज़्यादा आसानी से साइन इन करने में मदद मिलती है.
क्रेडेंशियल मैनेजमेंट एपीआई क्या है?
क्रेडेंशियल मैनेजमेंट एपीआई डेवलपर को पासवर्ड क्रेडेंशियल और फ़ेडरेटेड क्रेडेंशियल सेव और वापस पाने की सुविधा देता है. इस एपीआई के तीन फ़ंक्शन हैं:
navigator.credentials.get()navigator.credentials.store()navigator.credentials.requireUserMediation()
इन आसान एपीआई का इस्तेमाल करके, डेवलपर कई कारगर काम कर सकते हैं. जैसे:
- उपयोगकर्ताओं को सिर्फ़ एक टैप से साइन इन करने की सुविधा दें.
- वह फ़ेडरेटेड खाता याद रखें जिसका इस्तेमाल उपयोगकर्ता ने साइन इन करने के लिए किया है.
- सेशन खत्म होने पर, उपयोगकर्ताओं को फिर से साइन इन करने की सुविधा मिलती है.
Chrome को लागू करने पर, क्रेडेंशियल को Chrome के पासवर्ड मैनेजर में सेव किया जाएगा. अगर उपयोगकर्ताओं ने Chrome में साइन इन किया हुआ है, तो वे सभी डिवाइसों पर उपयोगकर्ता के पासवर्ड सिंक कर सकते हैं. सिंक किए गए ऐसे पासवर्ड उन Android ऐप्लिकेशन के साथ भी शेयर किए जा सकते हैं जिनमें Android के लिए Smart Lock for Passwords API को इंटिग्रेट किया गया है, ताकि क्रॉस-प्लैटफ़ॉर्म की सुविधा को बेहतर तरीके से इस्तेमाल किया जा सके.
अपनी साइट के साथ क्रेडेंशियल मैनेजमेंट एपीआई इंटिग्रेट करना
आपकी वेबसाइट के साथ क्रेडेंशियल मैनेजमेंट एपीआई का इस्तेमाल करने का तरीका, उसके स्ट्रक्चर के आधार पर अलग-अलग हो सकता है. क्या यह सिंगल पेज ऐप्लिकेशन है? क्या यह पेज ट्रांज़िशन वाला लेगसी आर्किटेक्चर है? क्या साइन-इन फ़ॉर्म सिर्फ़ सबसे ऊपर मौजूद पेज पर है? क्या साइन-इन बटन हर जगह मौजूद हैं? क्या लोग साइन इन किए बिना, आपकी वेबसाइट को सही तरीके से ब्राउज़ कर सकते हैं? क्या फ़ेडरेशन, पॉप-अप विंडो में काम करता है? या इसके लिए कई पेजों पर इंटरैक्शन करना ज़रूरी है?
इन सभी मामलों को कवर कर पाना करीब-करीब नामुमकिन है, लेकिन आइए एक सामान्य पेज वाले ऐप्लिकेशन पर नज़र डालते हैं.
- सबसे ऊपर वाला पेज, रजिस्ट्रेशन फ़ॉर्म है.
- "साइन इन करें" बटन पर टैप करने से, उपयोगकर्ता साइन-इन फ़ॉर्म पर पहुंच जाएंगे.
- रजिस्ट्रेशन और साइन-इन, दोनों फ़ॉर्म में आईडी/पासवर्ड और फ़ेडरेशन के सामान्य विकल्प होते हैं. उदाहरण के लिए, 'Google साइन-इन' और Facebook साइन-इन.
क्रेडेंशियल मैनेजमेंट एपीआई का इस्तेमाल करके, साइट पर ये सुविधाएं जोड़ी जा सकेंगी. उदाहरण के लिए:
- साइन इन करते समय खाता चुनने की सेटिंग दिखाएं: जब कोई उपयोगकर्ता "साइन इन करें" पर टैप करता है, तब खाता चुनने का यूज़र इंटरफ़ेस (यूआई) दिखता है.
- स्टोर क्रेडेंशियल: साइन इन सफल होने पर, क्रेडेंशियल की जानकारी को बाद में इस्तेमाल करने के लिए, ब्राउज़र के पासवर्ड मैनेजर में सेव करने का ऑफ़र दें.
- उपयोगकर्ता को अपने-आप फिर से साइन इन करने दें: सेशन खत्म होने पर, उपयोगकर्ता को फिर से साइन इन करने दें.
- मीडिएशन के तौर पर अपने-आप साइन-इन होने की सुविधा: जब कोई उपयोगकर्ता साइन आउट करता है, तो अगली बार उस उपयोगकर्ता के लिए, अपने-आप साइन इन होने की सुविधा को बंद कर दें.
डेमो साइट में, इसके सैंपल कोड की मदद से, इन सुविधाओं का इस्तेमाल किया जा सकता है.
साइन इन करते समय खाता चुनने की सुविधा दिखाएं
उपयोगकर्ता के "साइन इन करें" बटन पर टैप करने और साइन-इन फ़ॉर्म पर नेविगेट करने के बीच आप क्रेडेंशियल की जानकारी पाने के लिए, navigator.credentials.get() का इस्तेमाल कर सकते हैं. Chrome एक खाता चुनने का यूज़र इंटरफ़ेस (यूआई) दिखाएगा, जिससे उपयोगकर्ता खाता चुन सकते हैं.
पासवर्ड क्रेडेंशियल ऑब्जेक्ट फ़ेच किया जा रहा है
खाते के विकल्पों के तौर पर पासवर्ड के क्रेडेंशियल दिखाने के लिए, password: true का इस्तेमाल करें.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
}).then(function(cred) {
// continuation
...
साइन इन करने के लिए, पासवर्ड क्रेडेंशियल का इस्तेमाल करना
जब उपयोगकर्ता कोई खाता चुन लेता है, तो समाधान करने वाले फ़ंक्शन को एक पासवर्ड क्रेडेंशियल मिलता है. आप fetch() का इस्तेमाल करके इसे सर्वर पर भेज सकते हैं:
// continued from previous example
}).then(function(cred) {
if (cred) {
if (cred.type == 'password') {
// Construct FormData object
var form = new FormData();
// Append CSRF Token
var csrf_token = document.querySelector('csrf_token').value;
form.append('csrf_token', csrf_token);
// You can append additional credential data to `.additionalData`
cred.additionalData = form;
// `POST` the credential object as `credentials`.
// id, password and the additional data will be encoded and
// sent to the url as the HTTP body.
fetch(url, { // Make sure the URL is HTTPS
method: 'POST', // Use POST
credentials: cred // Add the password credential object
}).then(function() {
// continuation
});
} else if (cred.type == 'federated') {
// continuation
साइन इन करने के लिए फ़ेडरेटेड क्रेडेंशियल का इस्तेमाल करना
किसी उपयोगकर्ता को फ़ेडरेटेड खाते दिखाने के लिए, get() के विकल्पों में federated जोड़ें. यह आइडेंटिटी प्रोवाइडर की कैटगरी लेता है.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
federated: {
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
}
}).then(function(cred) {
// continuation
...
क्रेडेंशियल ऑब्जेक्ट की type प्रॉपर्टी की जांच करके, यह पता लगाया जा सकता है कि वह PasswordCredential
(type == 'password') या FederatedCredential (type == 'federated') है या नहीं.
अगर क्रेडेंशियल
FederatedCredential है,
तो आपके पास उसमें मौजूद जानकारी का इस्तेमाल करके सही एपीआई को कॉल करने का विकल्प है.
});
} else if (cred.type == 'federated') {
// `provider` contains the identity provider string
switch (cred.provider) {
case 'https://accounts.google.com':
// Federated login using Google Sign-In
var auth2 = gapi.auth2.getAuthInstance();
// In Google Sign-In library, you can specify an account.
// Attempt to sign in with by using `login_hint`.
return auth2.signIn({
login_hint: cred.id || ''
}).then(function(profile) {
// continuation
});
break;
case 'https://www.facebook.com':
// Federated login using Facebook Login
// continuation
break;
default:
// show form
break;
}
}
// if the credential is `undefined`
} else {
// show form
स्टोर क्रेडेंशियल
जब कोई उपयोगकर्ता किसी फ़ॉर्म का इस्तेमाल करके आपकी वेबसाइट में साइन इन करता है, तो क्रेडेंशियल सेव करने के लिए,
navigator.credentials.store() का इस्तेमाल किया जा सकता है. उपयोगकर्ता को यह संकेत दिया जाएगा कि वह इसे संग्रहित करें या नहीं. आपको क्रेडेंशियल किस तरह के हैं, इसके आधार पर new
PasswordCredential() या new
FederatedCredential() का इस्तेमाल करके, ऐसा क्रेडेंशियल ऑब्जेक्ट बनाएं जिसे आपको सेव करना है.
फ़ॉर्म एलिमेंट से पासवर्ड क्रेडेंशियल बनाना और सेव करना
नीचे दिया गया कोड, autocomplete एट्रिब्यूट का इस्तेमाल करता है, ताकि फ़ॉर्म के एलिमेंट को PasswordCredential
ऑब्जेक्ट पैरामीटर को अपने-आप मैप
करने के लिए इस्तेमाल किया जा सकता है.
एचटीएमएल
html
<form id="form" method="post">
<input type="text" name="id" autocomplete="username" />
<input type="password" name="password" autocomplete="current-password" />
<input type="hidden" name="csrf_token" value="******" />
</form>
JavaScript
var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
फ़ेडरेटेड क्रेडेंशियल बनाना और सेव करना
// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
id: id, // The id for the user
name: name, // Optional user name
provider: 'https://accounts.google.com', // A string that represents the identity provider
iconURL: iconUrl // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
उपयोगकर्ता को फिर से अपने-आप साइन इन करने की सुविधा दें
जब कोई उपयोगकर्ता आपकी वेबसाइट से चला जाता है और बाद में वापस आता है, तो हो सकता है कि सेशन खत्म हो गया हो. उपयोगकर्ता के वापस आने पर हर बार उसका पासवर्ड लिखने के लिए उसे परेशान न करें. उपयोगकर्ता को फिर से अपने-आप साइन इन करने की अनुमति दें.
क्रेडेंशियल ऑब्जेक्ट फ़ेच किया जा रहा है
navigator.credentials.get({
password: true, // Obtain password credentials or not
federated: { // Obtain federation credentials or not
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
},
unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
if (cred) {
// auto sign-in possible
...
} else {
// auto sign-in not possible
...
}
});
कोड वही दिखना चाहिए जो आपने "साइन इन करते समय खाता चुनने वाला टूल दिखाएं" सेक्शन में देखा है. इसमें सिर्फ़ इतना अंतर है कि आपको
unmediated: true को सेट करना होगा.
इससे फ़ंक्शन तुरंत ठीक हो जाता है और आपको उपयोगकर्ता को अपने-आप साइन इन करने के लिए क्रेडेंशियल मिल जाता है. यहां कुछ शर्तें दी गई हैं:
- उपयोगकर्ता ने अपने-आप साइन-इन होने की सुविधा का ज़ोरदार स्वागत किया है.
- उपयोगकर्ता ने पहले क्रेडेंशियल मैनेजमेंट एपीआई का इस्तेमाल करके, वेबसाइट में साइन इन किया हो.
- उपयोगकर्ता के पास आपके ऑरिजिन के लिए सिर्फ़ एक क्रेडेंशियल सेव है.
- पिछले सेशन में, उपयोगकर्ता ने साफ़ तौर पर साइन आउट नहीं किया था.
अगर इनमें से कोई भी शर्त पूरी नहीं होती है, तो फ़ंक्शन को अस्वीकार कर दिया जाएगा.
मीडिएशन अपने-आप साइन इन होने की सुविधा
जब कोई उपयोगकर्ता आपकी वेबसाइट से साइन आउट करता है, तो यह पक्का करना आपकी ज़िम्मेदारी है कि
उपयोगकर्ता अपने-आप फिर से साइन इन न हो. यह पक्का करने के लिए, क्रेडेंशियल मैनेजमेंट एपीआई मीडिएशन नाम का एक तरीका उपलब्ध कराता है.
navigator.credentials.requireUserMediation() को कॉल करके मीडिएशन मोड चालू किया जा सकता है.
जब तक ऑरिजिन के लिए उपयोगकर्ता की मीडिएशन स्थिति चालू रहेगी, तब तक
navigator.credentials.get() के साथ unmediated: true का इस्तेमाल करने पर, यह फ़ंक्शन undefined के साथ ठीक हो जाएगा.
अपने-आप साइन इन होने की सुविधा के लिए मीडिएशन की सुविधा
navigator.credentials.requireUserMediation();
अक्सर पूछे जाने वाले सवाल
क्या वेबसाइट पर JavaScript के लिए, रॉ पासवर्ड वापस पाना मुमकिन है?
नहीं. पासवर्ड सिर्फ़ PasswordCredential के हिस्से के तौर पर पाए जा सकते हैं और किसी भी तरीके से इन्हें दिखाया नहीं जा सकता.
क्या क्रेडेंशियल मैनेजमेंट एपीआई का इस्तेमाल करके, किसी आईडी के लिए तीन अंकों का सेट स्टोर किया जा सकता है? वर्तमान में नहीं. इस सुविधा के बारे में आपके सुझाव की सराहना होगी.
क्या किसी iframe में Authentic Management API का इस्तेमाल किया जा सकता है?
इस एपीआई का इस्तेमाल सिर्फ़ टॉप लेवल के कॉन्टेक्स्ट के लिए किया जा सकता है. किसी iframe में .get() या .store()
पर किए जाने वाले कॉल बिना किसी असर के तुरंत ठीक हो जाएंगे.
क्या पासवर्ड मैनेजमेंट वाले Chrome एक्सटेंशन को क्रेडेंशियल मैनेजमेंट एपीआई के साथ इंटिग्रेट किया जा सकता है?
आपके पास navigator.credentials को बदलने और उसे अपने Chrome एक्सटेंशन में, get() या store() के क्रेडेंशियल में जोड़ने का विकल्प होता है.
रिसॉर्स
क्रेडेंशियल मैनेजमेंट एपीआई के बारे में ज़्यादा जानने के लिए, चेकआउट के समय इंटिग्रेशन गाइड देखें.