‫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‏ ۲۰۰ یا ۴۰۱ پاسخ دهد تا برای مرورگر مشخص شود که ثبت‌نام/ ورود به سیستم/ تغییر گذرواژه موفقیت‌آمیز بوده است یا نه.

برای مثال:

// Try sign-in with AJAX
fetch('/signin', {
  method: 'POST',
  body: new FormData(e.target),
  credentials: 'include',
});

ذخیره کردن اطلاعات کاربری

برای ذخیره کردن اطلاعات کاربری، ابتدا بررسی کنید که API دردسترس باشد، سپس یک PasswordCredential با عنصر فرم به‌عنوان آرگومان به‌صورت هم‌زمان یا ناهم‌زمان نمونه‌سازی کنید. با navigator.credentials.store() تماس بگیرید. اگر API دردسترس نیست، می‌توانید به‌راحتی اطلاعات نمایه را به مرحله بعدی بازارسال کنید.

نمونه همگام:

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