لتوفير تجربة مستخدم متطورة، من المهم مساعدة المستخدمين يصادقون أنفسهم على موقع الويب الخاص بك. يمكن للمستخدمين الذين تمت المصادقة عليهم التفاعل مع بعضها البعض باستخدام ملف شخصي مخصص، أو مزامنة البيانات عبر الأجهزة، أو معالجة البيانات في وضع عدم الاتصال بالإنترنت؛ والقائمة تطول وتطول. لكن إنشاء وتذكر وكتابة قد تكون كلمات المرور مرهقة للمستخدمين النهائيين، لا سيما على شاشات الأجهزة الجوّالة الأمر الذي يقودهم إلى إعادة استخدام كلمات المرور نفسها على مواقع مختلفة. هذا بالطبع يشكّل خطرًا أمنيًا.
يتوافق أحدث إصدار من Chrome (51) مع واجهة برمجة التطبيقات لإدارة بيانات الاعتماد. إنها مسار المعايير في W3C والذي يمنح مطوري البرامج إمكانية الدخول الآلي إلى مدير بيانات اعتماد المتصفح وتساعد المستخدمين في تسجيل الدخول بشكل أيسر.
ما هي واجهة برمجة التطبيقات Credential Management API؟
تتيح Credential Management API للمطوّرين تخزين كلمة المرور واستردادها. بيانات الاعتماد وبيانات الاعتماد الموحدة وتوفر 3 وظائف:
navigator.credentials.get()
navigator.credentials.store()
navigator.credentials.requireUserMediation()
باستخدام واجهات برمجة التطبيقات البسيطة هذه، يمكن للمطوّرين تنفيذ إجراءات فعّالة مثل:
- تمكين المستخدمين من تسجيل الدخول بنقرة واحدة فقط
- تذكر الحساب الموحّد الذي استخدمه المستخدم لتسجيل الدخول.
- إعادة تسجيل دخول المستخدمين عند انتهاء صلاحية الجلسة
في عملية تنفيذ Chrome، سيتم تخزين بيانات الاعتماد في كلمة مرور Chrome. مدير المشروع. في حال سجَّل المستخدمون الدخول إلى Chrome، يمكنهم مزامنة كلمات مرور المستخدمين. على جميع الأجهزة. يمكن أيضًا مشاركة كلمات المرور التي تمت مزامنتها هذه مع تطبيقات Android التي دمجت واجهة برمجة تطبيقات Smart Lock لكلمات المرور لنظام التشغيل Android للحصول على تجربة سلسة على عدّة منصات
دمج Credential Management API مع موقعك الإلكتروني
قد تختلف طريقة استخدامك لواجهة Credential Management API على موقعك الإلكتروني. اعتمادًا على هيكلها. هل هو تطبيق من صفحة واحدة؟ هل هو إرث هندسة مع انتقالات الصفحة؟ هل نموذج تسجيل الدخول موجود في أعلى الشاشة فقط ؟ هل أزرار تسجيل الدخول موجودة في كل مكان؟ هل يمكن للمستخدمين تصفح الموقع الإلكتروني بدون تسجيل الدخول؟ هل تعمل ميزة الاتحاد ضمن النوافذ المنبثقة؟ أم هل التفاعل عبر صفحات متعددة؟
يكاد يكون من المستحيل تغطية جميع هذه الحالات، ولكن دعونا نلقي نظرة على تطبيقًا عاديًا من صفحة واحدة.
- الصفحة العلوية هي نموذج تسجيل.
- بالنقر على "تسجيل الدخول" سينتقل المستخدمون إلى نموذج تسجيل الدخول.
- يتضمّن كلّ من نموذج التسجيل ونموذج تسجيل الدخول الخيارات المعتادة لرقم التعريف/كلمة المرور. بيانات الاعتماد والاتحاد، مثل من خلال تسجيل الدخول باستخدام Google وFacebook.
باستخدام واجهة برمجة التطبيقات Credential Management API، ستتمكّن من إضافة ما يلي: الميزات إلى الموقع، مثل:
- إظهار محدد الحساب عند تسجيل الدخول: لعرض واجهة مستخدم لأداة اختيار الحساب الأصلية. عندما ينقر المستخدم على "تسجيل الدخول"
- بيانات اعتماد المتجر: بعد تسجيل الدخول بنجاح، يمكنك عرض تخزين معلومات الاعتماد إلى مدير كلمات المرور في المتصفح لاستخدامها لاحقًا.
- السماح للمستخدم بتسجيل الدخول تلقائيًا: اسمح للمستخدم بتسجيل الدخول مرة أخرى إذا انتهاء صلاحية الجلسة.
- التوسط لتسجيل الدخول التلقائي: بعد تسجيل خروج المستخدم، يمكنك إيقاف تسجيل الدخول التلقائي إلى الزيارة التالية للمستخدم.
يمكنك تجربة تنفيذ هذه الميزات في موقع إلكتروني تجريبي باستخدام نموذج رمزه.
إظهار "مُحدِّد الحساب" عند تسجيل الدخول
بين نقرة المستخدم على "تسجيل الدخول" والتنقل إلى نموذج تسجيل الدخول، يمكن استخدام navigator.credentials.get() للحصول على معلومات الاعتماد. سيعرض Chrome واجهة مستخدم أداة اختيار الحساب يمكن للمستخدم اختيار حساب.
![نافذة منبثقة لواجهة مستخدم أداة اختيار الحساب كي يتمكّن المستخدم من اختيار حساب لتسجيل الدخول إليه.](https://developer.chrome.com/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6.png?authuser=9&hl=ar)
الحصول على كائن بيانات اعتماد كلمة المرور
لعرض بيانات اعتماد كلمة المرور كخيارات للحساب، استخدِم password: true
.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
}).then(function(cred) {
// continuation
...
استخدام بيانات اعتماد كلمة المرور لتسجيل الدخول
وبعد أن يختار المستخدم حسابًا، ستتلقى وظيفة التحليل
بيانات اعتماد كلمة المرور. يمكنك إرساله إلى الخادم باستخدام fetch()
:
// continued from previous example
}).then(function(cred) {
if (cred) {
if (cred.type == 'password') {
// Construct FormData object
var form = new FormData();
// Append CSRF Token
var csrf_token = document.querySelector('csrf_token').value;
form.append('csrf_token', csrf_token);
// You can append additional credential data to `.additionalData`
cred.additionalData = form;
// `POST` the credential object as `credentials`.
// id, password and the additional data will be encoded and
// sent to the url as the HTTP body.
fetch(url, { // Make sure the URL is HTTPS
method: 'POST', // Use POST
credentials: cred // Add the password credential object
}).then(function() {
// continuation
});
} else if (cred.type == 'federated') {
// continuation
استخدام بيانات اعتماد موحّدة لتسجيل الدخول
لعرض الحسابات الموحّدة لمستخدم، أضِف federated
، الذي يأخذ مصفوفة.
من موفري الهوية، إلى خيارات get()
.
![عند تخزين حسابات متعددة في مدير كلمات المرور.](https://developer.chrome.com/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8.png?authuser=9&hl=ar)
navigator.credentials.get({
password: true, // `true` to obtain password credentials
federated: {
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
}
}).then(function(cred) {
// continuation
...
يمكنك فحص السمة type
لكائن بيانات الاعتماد لمعرفة ما إذا كان PasswordCredential
(type == 'password'
) أو FederatedCredential
(type == 'federated'
).
إذا كانت بيانات الاعتماد
FederatedCredential
,
يمكنك طلب واجهة برمجة التطبيقات المناسبة باستخدام المعلومات التي تحتوي عليها.
});
} else if (cred.type == 'federated') {
// `provider` contains the identity provider string
switch (cred.provider) {
case 'https://accounts.google.com':
// Federated login using Google Sign-In
var auth2 = gapi.auth2.getAuthInstance();
// In Google Sign-In library, you can specify an account.
// Attempt to sign in with by using `login_hint`.
return auth2.signIn({
login_hint: cred.id || ''
}).then(function(profile) {
// continuation
});
break;
case 'https://www.facebook.com':
// Federated login using Facebook Login
// continuation
break;
default:
// show form
break;
}
}
// if the credential is `undefined`
} else {
// show form
![الرسم البياني التدفقي لإدارة بيانات الاعتماد](https://developer.chrome.com/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb.png?authuser=9&hl=ar)
بيانات الاعتماد الخاصة بمتجر Play
عندما يسجِّل أحد المستخدمين الدخول إلى موقعك الإلكتروني باستخدام نموذج، يمكنك استخدام
navigator.credentials.store()
لتخزين بيانات الاعتماد. سيُطلب من المستخدم تخزينه أو لا. حسب
في نوع بيانات الاعتماد، استخدِم new
PasswordCredential()
أو new
FederatedCredential()
لإنشاء كائن بيانات اعتماد تريد تخزينه.
![يسأل Chrome المستخدمين عما إذا كانوا يريدون تخزين بيانات الاعتماد (أو موفّر خدمة اتحاد).](https://developer.chrome.com/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a.png?authuser=9&hl=ar)
إنشاء بيانات اعتماد كلمة المرور وتخزينها من عنصر نموذج
يستخدم الرمز التالي سمات autocomplete
لإجراء
خريطة
عناصر النموذج إلى PasswordCredential
.
لغة HTML
html
<form id="form" method="post">
<input type="text" name="id" autocomplete="username" />
<input type="password" name="password" autocomplete="current-password" />
<input type="hidden" name="csrf_token" value="******" />
</form>
JavaScript
var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
إنشاء بيانات الاعتماد الموحّدة وتخزينها
// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
id: id, // The id for the user
name: name, // Optional user name
provider: 'https://accounts.google.com', // A string that represents the identity provider
iconURL: iconUrl // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
![مخطّط بياني لتدفق تسجيل الدخول](https://developer.chrome.com/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836.png?authuser=9&hl=ar)
السماح للمستخدم بتسجيل الدخول تلقائيًا مرة أخرى
عندما يغادر مستخدم موقعك الإلكتروني ثم يعود في وقت لاحق، من الممكن أن انتهاء صلاحية الجلسة. عدم إزعاج المستخدم لكتابة كلمة المرور في كل مرة والعودة. اسمح للمستخدم بتسجيل الدخول مرة أخرى تلقائيًا.
![عندما يسجّل المستخدم الدخول تلقائيًا، سيظهر إشعار على الشاشة.](https://developer.chrome.com/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4.png?authuser=9&hl=ar)
الحصول على كائن بيانات اعتماد
navigator.credentials.get({
password: true, // Obtain password credentials or not
federated: { // Obtain federation credentials or not
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
},
unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
if (cred) {
// auto sign-in possible
...
} else {
// auto sign-in not possible
...
}
});
من المفترض أن تبدو الرمز مشابهة لما رأيته في القسم "عرض محدد الحساب"
عند تسجيل الدخول" . الاختلاف الوحيد هو أنك ستقوم بتعيين
unmediated: true
يؤدي هذا إلى حل الدالة على الفور ويمنحك بيانات اعتماد تسجيل دخول المستخدم تلقائيًا. هناك بضعة شروط:
- وافق المستخدم على ميزة تسجيل الدخول التلقائي في ترحيب حار.
- سبق أن سجَّل المستخدم الدخول إلى الموقع الإلكتروني باستخدام واجهة برمجة التطبيقات Credential Management API.
- لدى المستخدم بيانات اعتماد واحدة فقط مخزَّنة للمصدر.
- لم يسجِّل المستخدم خروجه صراحةً في الجلسة السابقة.
في حال عدم استيفاء أي من هذه الشروط، سيتم رفض الدالة.
![مخطَّط تدفق عنصر بيانات الاعتماد](https://developer.chrome.com/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd.png?authuser=9&hl=ar)
توسط تسجيل الدخول التلقائي
عندما يسجِّل المستخدم خروجه من موقعك الإلكتروني، تقع على عاتقك مسؤولية ضمان
لن يتم تسجيل دخول المستخدم تلقائيًا مرة أخرى. للتأكد
وهذا، توفر واجهة برمجة تطبيقات إدارة بيانات الاعتماد آلية تسمى التوسط.
يمكنك تفعيل وضع التوسّط من خلال طلب
navigator.credentials.requireUserMediation()
طالما أن حالة توسط المستخدم في المصدر مفعّلة، وباستخدام
unmediated: true
مع navigator.credentials.get()
، ستؤدي هذه الدالة إلى
حلّ المشكلة باستخدام undefined
تسجيل الدخول التلقائي باستخدام التوسّط
navigator.credentials.requireUserMediation();
![رسم بياني لتدفق تسجيل الدخول التلقائي](https://developer.chrome.com/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff.png?authuser=9&hl=ar)
الأسئلة الشائعة
هل من الممكن أن تسترد لغة JavaScript على الموقع الإلكتروني
أو كلمة المرور؟
لا. يمكنك الحصول على كلمات المرور فقط كجزء من PasswordCredential
وليس
والكشف عنها بأي وسيلة.
هل من الممكن تخزين 3 مجموعات من أرقام المعرف باستخدام "بيانات الاعتماد" Management API؟ ليس حاليًا. وستكون ملاحظاتك بشأن المواصفات وأقدّر ذلك.
هل يمكنني استخدام واجهة برمجة التطبيقات Credential Management API داخل إطار iframe؟
تقتصر واجهة برمجة التطبيقات على سياقات المستوى الأعلى. المكالمات إلى .get()
أو .store()
في iframe على الفور بدون تأثير.
هل يمكنني دمج إضافة Chrome لإدارة كلمات المرور مع "بيانات الاعتماد"
Management API؟
يمكنك إلغاء navigator.credentials
وربطه بإضافة Chrome من أجل
بيانات الاعتماد get()
أو store()
الموارد
لمزيد من المعلومات حول Credential Management API، يُرجى الاطّلاع على دليل الدمج.