التحقّق من رصد ميزات Credential Management API

Eiji Kitamura

ملخّص

تساعد واجهة برمجة التطبيقات WebAuthn في تعزيز الأمان من خلال توفير المصادقة المستندة إلى بيانات اعتماد المفتاح العام على الويب، وسيتم قريبًا إتاحتها في Chrome وFirefox وEdge (مع المواصفات المعدَّلة). تضيف هذه الميزة نوعًا جديدًا من عناصر Credential، ولكن قد يؤدي ذلك إلى تعطُّل المواقع الإلكترونية التي تستخدم واجهة برمجة التطبيقات Credential Management بدون رصد ميزات أنواع بيانات الاعتماد المحدّدة التي تستخدمها.

إذا كنت تفعل ذلك حاليًا لرصد الميزات

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // use CM API
}

ننصحك باتّباع هذه الخطوات بدلاً من ذلك:

if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

يمكنك الاطّلاع على التغييرات التي تم إجراؤها على الرمز النموذجي كمثال.

يُرجى مواصلة القراءة لمعرفة المزيد.

ملاحظة: إذا كنت تستخدم Google Identity كطريقة أساسية لتسجيل دخول المستخدمين، ننصحك باستخدام مكتبة JavaScript للاشتراك بنقرة واحدة وتسجيل الدخول تلقائيًا المستندة إلى واجهة Credential Management API. وتجمع هذه الواجهة بين تسجيل الدخول باستخدام حساب Google وتسجيل الدخول المستند إلى كلمة المرور في طلب واحد لواجهة برمجة التطبيقات، وتضيف ميزة إنشاء الحساب بنقرة واحدة.

ما هي واجهة Credential Management API؟

تتيح واجهة برمجة التطبيقات Credential Management API (CM API) للمواقع الإلكترونية الوصول آليًا إلى وحدة تخزين بيانات الاعتماد الخاصة بوكيل المستخدم لتخزين بيانات اعتماد المستخدم أو استردادها لمصدر الطلب.

واجهات برمجة التطبيقات الأساسية هي:

• navigator.credentials.get()
• navigator.credentials.store()
• navigator.credentials.create()
• navigator.credentials.preventSilentAccess()

تحدّد مواصفات واجهة برمجة التطبيقات CM API الأصلية نوعَين من بيانات الاعتماد:

• PasswordCredential
• FederatedCredential

‫PasswordCredential هو بيانات اعتماد تحتوي على رقم تعريف المستخدم وكلمة المرور. ‫FederatedCredential هو بيانات اعتماد تحتوي على معرّف المستخدم وسلسلة تمثّل موفّر الهوية.

باستخدام بيانات الاعتماد هذه، يمكن للمواقع الإلكترونية إجراء ما يلي:

• السماح للمستخدم بتسجيل الدخول باستخدام بيانات اعتماد محفوظة مسبقًا مستندة إلى كلمة مرور أو موحّدة بمجرد وصوله (تسجيل الدخول التلقائي)،
• تخزين بيانات الاعتماد المستندة إلى كلمة المرور أو الموحّدة التي سجّل المستخدم الدخول بها
• إبقاء بيانات اعتماد تسجيل الدخول الخاصة بالمستخدم محدَّثة (مثلاً، بعد تغيير كلمة المرور)

ما هو WebAuthn؟

تضيف WebAuthn (مصادقة الويب) بيانات اعتماد المفتاح العام إلى واجهة برمجة التطبيقات لإدارة بيانات الاعتماد. على سبيل المثال، تتيح هذه الواجهة للمواقع الإلكترونية طريقة موحّدة لتنفيذ عامل المصادقة الثاني باستخدام أجهزة مصادقة متوافقة مع FIDO 2.0.

على المستوى الفني، يوسّع WebAuthn واجهة برمجة التطبيقات CM API باستخدام واجهة PublicKeyCredential.

ما المشكلة؟

في السابق، كنا نوجّه المطوّرين إلى رصد ميزات واجهة CM API باستخدام الرمز البرمجي التالي:

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  // Use CM API
}

But as you can see from the descriptions above, the `navigator.credentials` is
now expanded to support public-key credentials in addition to password
credentials and federated credentials.

The problem is that user agents don't necessarily support all kinds of
credentials. If you continue feature detect using `navigator.credentials`, your
website may break when you are using a certain credential type not supported by
the browser.

**Supported credential types by browser<s**
table class="properties with-head><ing-t><in>t<&q><uot>;<tb>odytr
th/th
thPasswordCredential / Feder<ate>d<Cr>edential/th
thPubli<cKe>y<Cre><de><nt>ial/th
</tr><tr>thChrome
/<tht><dA>vailable
/tdtdI<n d><eve><lo><pm>ent
/td/<trt><rt>hFir<efo><x<>/span>
/thtdN/A
/tdtdAiming <to ><shi><p ><on> 60
/<td/><tr>trth<Edg><e<>/span>
/thtdN/A
/tdtdImp<lemented with a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello->in-micros<of>t-edge/"older API/a. New API (navigator.cr<ede><nti><als) c><oming >soon.
/td/tr/tbody/table


## The solution
You can avoid this by modifying feature detection code as follows to explicitly
test for the credential type that you intend to use.

```js
if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if&& (navigator.credentials  navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

يمكنك الاطّلاع على التغييرات الفعلية التي تم إجراؤها على الرمز النموذجي كمثال.

كمرجع، إليك كيفية رصد PublicKeyCredential المضافة في WebAuthn:

if (window.PublicKeyCredential) {
    // use CM API with PublicKeyCredential added in the WebAuthn spec
}

المخطط الزمني

أول تنفيذ متاح لـ WebAuthn هو Firefox ومن المخطط أن يكون مستقرًا في أوائل مايو 2018.

أخيرًا

إذا كانت لديك أي أسئلة، يُرجى إرسالها إلى ‎@agektmr أو [e-mail].