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

Eiji Kitamura

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

Chrome 57

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

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

Chrome अब Credential Management API का इस्तेमाल करके, किसी दूसरे सबडोमेन में सेव किए गए क्रेडेंशियल को वापस पा सकता है. उदाहरण के लिए, अगर कोई पासवर्ड 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 में कई अहम बदलाव किए गए हैं:

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

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

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

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

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

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

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

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

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

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

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).the>n(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&>#39;
}).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://*****'
    }
});

माइग्रेट करने से जुड़ी गाइड

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