آخر التعديلات على واجهة برمجة التطبيقات لإدارة بيانات الاعتماد

Eiji Kitamura

يمكنك الاطّلاع على بعض التعديلات الموضّحة هنا في جلسة مؤتمر Google I/O. تسجيل دخول آمن وسلس: الحفاظ على تفاعل المستخدمين:

الإصدار 57 من Chrome

طرح 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 ويمكن للمستخدم الاختيار من بينها:

الإصدار 60 من Chrome

يقدم Chrome 60 العديد من التغييرات المهمة على واجهة برمجة التطبيقات لإدارة بيانات الاعتماد:

• يحتوي كائن PasswordCredential الآن على كلمة مرور.

• بما أنّ دالة fetch() المخصّصة لم تعُد مطلوبة لاسترجاع كلمة المرور، وسيتم إيقافها قريبًا.

• تقبل "navigator.credentials.get()" الآن التعداد mediation بدلاً من العلامة المنطقية unmediated.

• تمت إعادة تسمية requireUserMediation() إلى preventSilentAccess().

• طريقة جديدة navigator.credentials.create() يتم إنشاء كائنات بيانات اعتماد بشكل غير متزامن.

هناك إشعار يستدعي الانتباه عند رصد الميزات.

لمعرفة ما إذا كانت Credential Management API للوصول إلى بيانات الاعتماد بيانات الاعتماد الموحدة متاحة، تحقق مما إذا كان window.PasswordCredential أو يتوفّر window.FederatedCredential.

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

عنصر واحد (PasswordCredential) يتضمّن الآن كلمة المرور

اعتمدت واجهة برمجة التطبيقات Credential Management API نهجًا متحفظًا في التعامل مع كلمات المرور. أخفت كلمات المرور من JavaScript، ما يتطلّب من المطوّرين لإرسال عنصر PasswordCredential مباشرةً إلى الخادم للتحقّق من الصحة من خلال إضافة إلى fetch() API.

غير أن هذا النهج قدّم عددًا من القيود. تلقّينا ملاحظات تفيد بأنّه لا يمكن للمطوّرين استخدام واجهة برمجة التطبيقات للسببَين التاليَين:

• وكان عليه إرسال كلمة المرور كجزء من كائن JSON.

• كان عليه إرسال قيمة تجزئة كلمة المرور إلى خادمه.

بعد إجراء تحليل أمني وإدراك أن إخفاء كلمات المرور من JavaScript لم يمنع جميع متجهات الهجوم بالفعالية التي كنا نأملها، قررنا إجراء تغيير.

تتضمّن Credential Management 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() مخصصة، التحقّق من استخدام كائن PasswordCredential أو كائن FederatedCredential كقيمة للسمة credentials، مثل:

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

وعند استخدام دالة fetch() عادية كما هو موضّح في مثال الرمز السابق، أو يُنصح باستخدام XMLHttpRequest.

تقبل navigator.credentials.get() الآن توسّط التعداد

حتى Chrome 60، تم قبول سمة unmediated اختيارية من قِبل "navigator.credentials.get()". باستخدام علامة منطقية. على سبيل المثال:

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()".

للتوافق بشكل جيد مع السمة mediation الجديدة المقدّمة في المكالمة get()، تمت إعادة تسمية طريقة 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؟ لدينا مستند دليل نقل البيانات يمكنك المتابعة للترقية إلى الإصدار الجديد.