لتوفير تجربة مستخدم متطورة، من المهم مساعدة المستخدمين على المصادقة على أنفسهم في موقعك الإلكتروني. يمكن للمستخدمين الذين تمت مصادقتهم التفاعل مع بعضهم البعض باستخدام ملف شخصي مخصّص، أو مزامنة البيانات على جميع الأجهزة، أو معالجة البيانات أثناء عدم الاتصال بالإنترنت، والقائمة تطول وتطول. إلا أن إنشاء كلمات المرور وتذكُّرها وكتابتها يكون أمرًا مرهقًا للمستخدمين النهائيين، لا سيما على شاشات الأجهزة الجوّالة، ما يؤدي إلى إعادة استخدام كلمات المرور نفسها على مواقع إلكترونية مختلفة. وهذا بالطبع خطر أمني.
يتوافق أحدث إصدار من Chrome (51) مع Credential Management API. وهو عبارة عن اقتراح لتتبُّع المعايير في W3C يمنح مطوّري البرامج إمكانية الوصول الآلي إلى مدير بيانات اعتماد المتصفِّح ويساعد المستخدمين على تسجيل الدخول بسهولة أكبر.
ما هي واجهة برمجة تطبيقات إدارة بيانات الاعتماد؟
تمكّن واجهة برمجة تطبيقات إدارة بيانات الاعتماد للمطوّرين من تخزين بيانات اعتماد كلمة المرور وبيانات الاعتماد الموحّدة واستردادها، وتوفّر هذه الواجهة 3 وظائف:
navigator.credentials.get()
navigator.credentials.store()
navigator.credentials.requireUserMediation()
باستخدام واجهات برمجة التطبيقات البسيطة هذه، يمكن للمطوّرين تنفيذ إجراءات فعّالة مثل:
- يمكنك السماح للمستخدمين بتسجيل الدخول بنقرة واحدة فقط.
- تذكَّر الحساب الموحّد الذي استخدمه المستخدم لتسجيل الدخول من خلاله.
- تسجيل دخول المستخدمين مرة أخرى عند انتهاء صلاحية الجلسة
أثناء تنفيذ Chrome، سيتم تخزين بيانات الاعتماد في مدير كلمات المرور على Chrome. إذا سجّل المستخدمون الدخول إلى Chrome، يمكنهم مزامنة كلمات مرور المستخدم على جميع الأجهزة. يمكن أيضًا مشاركة كلمات المرور التي تمت مزامنتها مع تطبيقات Android التي دمجت Smart Lock for Passwords API for Android للحصول على تجربة سلسة عبر أنظمة أساسية مختلفة.
دمج واجهة برمجة تطبيقات إدارة بيانات الاعتماد في موقعك الإلكتروني
قد تختلف طريقة استخدام واجهة برمجة تطبيقات إدارة بيانات الاعتماد مع موقعك الإلكتروني بناءً على بنيته. هل هو تطبيق من صفحة واحدة؟ هل هي بنية قديمة تضم انتقالات الصفحات؟ هل نموذج تسجيل الدخول موجود فقط في الصفحة العلوية؟ هل توجد أزرار تسجيل الدخول في كل مكان؟ هل يمكن للمستخدمين تصفح موقع الويب لديك بشكل هادف دون تسجيل الدخول؟ هل يعمل الاتحاد من خلال النوافذ المنبثقة؟ أم أنه يتطلب التفاعل عبر صفحات متعددة؟
من المستحيل تقريبًا تناول كل هذه الحالات، ولكن لنلقِ نظرة على التطبيق النموذجي من صفحة واحدة.
- الصفحة العلوية هي نموذج تسجيل.
- من خلال النقر على الزر "تسجيل الدخول"، سينتقل المستخدمون إلى نموذج تسجيل الدخول.
- يحتوي كل من نماذج التسجيل وتسجيل الدخول على الخيارات المعتادة فيما يخص بيانات اعتماد الهوية/كلمة المرور والاتحاد، على سبيل المثال تسجيل الدخول بحساب Google وتسجيل الدخول على Facebook.
باستخدام واجهة برمجة تطبيقات إدارة بيانات الاعتماد، ستتمكن من إضافة الميزات التالية إلى الموقع الإلكتروني، مثل:
- إظهار أداة اختيار الحساب عند تسجيل الدخول: تعرض واجهة المستخدم الأصلية لأداة اختيار الحساب عندما ينقر المستخدم على "تسجيل الدخول".
- بيانات اعتماد المتجر: عند تسجيل الدخول بنجاح، يمكنك عرض تخزين معلومات بيانات الاعتماد في مدير كلمات المرور في المتصفّح لاستخدامها لاحقًا.
- السماح للمستخدم بإعادة تسجيل الدخول تلقائيًا:اسمح للمستخدم بإعادة تسجيل الدخول إذا انتهت صلاحية الجلسة.
- التوسّط لتسجيل الدخول تلقائيًا: بعد تسجيل خروج المستخدم، أوقِف تسجيل الدخول التلقائي للزيارة التالية للمستخدم.
يمكنك تجربة هذه الميزات في موقع إلكتروني تجريبي باستخدام نموذج الرمز الخاص به.
إظهار "أداة اختيار الحساب" عند تسجيل الدخول
يمكنك استخدام navigator.credentials.get() للحصول على معلومات بيانات الاعتماد بين نقرة المستخدم على زر "تسجيل الدخول" والانتقال إلى نموذج تسجيل الدخول. سيعرض Chrome واجهة مستخدم محدد الحساب يمكن للمستخدم اختيار حساب منها.
![تنبثق واجهة مستخدم لأداة اختيار الحساب ليتمكّن المستخدم من اختيار حساب لتسجيل الدخول.](https://developer.chrome.google.cn/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6.png?authuser=6&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.google.cn/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8.png?authuser=6&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.google.cn/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb.png?authuser=6&hl=ar)
بيانات اعتماد المتجر
عندما يسجِّل أحد المستخدمين الدخول إلى موقعك الإلكتروني باستخدام نموذج، يمكنك استخدام
navigator.credentials.store()
لتخزين بيانات الاعتماد. وستتم مطالبة المستخدم بتخزينه أم لا. واستنادًا إلى نوع بيانات الاعتماد، استخدِم new
PasswordCredential()
أو new
FederatedCredential()
لإنشاء عنصر بيانات اعتماد تريد تخزينه.
![يسأل Chrome المستخدمين عما إذا كانوا يريدون تخزين بيانات الاعتماد (أو موفر بيانات الاعتماد).](https://developer.chrome.google.cn/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a.png?authuser=6&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.google.cn/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836.png?authuser=6&hl=ar)
السماح للمستخدم بتسجيل الدخول مرة أخرى تلقائيًا
عندما يغادر مستخدم موقعك الإلكتروني ويعود في وقت لاحق، قد تكون صلاحية الجلسة قد انتهت. لا تزعج المستخدم بكتابة كلمة المرور في كل مرة يعود فيها. اجعل المستخدم يسجِّل الدخول تلقائيًا.
![عندما يتم تسجيل دخول المستخدم تلقائيًا، سيظهر إشعار على الشاشة.](https://developer.chrome.google.cn/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4.png?authuser=6&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.google.cn/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd.png?authuser=6&hl=ar)
التوسّط لتسجيل الدخول تلقائيًا
عندما يسجِّل المستخدم خروجه من موقعك الإلكتروني، تقع على عاتقك مسؤولية ضمان
عدم تسجيل دخول المستخدم مرة أخرى تلقائيًا. ولضمان ذلك، توفّر واجهة برمجة التطبيقات Credential Management API آلية تُسمى التوسّط.
يمكنك تفعيل وضع التوسّط من خلال طلب الرمز
navigator.credentials.requireUserMediation()
.
ما دامت حالة توسّط المستخدم للمصدر مفعّلة، باستخدام
unmediated: true
مع navigator.credentials.get()
، سيتم
حلّ هذه الدالة باستخدام undefined
.
التوسّط لتسجيل الدخول تلقائيًا
navigator.credentials.requireUserMediation();
![رسم بياني انسيابي لتسجيل الدخول التلقائي](https://developer.chrome.google.cn/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff.png?authuser=6&hl=ar)
الأسئلة الشائعة
هل يمكن أن يسترد JavaScript على الموقع الإلكتروني كلمة مرور أولية؟
لا، يمكنك الحصول على كلمات المرور كجزء من "PasswordCredential
" فقط، ولا يمكن
كشفها بأي طريقة.
هل من الممكن تخزين 3 مجموعات من الأرقام لرقم تعريف باستخدام Credential Management API؟ ليس حاليًا. نشكرك على ملاحظاتك بشأن المواصفات.
هل يمكنني استخدام Credential Management API في إطار iframe؟
تقتصر واجهة برمجة التطبيقات على سياقات المستوى الأعلى. وسيتم حل المكالمات الواردة إلى .get()
أو .store()
في إطار iframe على الفور بدون تأثير.
هل يمكنني دمج إضافة Chrome لإدارة كلمات المرور مع Credential Management API؟
يمكنك إلغاء navigator.credentials
وربطه بإضافة Chrome إلى بيانات اعتماد get()
أو store()
.
المراجِع
للمزيد من المعلومات حول واجهة برمجة تطبيقات إدارة بيانات الاعتماد، يمكنك الاطّلاع على دليل الدمج للاطّلاع على مزيد من المعلومات.