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

يمكنك الاطّلاع على بعض التعديلات الموضّحة هنا في جلسة مؤتمر 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 العديد من التغييرات المهمة على واجهة برمجة التطبيقات لإدارة بيانات الاعتماد:

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

لمعرفة ما إذا كانت 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.

حتى 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؟ لدينا مستند دليل نقل البيانات يمكنك المتابعة للترقية إلى الإصدار الجديد.