تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

حفظ بيانات الاعتماد من النماذج

Eiji Kitamura

Meggin Kearney

حفظ بيانات الاعتماد من نماذج تسجيل الدخول

احرص على أن تكون نماذج التسجيل وتسجيل الدخول بسيطة قدر الإمكان.

يمكنك حفظ بيانات الاعتماد من نماذج تسجيل الدخول كي لا يضطر المستخدمون إلى تسجيل الدخول مرة أخرى عند العودة.

لتخزين بيانات اعتماد المستخدمين من النماذج:

أدرِج autocomplete في النموذج.
منع إرسال النموذج
المصادقة من خلال إرسال طلب
خزِّن بيانات الاعتماد.
تعديل واجهة المستخدم أو الانتقال إلى الصفحة المخصّصة

تضمين "`autocomplete`" في النموذج

قبل المتابعة، يُرجى التحقّق مما إذا كان النموذج يتضمّن سمات autocomplete. يساعد ذلك واجهة برمجة التطبيقات Credential Management API في العثور على id وpassword من النموذج وإنشاء عنصر بيانات اعتماد.

يساعد ذلك أيضًا المتصفّحات التي لا تتوافق مع واجهة Credential Management API في فهم دلالاتها. يمكنك الاطّلاع على مزيد من المعلومات حول ميزة "الملء التلقائي" في هذه المقالة التي كتبها جيسون غريغسبي.

<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`

Browser Support

Source

`navigator.credentials.store()`