حفظ بيانات الاعتماد من "نماذج 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()

ملاحظات