क्रेडेंशियल मैनेजमेंट एपीआई में किए गए नए अपडेट

Eiji Kitamura

यहां दिए गए कुछ अपडेट के बारे में, 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 में क्रेडेंशियल मैनेजमेंट एपीआई में कई अहम बदलाव किए गए हैं:

सुविधा का पता लगाने की सुविधा पर ध्यान देने की ज़रूरत है

यह देखने के लिए कि पासवर्ड-आधारित और फ़ेडरेटेड क्रेडेंशियल ऐक्सेस करने के लिए क्रेडेंशियल मैनेजमेंट एपीआई उपलब्ध है या नहीं, देखें कि 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 का इस्तेमाल करने का सुझाव दिया जाता है.

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://*****'
    }
});

डेटा को दूसरी जगह भेजने से जुड़ी गाइड

क्या क्रेडेंशियल मैनेजमेंट एपीआई को मौजूदा तरीके से लागू किया गया है? हमारे पास डेटा को दूसरी जगह भेजने से जुड़ी गाइड का एक दस्तावेज़ है. नए वर्शन पर अपग्रेड करने के लिए, निर्देशों का पालन करें.