ورود کاربران به سیستم

Eiji Kitamura

Meggin Kearney

برای ورود کاربران به سیستم، اطلاعات اعتباری را از مدیر گذرواژه مرورگر بازیابی کنید و از آن‌ها برای ورود خودکار کاربران به سیستم استفاده کنید. برای کاربرانی که چند حساب دارند، به آن‌ها اجازه دهید بااستفاده از انتخابگر حساب، حساب موردنظر را فقط با یک ضربه انتخاب کنند.

ورود به سیستم خودکار

ورود خودکار به سیستم می‌تواند در هر جایی از وب‌سایت شما اتفاق بیفتد؛ نه فقط در صفحه اصلی، بلکه در سایر صفحه‌های برگی نیز. این ویژگی زمانی مفید است که کاربران ازطریق موتور جستجو به صفحه‌های مختلفی در وب‌سایت شما می‌رسند.

برای فعال کردن ورود خودکار به سیستم:

1. دریافت اطلاعات کاربری.
2. اصالت‌سنجی کاربر.
3. واسط کاربر را به‌روز کنید یا به صفحه شخصی‌سازی‌شده بروید.

دریافت اطلاعات اعتبارنامه

Browser Support

• 51
• 18
• 60
• 13

Source

برای دریافت اطلاعات اطلاعات کاربری، navigator.credentials.get() را فراخوانی کنید. نوع اطلاعات اعتباری درخواستی را با دادن password یا federated به آن مشخص کنید.

همیشه از mediation: 'silent' برای ورود خودکار به سیستم استفاده کنید، تا بتوانید به‌راحتی فرایند را رد کنید اگر کاربر:

• اعتبارنامه‌ای ذخیره نکرده است.
• چندین اعتبارنامه ذخیره‌شده دارد.
• از سیستم خارج شده است.

قبل‌از دریافت اطلاعات کاربری، فراموش نکنید که بررسی کنید آیا کاربر قبلاً به سیستم وارد شده است یا نه:

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials.get({
      password: true,
      federated: {
        providers: ['https://accounts.google.com'],
      },
      mediation: 'silent',
    });
    // ...
  }
}

قولی که navigator.credentials.get() برمی‌گرداند با شیء اطلاعات کاربری یا null حل‌وفصل می‌شود. برای تعیین اینکه آیا PasswordCredential است یا FederatedCredential، کافی است به ویژگی .type شیء نگاه کنید، که یا password خواهد بود یا federated.

اگر .type برابر با federated باشد، ویژگی .provider رشته‌ای است که ارائه‌دهنده هویت را نشان می‌دهد.

اصالت‌سنجی کاربر

وقتی اعتبارنامه را دریافت کردید، بسته به نوع اعتبارنامه، جریان اصالت‌سنجی password یا federated را اجرا کنید:

    }).then(c => {
     if (c) {
       switch (c.type) {
         case 'password':
           return sendRequest(c);
           break;
         case 'federated':
           return gSignIn(c);
           break;
       }
     } else {
       return Promise.resolve();
     }

وقتی وعده حل شد، بررسی کنید که آیا شیء اطلاعات کاربری را دریافت کرده‌اید یا نه. درغیراین‌صورت، یعنی ورود خودکار به سیستم انجام نشده است. فرایند ورود خودکار به سیستم را بدون اطلاع کاربر رد کنید.

به‌روزرسانی میانای کاربر

اگر اصالت‌سنجی موفقیت‌آمیز بود، واسط کاربر را به‌روز کنید یا کاربر را به صفحه شخصی‌سازی‌شده هدایت کنید:

    }).then(profile => {
     if (profile) {
       updateUI(profile);
     }

فراموش نکنید پیام خطای اصالت‌سنجی را نشان دهید

برای جلوگیری از سردرگمی کاربر، کاربران باید هنگام دریافت شیء اطلاعات کاربری، یک اعلان گذرا آبی‌رنگ با عبارت «درحال ورود به سیستم» ببینند:

یک نکته مهم: اگر موفق به دریافت شیء اطلاعات کاربری شدید اما نتوانستید کاربر را اصالت‌سنجی کنید، باید پیام خطا نشان دهید:

        }).catch(error => {
          showError('Sign-in Failed');
        });
      }
    }

نمونه کد کامل

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'silent',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        }
      })
      .catch((error) => {
        showError('Sign-in Failed');
      });
  }
}

ورود به سیستم ازطریق انتخاب‌گر حساب

اگر کاربر به میانجی‌گری نیاز دارد یا چندین حساب دارد، از انتخابگر حساب استفاده کنید تا کاربر بتواند به سیستم وارد شود، و فرم ورود به سیستم معمولی را رد کند، برای مثال:

مراحل ورود به سیستم ازطریق انتخابگر حساب مانند ورود خودکار به سیستم است، با یک فراخوانی اضافی برای نمایش انتخابگر حساب به‌عنوان بخشی از دریافت اطلاعات اعتبارنامه:

1. اطلاعات اطلاعات کاربری را دریافت کنید و انتخاب‌کننده حساب را نشان دهید.
2. اصالت‌سنجی کاربر.
3. واسط کاربر را به‌روز کنید یا به صفحه شخصی‌سازی‌شده بروید.

دریافت اطلاعات اطلاعات کاربری و نمایش انتخابگر حساب

نمایش انتخابگر حساب در پاسخ به کنش تعریف‌شده کاربر، برای مثال، وقتی کاربر روی دکمه «ورود به سیستم» تک‌ضرب می‌زند. navigator.credentials.get() را فراخوانی کنید، و mediation: 'optional' یا mediation: 'required' را اضافه کنید تا انتخابگر حساب نشان داده شود.

وقتی mediation روی required باشد، همیشه انتخاب‌گر حساب برای ورود به سیستم به کاربر نشان داده می‌شود. این گزینه به کاربرانی که چند حساب دارند اجازه می‌دهد به‌راحتی بین حساب‌هایشان جابه‌جا شوند. وقتی mediation روی optional باشد، انتخاب‌گر حساب به‌طور صریح به کاربر نشان داده می‌شود تا پس‌از فراخوانی navigator.credentials.preventSilentAccess() به سیستم وارد شود. این کار معمولاً برای اطمینان از این است که ورود خودکار به سیستم پس‌از اینکه کاربر تصمیم به خروج از سیستم یا لغو ثبت‌نام می‌گیرد، اتفاق نیفتد.

نمونه‌ای که mediation: 'optional' را نشان می‌دهد:

    var signin = document.querySelector('#signin');
    signin.addEventListener('click', e => {
     if (window.PasswordCredential || window.FederatedCredential) {
       navigator.credentials.get({
         password: true,
         federated: {
           providers: [
             'https://accounts.google.com'
           ]
         },
         mediation: 'optional'
       }).then(c => {

وقتی کاربر حسابی را انتخاب می‌کند، قول با اطلاعات اعتباری حل می‌شود. اگر کاربر انتخابگر حساب را لغو کند، یا هیچ اطلاعات اعتباری ذخیره نشده باشد، قول با null حل می‌شود. دراین‌صورت، به تجربه فرم ورود به سیستم برگردید.

فراموش نکنید که به فرم ورود به سیستم برگردید

درصورت وجود هریک از دلایل زیر، باید به فرم ورود به سیستم برگردید:

• هیچ اطلاعات اعتباری ذخیره نمی‌شود.
• کاربر بدون انتخاب حساب، انتخابگر حساب را بست.
• میانای برنامه‌سازی کاربردی دردسترس نیست.

    }).then(profile => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
    }).catch(error => {
        location.href = '/signin';
    });

نمونه کد کامل

var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
  if (window.PasswordCredential || window.FederatedCredential) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'optional',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
      })
      .catch((error) => {
        location.href = '/signin';
      });
  }
});

ورود به سیستم یکپارچه

ورود به سیستم مشارکتی به کاربران امکان می‌دهد با یک ضربه و بدون نیاز به به‌خاطر سپردن جزئیات ورود به سیستم اضافی برای وب‌سایت شما، به سیستم وارد شوند.

برای پیاده‌سازی ورود به سیستم مشارکتی:

1. اصالت‌سنجی کاربر با هویت طرف سوم.
2. اطلاعات هویتی را ذخیره کنید.
3. واسط کاربر را به‌روز کنید یا به صفحه شخصی‌سازی‌شده بروید (همانند ورود خودکار به سیستم).

اصالت‌سنجی کاربر با هویت طرف سوم

وقتی کاربر روی دکمه ورود به سیستم فدراسیونی تک‌ضرب می‌زند، جریان اصالت‌سنجی ارائه‌دهنده هویت خاص را با FederatedCredential اجرا کنید.

Browser Support

• 51
• 79
• x
• x

Source

برای مثال، اگر ارائه‌دهنده Google است، از کتابخانه جاوا اسکریپت «ورود به سیستم با Google» استفاده کنید:

navigator.credentials
  .get({
    password: true,
    mediation: 'optional',
    federated: {
      providers: ['https://account.google.com'],
    },
  })
  .then(function (cred) {
    if (cred) {
      // Instantiate an auth object
      var auth2 = gapi.auth2.getAuthInstance();

      // Is this user already signed in?
      if (auth2.isSignedIn.get()) {
        var googleUser = auth2.currentUser.get();

        // Same user as in the credential object?
        if (googleUser.getBasicProfile().getEmail() === cred.id) {
          // Continue with the signed-in user.
          return Promise.resolve(googleUser);
        }
      }

      // Otherwise, run a new authentication flow.
      return auth2.signIn({
        login_hint: id || '',
      });
    }
  });

«ورود به سیستم با Google» منجر به ایجاد یک شناسه ژتون به‌عنوان مدرک اصالت‌سنجی می‌شود.

به‌طور کلی، ورودهای فدرال بر روی پروتکل‌های استانداردی مانند OpenID Connect یا OAuth ساخته می‌شوند. برای آشنایی با نحوه اصالت‌سنجی با حساب‌های فدرال، به اسناد ارائه‌دهندگان هویت فدرال مربوطه مراجعه کنید. نمونه‌های رایج عبارت‌اند از:

• ورود به سیستم با Google
• ورود به سیستم فیس‌بوک
• ورود به سیستم Twitter
• GitHub OAuth

اطلاعات هویتی فروشگاه

پس‌از انجام اصالت‌سنجی، می‌توانید اطلاعات هویتی را ذخیره کنید. اطلاعاتی که در اینجا ذخیره می‌کنید id از ارائه‌دهنده هویت و رشته ارائه‌دهنده‌ای است که ارائه‌دهنده هویت را نشان می‌دهد (name و iconURL اختیاری هستند). درباره این اطلاعات در مشخصات Credential Management بیشتر بدانید.

برای ذخیره کردن جزئیات حساب فدراسیونی، یک شیء جدید FederatedCredential با شناسه کاربر و شناسه ارائه‌دهنده نمونه‌سازی کنید. سپس navigator.credentials.store() را فراخوانی کنید تا اطلاعات هویتی ذخیره شود.

پس‌از فدراسیون موفق، یک FederatedCredential را به‌صورت هم‌زمان یا ناهم‌زمان نمونه‌سازی کنید:

نمونه رویکرد همگام:

// Create credential object synchronously.
var cred = new FederatedCredential({
  id: id, // id in IdP
  provider: 'https://account.google.com', // A string representing IdP
  name: name, // name in IdP
  iconURL: iconUrl, // Profile image url
});

نمونه‌ای از رویکرد ناهمگام:

// Create credential object asynchronously.
var cred = await navigator.credentials.create({
  federated: {
    id: id,
    provider: 'https://accounts.google.com',
    name: name,
    iconURL: iconUrl,
  },
});

سپس شیء اعتبارنامه را ذخیره کنید:

// Store it
navigator.credentials.store(cred).then(function () {
  // continuation
});

خروج از سیستم

وقتی روی دکمه خروج از سیستم تک‌ضرب زده می‌شود، کاربران را از سیستم خارج کنید. ابتدا جلسه را خاتمه دهید، سپس ورود خودکار به سیستم را برای بازدیدهای بعدی خاموش کنید. (نحوه پایان دادن به جلسات کاملاً به شما بستگی دارد.)

ورود خودکار به سیستم را برای بازدیدهای بعدی خاموش کنید

تماس با navigator.credentials.preventSilentAccess():

signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  navigator.credentials.preventSilentAccess();
}

این کار تضمین می‌کند که ورود خودکار به سیستم تا زمانی که کاربر دوباره آن را فعال نکند انجام نشود. برای ازسر گرفتن ورود خودکار به سیستم، کاربر می‌تواند با انتخاب حساب موردنظر برای ورود به سیستم از انتخابگر حساب، به‌طور عمدی به سیستم وارد شود. سپس کاربر همیشه دوباره به سیستم وارد می‌شود تا زمانی‌که صریحاً از سیستم خارج شود.

بازخورد