تسجيل دخول المستخدمين

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);
     }

يجب عرض رسالة خطأ المصادقة

لتجنُّب إرباك المستخدمين، يجب أن تظهر لهم رسالة إشعار مؤقتة زرقاء اللون تفيد بأنّه "جارٍ تسجيل الدخول" عند الحصول على عنصر بيانات الاعتماد:

One important tip: if you succeed in obtaining a credential object but fail to authenticate the user, you should show an error message:

        }).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، استخدِم مكتبة JavaScript لتسجيل الدخول باستخدام حساب 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
• Facebook Login
• تسجيل الدخول باستخدام Twitter
• GitHub 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();
}

سيضمن ذلك عدم تسجيل الدخول تلقائيًا إلى أن يفعّل المستخدم ميزة تسجيل الدخول التلقائي في المرة القادمة. لاستئناف تسجيل الدخول التلقائي، يمكن للمستخدم اختيار تسجيل الدخول عمدًا من خلال اختيار الحساب الذي يريد تسجيل الدخول به من محدّد الحساب. بعد ذلك، يتم تسجيل دخول المستخدم دائمًا إلى أن يسجّل خروجه صراحةً.

الملاحظات