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

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, क्रेडेंशियल मैनेजमेंट एपीआई:

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

• पासवर्ड फ़ेच करने के लिए, अब कस्टम fetch() फ़ंक्शन की ज़रूरत नहीं होती. इस पर जल्द ही रोक लगा दी जाएगी.

• navigator.credentials.get() अब enum mediation स्वीकार करता है के बजाय बूलियन फ़्लैग unmediated.

• requireUserMediation() का नाम बदलकर preventSilentAccess() किया गया.

• नया तरीका navigator.credentials.create() एसिंक्रोनस रूप से क्रेडेंशियल ऑब्जेक्ट बनाता है.

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

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

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

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

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

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

• उन्हें 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() फ़ंक्शन का इस्तेमाल किया जा रहा है या नहीं, देखें कि इसमें PasswordCredential ऑब्जेक्ट या FederatedCredential ऑब्जेक्ट का इस्तेमाल किया गया है या नहीं credentials प्रॉपर्टी की वैल्यू के तौर पर सेट करें. उदाहरण के लिए:

fetch('/signin', {
    method: 'POST',
    credentials: c
})

पिछले कोड उदाहरण में दिखाए गए तरीके के मुताबिक, सामान्य fetch() फ़ंक्शन का इस्तेमाल करके, या XMLHttpRequest का इस्तेमाल करने का सुझाव दिया जाता है.

navigator.credentials.get() अब enum मध्यस्थता को स्वीकार करता है

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 वैल्यू के लिए, इनमें से कोई एक विकल्प चुनें:

इस उदाहरण में, खाता चुनने का विकल्प दिखाए बिना क्रेडेंशियल को पास कर दिया जाता है, पिछले फ़्लैग 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://*****'
    }
});

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

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