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

ميجين كيرني
ميجين كيرني

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

تسجيل الدخول تلقائيًا

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

لتفعيل ميزة "تسجيل الدخول تلقائيًا":

  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. في هذه الحالة، ارجِع إلى تجربة نموذج تسجيل الدخول.

لا تنسَ الرجوع إلى نموذج تسجيل الدخول

يجب الرجوع إلى نموذج تسجيل الدخول لأي من الأسباب التالية:

  • لا يتم تخزين بيانات الاعتماد.
  • رفض المستخدم محدِّد الحساب بدون اختيار حساب.
  • واجهة برمجة التطبيقات غير متوفرة.
    }).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
  • x
  • x

المصدر

على سبيل المثال، إذا كان موفّر الخدمة هو 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. لمعرفة كيفية المصادقة باستخدام الحسابات الموحّدة، يُرجى الرجوع إلى مستندات موفِّري الهوية الموحّدة المعنيين. تشمل الأمثلة الشائعة ما يلي:

معلومات هوية المتجر

بعد الانتهاء من المصادقة، يمكنك تخزين معلومات الهوية. المعلومات التي ستخزنها هنا هي 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();
}

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

إضافة ملاحظات