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

Eiji Kitamura

Meggin Kearney

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

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

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

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

تضمين 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

navigator.credentials.store()

ملاحظات