यहां दिए गए कुछ अपडेट के बारे में, Google I/O सेशन में बताया गया है. सुरक्षित और आसान साइन-इन: उपयोगकर्ताओं की दिलचस्पी बनाए रखना:
Chrome 57
Chrome 57 में यह अहम बदलाव क्रेडेंशियल मैनेजमेंट एपीआई में किया गया था.
क्रेडेंशियल किसी दूसरे सबडोमेन से शेयर किए जा सकते हैं
Chrome अब क्रेडेंशियल मैनेजमेंट एपीआई का इस्तेमाल करके, किसी दूसरे सबडोमेन में स्टोर किए गए क्रेडेंशियल को वापस ला सकता है.
उदाहरण के लिए, अगर कोई पासवर्ड login.example.com
में सेव किया गया है, तो www.example.com
पर कोई स्क्रिप्ट उसे खाता चुनने के डायलॉग में, खाता आइटम के तौर पर दिखा सकती है.
आपको navigator.credentials.store()
का इस्तेमाल करके, पासवर्ड को साफ़ तौर पर सेव करना होगा, ताकि जब कोई उपयोगकर्ता डायलॉग पर टैप करके क्रेडेंशियल चुने, तब पासवर्ड पास हो जाए और मौजूदा डिवाइस पर कॉपी हो जाए.
पासवर्ड सेव होने के बाद, वह क्रेडेंशियल के तौर पर उसी
ऑरिजिन www.example.com
के बाद उपलब्ध होता है.
इस स्क्रीनशॉट में, login.aliexpress.com
के तहत सेव की गई क्रेडेंशियल की जानकारी m.aliexpress.com
को दिख रही है. साथ ही, उपयोगकर्ता इनमें से चुन सकता है:
Chrome 60
Chrome 60 में क्रेडेंशियल मैनेजमेंट एपीआई में कई अहम बदलाव किए गए हैं:
कस्टम
fetch()
फ़ंक्शन की ज़रूरत अब पासवर्ड को फ़ेच करने के लिए नहीं है. इसलिए, इसे जल्द ही बंद कर दिया जाएगा.navigator.credentials.get()
अब बूलियन फ़्लैगunmediated
के बजाय,mediation
enum को स्वीकार करता है.requireUserMediation()
का नाम बदलकरpreventSilentAccess()
किया गया.नया तरीका
navigator.credentials.create()
एसिंक्रोनस तरीके से क्रेडेंशियल ऑब्जेक्ट बनाता है.
सुविधा का पता लगाने की सुविधा पर ध्यान देने की ज़रूरत है
यह देखने के लिए कि पासवर्ड-आधारित और फ़ेडरेटेड क्रेडेंशियल ऐक्सेस करने के लिए क्रेडेंशियल मैनेजमेंट एपीआई
उपलब्ध है या नहीं, देखें कि window.PasswordCredential
या
window.FederatedCredential
उपलब्ध है या नहीं.
if (window.PasswordCredential || window.FederatedCredential) {
// The Credential Management API is available
}
PasswordCredential
ऑब्जेक्ट में अब पासवर्ड शामिल है
क्रेडेंशियल मैनेजमेंट एपीआई ने पासवर्ड मैनेज करने के लिए पुराने तरीके अपनाए हैं.
इस नीति ने JavaScript में पासवर्ड छिपा दिए थे. इसलिए, डेवलपर को
fetch()
एपीआई के एक्सटेंशन के ज़रिए पुष्टि करने के लिए, PasswordCredential
ऑब्जेक्ट को सीधे अपने सर्वर पर भेजना ज़रूरी था.
हालांकि, इस तरीके को लेकर कई पाबंदियां लगीं. हमें सुझाव मिला है कि डेवलपर इस एपीआई का इस्तेमाल नहीं कर सकते, क्योंकि:
उसे पासवर्ड को JSON ऑब्जेक्ट के तौर पर भेजना पड़ता था.
उन्हें पासवर्ड की हैश वैल्यू अपने सर्वर पर भेजनी थी.
सुरक्षा विश्लेषण करने और इस बात की पहचान करने के बाद कि JavaScript से पासवर्ड छिपाने से सभी अटैक वेक्टर उतने असरदार नहीं बने जितना हमें उम्मीद थी, हमने बदलाव करने का फ़ैसला किया है.
क्रेडेंशियल मैनेजमेंट एपीआई में अब लौटाए गए क्रेडेंशियल ऑब्जेक्ट में एक सामान्य पासवर्ड शामिल किया जाता है, ताकि आप सादे टेक्स्ट के रूप में ऐक्सेस कर सकें. अपने सर्वर पर क्रेडेंशियल की जानकारी भेजने के लिए, मौजूदा तरीकों का इस्तेमाल किया जा सकता है:
navigator.credentials.get({
password: true,
federated: {
providers: [ 'https://accounts.google.com' ]
},
mediation: 'silent'
}).then(passwordCred => {
if (passwordCred) {
let form = new FormData();
form.append('email', passwordCred.id);
form.append('password', passwordCred.password);
form.append('csrf_token', csrf_token);
return fetch('/signin', {
method: 'POST',
credentials: 'include',
body: form
});
} else {
// Fallback to sign-in form
}
}).then(res => {
if (res.status === 200) {
return res.json();
} else {
throw 'Auth failed';
}
}).then(profile => {
console.log('Auth succeeded', profile);
});
कस्टम फ़ेच जल्द ही बंद कर दिया जाएगा
यह पता लगाने के लिए कि कस्टम fetch()
फ़ंक्शन का इस्तेमाल किया जा रहा है या नहीं,
देखें कि वह credentials
प्रॉपर्टी की वैल्यू के तौर पर PasswordCredential
ऑब्जेक्ट या FederatedCredential
ऑब्जेक्ट का इस्तेमाल करता है या नहीं. उदाहरण के लिए:
fetch('/signin', {
method: 'POST',
credentials: c
})
जैसा कि पिछले कोड उदाहरण में दिखाया गया है, सामान्य fetch()
फ़ंक्शन या XMLHttpRequest
का इस्तेमाल करने का सुझाव दिया जाता है.
navigator.credentials.get()
अब एनम मीडिएशन को स्वीकार करता है
Chrome 60 तक,
navigator.credentials.get()
ने बूलियन फ़्लैग वाली वैकल्पिक unmediated
प्रॉपर्टी को स्वीकार कर लिया था. उदाहरण के लिए:
navigator.credentials.get({
password: true,
federated: {
providers: [ 'https://accounts.google.com' ]
},
unmediated: true
}).then(c => {
// Sign-in
});
unmediated: true
को सेट करने पर, क्रेडेंशियल पास किए जाने पर ब्राउज़र, खाता चुनने का विकल्प नहीं दिखाता.
फ़्लैग को अब मीडिएशन के तौर पर इस्तेमाल कर लिया गया है. यूज़र मीडिएशन तब हो सकता है, जब:
साइन इन करने के लिए, उपयोगकर्ता को एक खाता चुनना होगा.
navigator.credentials.requireUseMediation()
कॉल के बाद, उपयोगकर्ता साफ़ तौर पर साइन इन करना चाहता है.
mediation
वैल्यू के लिए, इनमें से कोई एक विकल्प चुनें:
mediation की कीमत का |
बूलियन फ़्लैग की तुलना में | व्यवहार | |
---|---|---|---|
silent |
unmediated: true के बराबर |
क्रेडेंशियल को खाता चुनने का विकल्प दिखाए बिना पास किया गया. | |
optional |
unmediated: false के बराबर |
अगर preventSilentAccess() ने पहले कॉल किया था, तो खाता चुनने का विकल्प दिखाता है. |
|
required |
एक नया विकल्प | खाता चुनने की सुविधा हमेशा दिखाएं. यह तब काम आता है, जब आप उपयोगकर्ता को नेटिव खाता चुनने के डायलॉग बॉक्स का इस्तेमाल करके, खाता बदलने की अनुमति देना चाहते हों. |
इस उदाहरण में,
क्रेडेंशियल को खाता चुनने की सुविधा दिखाए बिना ही पास कर दिया गया है. यह पिछले फ़्लैग unmediated: true
की तरह ही है:
navigator.credentials.get({
password: true,
federated: {
providers: [ 'https://accounts.google.com' ]
},
mediation: 'silent'
}).then(c => {
// Sign-in
});
requireUserMediation()
का नाम बदलकर preventSilentAccess()
किया गया
get()
कॉल में दी गई नई mediation
प्रॉपर्टी के साथ अच्छी तरह से अलाइन करने के लिए,
navigator.credentials.requireUserMediation()
तरीके का नाम बदलकर
navigator.credentials.preventSilentAccess()
कर दिया गया है.
बदले गए नाम वाले तरीके की मदद से, खाता चुनने की सुविधा दिखाए बिना क्रेडेंशियल पास नहीं किया जा सकता. कभी-कभी इसे उपयोगकर्ता की मीडिएशन सुविधा के बिना भी कहा जाता है. यह तब काम आता है, जब कोई उपयोगकर्ता किसी वेबसाइट से साइन आउट करता है या किसी वेबसाइट से रजिस्ट्रेशन रद्द करता है और अगली विज़िट पर अपने-आप साइन इन नहीं होना चाहता.
signoutUser();
if (navigator.credentials) {
navigator.credentials.preventSilentAccess();
}
navigator.credentials.create()
नए तरीके की मदद से, एसिंक्रोनस तरीके से क्रेडेंशियल ऑब्जेक्ट बनाएं
अब आपके पास नए तरीके navigator.credentials.create()
से, एसिंक्रोनस रूप से क्रेडेंशियल ऑब्जेक्ट बनाने का विकल्प है.
सिंक और एक साथ काम करने वाली प्रोसेस, दोनों के बीच तुलना करने के लिए आगे पढ़ें.
PasswordCredential
ऑब्जेक्ट बनाया जा रहा है
सिंक करने का तरीका
let c = new PasswordCredential(form);
एक साथ काम नहीं करने वाली प्रोसेस का तरीका (नया)
let c = await navigator.credentials.create({
password: form
});
या:
let c = await navigator.credentials.create({
password: {
id: id,
password: password
}
});
FederatedCredential
ऑब्जेक्ट बनाया जा रहा है
सिंक करने का तरीका
let c = new FederatedCredential({
id: 'agektmr',
name: 'Eiji Kitamura',
provider: 'https://accounts.google.com',
iconURL: 'https://*****'
});
एक साथ काम नहीं करने वाली प्रोसेस का तरीका (नया)
let c = await navigator.credentials.create({
federated: {
id: 'agektmr',
name: 'Eiji Kitamura',
provider: 'https://accounts.google.com',
iconURL: 'https://*****'
}
});
डेटा को दूसरी जगह भेजने से जुड़ी गाइड
क्या क्रेडेंशियल मैनेजमेंट एपीआई को मौजूदा तरीके से लागू किया गया है? हमारे पास डेटा को दूसरी जगह भेजने से जुड़ी गाइड का एक दस्तावेज़ है. नए वर्शन पर अपग्रेड करने के लिए, निर्देशों का पालन करें.