उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, ज़रूरी है कि अपनी वेबसाइट की पुष्टि कर सकता है. पुष्टि किए गए उपयोगकर्ता, इनसे इंटरैक्ट कर सकते हैं एक-दूसरे के लिए खास प्रोफ़ाइल इस्तेमाल करें, डेटा को सभी डिवाइसों पर सिंक करें या डेटा प्रोसेस करें ऑफ़लाइन रहते हुए; सूची में कोई बदलाव नहीं होता. हालाँकि, शॉर्ट वीडियो बनाने, उसे याद रखने, और टाइप करने पासवर्ड, असली उपयोगकर्ताओं के लिए मुश्किल होते हैं, खास तौर पर मोबाइल स्क्रीन पर इस वजह से, वे अलग-अलग साइटों पर एक ही पासवर्ड का दोबारा इस्तेमाल करते हैं. हां, यह भी है सुरक्षा को खतरा है.
Chrome का सबसे नया वर्शन (51) क्रेडेंशियल मैनेजमेंट एपीआई के साथ काम करता है. यह है W3C में स्टैंडर्ड-ट्रैक प्रस्ताव, जो डेवलपर को प्रोग्राम के हिसाब से क्रेडेंशियल मैनेजर की मदद से बनाया गया है और उपयोगकर्ताओं को ज़्यादा आसानी से साइन इन करने में मदद करता है.
क्रेडेंशियल मैनेजमेंट एपीआई क्या है?
क्रेडेंशियल मैनेजमेंट एपीआई की मदद से डेवलपर, पासवर्ड सेव और वापस पा सकते हैं क्रेडेंशियल और फ़ेडरेटेड क्रेडेंशियल. इसके तीन फ़ंक्शन हैं:
navigator.credentials.get()navigator.credentials.store()navigator.credentials.requireUserMediation()
इन आसान एपीआई का इस्तेमाल करके, डेवलपर बेहतर काम कर सकते हैं, जैसे:
- उपयोगकर्ताओं को सिर्फ़ एक टैप करके साइन इन करने की सुविधा दें.
- वह फ़ेडरेटेड खाता याद रखें जिसका इस्तेमाल उपयोगकर्ता ने साइन इन करने के लिए किया है.
- सेशन खत्म होने पर, उपयोगकर्ताओं को फिर से साइन इन करने के लिए कहें.
Chrome के लागू करने के दौरान, क्रेडेंशियल Chrome के पासवर्ड में सेव किए जाएंगे मैनेजर. अगर उपयोगकर्ताओं ने Chrome में साइन इन किया हुआ है, तो वे उपयोगकर्ताओं के पासवर्ड सिंक कर सकते हैं ट्रैक किया जा सकता है. सिंक किए गए उन पासवर्ड को Android ऐप्लिकेशन के साथ भी शेयर किया जा सकता है जिसमें Android के लिए Passwords API के लिए Smart Lock की सुविधा जोड़ी गई है क्रॉस-प्लैटफ़ॉर्म की सुविधा का बेहतरीन अनुभव पाने के लिए.
क्रेडेंशियल मैनेजमेंट एपीआई को अपनी साइट से इंटिग्रेट करना
अपनी वेबसाइट के लिए, Credential Management 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
साइन इन करने के लिए फ़ेडरेटेड क्रेडेंशियल का इस्तेमाल करना
किसी उपयोगकर्ता को फ़ेडरेटेड खाते दिखाने के लिए, federated जोड़ें. यह एक तरह का कलेक्शन होता है
get() विकल्पों में जोड़ सकते हैं.
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 में क्रेडेंशियल मैनेजमेंट एपीआई का इस्तेमाल कर सकता/सकती हूं?
एपीआई, टॉप लेवल कॉन्टेक्स्ट तक सीमित है. .get() या .store() पर किए जाने वाले कॉल
में लागू होती है, तो बिना किसी असर के तुरंत ठीक हो जाएगी.
क्या अपने पासवर्ड मैनेजमेंट वाले Chrome एक्सटेंशन को क्रेडेंशियल के साथ इंटिग्रेट किया जा सकता है
मैनेजमेंट एपीआई?
navigator.credentials को बदला जा सकता है और उसे अपने Chrome एक्सटेंशन से जोड़कर,
get() या store() क्रेडेंशियल.
संसाधन
क्रेडेंशियल मैनेजमेंट एपीआई के बारे में ज़्यादा जानने के लिए, इंटिग्रेशन गाइड देखें.