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

Eiji Kitamura

यहां बताए गए कुछ अपडेट के बारे में, Google I/O के सुरक्षित और आसान साइन-इन: उपयोगकर्ताओं को जोड़े रखना सेशन में बताया गया है:

Chrome 57

Chrome 57 में, Credential Management API में यह अहम बदलाव किया गया था.

क्रेडेंशियल किसी दूसरे सबडोमेन से शेयर किए जा सकते हैं

Chrome अब क्रेडेंशियल मैनेजमेंट एपीआई का इस्तेमाल करके, किसी अलग सबडोमेन में सेव किए गए क्रेडेंशियल को फिर से पा सकता है. उदाहरण के लिए, अगर कोई पासवर्ड login.example.com में सेव किया गया है, तो www.example.com पर मौजूद स्क्रिप्ट, खाता चुनने वाले डायलॉग में उसे खाते के आइटम के तौर पर दिखा सकती है.

आपको navigator.credentials.store() का इस्तेमाल करके, पासवर्ड को साफ़ तौर पर सेव करना होगा, ताकि जब कोई उपयोगकर्ता डायलॉग पर टैप करके कोई क्रेडेंशियल चुनता है, तब पासवर्ड पास हो जाए और मौजूदा ऑरिजिन में कॉपी हो जाए.

पासवर्ड सेव हो जाने के बाद, www.example.com और उसके बाद उसी ऑरिजिन में क्रेडेंशियल के तौर पर उपलब्ध होता है.

नीचे दिए गए स्क्रीनशॉट में, login.aliexpress.com में सेव किए गए क्रेडेंशियल की जानकारी m.aliexpress.com को दिख रही है. साथ ही, उपयोगकर्ता के पास इनमें से किसी एक को चुनने का विकल्प है:

चुने गए सबडोमेन के लॉगिन की जानकारी दिखाने वाला खाता चुनने वाला टूल

Chrome 60

Chrome 60 में, Credential Management API में कई अहम बदलाव किए गए हैं:

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

यह देखने के लिए कि पासवर्ड पर आधारित और फ़ेडरेटेड क्रेडेंशियल ऐक्सेस करने के लिए, क्रेडेंशियल मैनेजमेंट एपीआई उपलब्ध है या नहीं, देखें कि window.PasswordCredential या window.FederatedCredential उपलब्ध है या नहीं.

if (window.PasswordCredential || window.FederatedCredential) {
  // The Credential Management API is available
}

PasswordCredential ऑब्जेक्ट में अब पासवर्ड शामिल है

Credential Manager API ने पासवर्ड मैनेज करने के लिए, सावधानी से काम किया. यह पासवर्ड को JavaScript से छिपा देता था. इसलिए, डेवलपर को fetch() एपीआई के एक्सटेंशन की मदद से, पुष्टि करने के लिए PasswordCredential ऑब्जेक्ट को सीधे अपने सर्वर पर भेजना पड़ता था.

हालांकि, इस तरीके से कई पाबंदियां भी आईं. हमें शिकायत मिली है कि डेवलपर इस एपीआई का इस्तेमाल नहीं कर सकते, क्योंकि:

  • उन्हें पासवर्ड को JSON ऑब्जेक्ट के हिस्से के तौर पर भेजना था.

  • उन्हें पासवर्ड की हैश वैल्यू अपने सर्वर पर भेजनी थी.

सुरक्षा का विश्लेषण करने के बाद, हमने पाया कि JavaScript से पासवर्ड छिपाने से, हम उम्मीद के मुताबिक सभी अटैक वेक्टर को रोक नहीं पाए. इसलिए, हमने एक बदलाव करने का फ़ैसला लिया है.

Credential Manager API में, अब क्रेडेंशियल ऑब्जेक्ट में रॉ पासवर्ड शामिल होता है, ताकि आपके पास उसे सादे टेक्स्ट के तौर पर ऐक्सेस करने का विकल्प हो. अपने सर्वर पर क्रेडेंशियल की जानकारी देने के लिए, मौजूदा तरीकों का इस्तेमाल किया जा सकता है:

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

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

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