يمكنك الاطّلاع على بعض التعديلات الموضّحة هنا في جلسة مؤتمر 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
ويمكن للمستخدم الاختيار من بينها:
![أداة اختيار الحساب تعرض تفاصيل تسجيل الدخول إلى النطاق الفرعي المحدّدة](https://developer.chrome.com/static/blog/credential-management-updates/image/account-chooser-showing-s-369ff3f4bb61e.png?authuser=19&hl=ar)
الإصدار 60 من Chrome
يقدم Chrome 60 العديد من التغييرات المهمة على واجهة برمجة التطبيقات لإدارة بيانات الاعتماد:
بما أنّ دالة
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
:
قيمة 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()
".
للتوافق بشكل جيد مع السمة 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؟ لدينا مستند دليل نقل البيانات يمكنك المتابعة للترقية إلى الإصدار الجديد.