ورود کاربران

ایجی کیتامورا
مگین کرنی
Meggin Kearney

برای ورود به سیستم کاربران، اعتبارنامه ها را از مدیر رمز عبور مرورگر بازیابی کنید و از آنها برای ورود خودکار کاربران استفاده کنید. برای کاربرانی که چندین حساب دارند، به آنها اجازه دهید تنها با یک ضربه با استفاده از انتخابگر حساب، حساب را انتخاب کنند.

ورود خودکار

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

برای فعال کردن ورود خودکار:

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

اطلاعات اعتبار را دریافت کنید

پشتیبانی مرورگر

  • 51
  • 18
  • 60
  • 13

منبع

برای دریافت اطلاعات اعتبار، 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');
      });
  }
}

از طریق انتخابگر حساب وارد شوید

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

انتخابگر حساب Google که چندین حساب را نشان می دهد.

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

  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 برطرف می‌شود. در آن صورت، به علامت تجربه شکل برگردید.

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

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

  • هیچ اعتباری ذخیره نمی شود.
  • کاربر بدون انتخاب حساب، انتخابگر حساب را رد کرد.
  • API در دسترس نیست.
    }).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 اجرا کنید.

پشتیبانی مرورگر

  • 51
  • 79
  • ایکس
  • ایکس

منبع

به عنوان مثال، اگر ارائه دهنده 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 Sign-In به یک نشانه شناسه به عنوان مدرکی برای احراز هویت منجر می شود.

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

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

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

برای ذخیره جزئیات حساب فدرال، یک شی 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();
}

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

بازخورد