اجعل نماذج التسجيل وتسجيل الدخول بسيطة قدر الإمكان.
احفظ بيانات الاعتماد من نماذج تسجيل الدخول حتى لا يضطر المستخدمون إلى تسجيل الدخول مرة أخرى عند عودتهم.
لتخزين بيانات اعتماد المستخدم من النماذج:
- أدرِج
autocompleteفي النموذج. - منع إرسال النموذج
- يمكنك المصادقة بإرسال طلب.
- تخزين بيانات الاعتماد:
- تحديث واجهة المستخدم أو المتابعة إلى الصفحة المخصصة.
تضمين autocomplete في النموذج
قبل المتابعة، يُرجى التحقّق
مما إذا كان النموذج يتضمّن سمات autocomplete.
سيساعد هذا واجهة برمجة تطبيقات إدارة بيانات الاعتماد في العثور على id وpassword من النموذج وإنشاء كائن بيانات اعتماد.
ويساعد ذلك أيضًا المتصفِّحات التي لا تتيح استخدام واجهة برمجة تطبيقات إدارة بيانات الاعتماد في فهم دلالاتها. يمكنك الاطّلاع على المزيد من المعلومات حول ميزة الملء التلقائي في هذه المقالة من تأليف جايسون غريغسبي.
<form id="signup" method="post">
<input name="email" type="text" autocomplete="username email" />
<input name="display-name" type="text" autocomplete="name" />
<input name="password" type="password" autocomplete="new-password" />
<input type="submit" value="Sign Up!" />
</form>
منع إرسال النموذج
عندما يضغط المستخدم على زر الإرسال، امنع النموذج من الإرسال، الأمر الذي قد ينتج عنه انتقال الصفحة:
var f = document.querySelector('#signup');
f.addEventListener('submit', e => {
e.preventDefault();
ومن خلال منع انتقال الصفحة، يمكنك الاحتفاظ بمعلومات بيانات الاعتماد مع التحقق من مصداقيتها.
المصادقة بإرسال طلب
لمصادقة المستخدم، سلِّم معلومات الاعتماد إلى خادمك باستخدام AJAX.
من جهة الخادم، أنشِئ نقطة نهاية (أو بسِّط نقطة نهاية حالية) تستجيب برمز HTTP 200 أو 401، لكي يدرك المتصفّح ما إذا كانت كلمة مرور الاشتراك أو تسجيل الدخول أو تغييرها ناجحة أم لا.
مثال:
// Try sign-in with AJAX
fetch('/signin', {
method: 'POST',
body: new FormData(e.target),
credentials: 'include',
});
تخزين بيانات الاعتماد
لتخزين بيانات اعتماد، تحقَّق أولاً من توفُّر واجهة برمجة التطبيقات، ثم أنشئ مثيلاً PasswordCredential باستخدام عنصر النموذج كوسيطة، سواء بشكل متزامن أو غير متزامن.
الاتصال بالرقم
navigator.credentials.store().
إذا لم تكن واجهة برمجة التطبيقات متاحة،
فيمكنك ببساطة إعادة توجيه معلومات الملف الشخصي إلى الخطوة التالية.
مثال متزامن:
if (window.PasswordCredential) {
var c = new PasswordCredential(e.target);
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
مثال غير متزامن:
if (window.PasswordCredential) {
var c = await navigator.credentials.create({password: e.target});
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
بعد نجاح الطلب، يمكنك تخزين معلومات بيانات الاعتماد. (لا تخزِّن معلومات بيانات الاعتماد إذا تعذّر الطلب لأنّ ذلك يؤدي إلى إرباك المستخدمين المكرّري الزيارة).
عندما يحصل متصفح Chrome على معلومات بيانات الاعتماد، ينبثق إشعار يطلب تخزين بيانات اعتماد (أو موفر بيانات اعتماد).
تحديث واجهة المستخدم
إذا سارت الأمور على ما يرام، فقم بتحديث واجهة المستخدم باستخدام معلومات الملف الشخصي، أو انتقل إلى الصفحة المخصصة.
}).then(profile => {
if (profile) {
updateUI(profile);
}
}).catch(error => {
showError('Sign-in Failed');
});
});
مثال على الرمز الكامل
// Get form's DOM object
var f = document.querySelector('#signup');
f.addEventListener('submit', (e) => {
// Stop submitting form by itself
e.preventDefault();
// Try sign-in with AJAX
fetch('/signin', {
method: 'POST',
body: new FormData(e.target),
credentials: 'include',
})
.then((res) => {
if (res.status == 200) {
return Promise.resolve();
} else {
return Promise.reject('Sign-in failed');
}
})
.then((profile) => {
// Instantiate PasswordCredential with the form
if (window.PasswordCredential) {
var c = new PasswordCredential(e.target);
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
})
.then((profile) => {
// Successful sign-in
if (profile) {
updateUI(profile);
}
})
.catch((error) => {
// Sign-in failed
showError('Sign-in Failed');
});
});
توافُق المتصفح
PasswordCredential
navigator.credentials.store()