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

Eiji Kitamura

Meggin Kearney

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

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

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

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

1. الحصول على معلومات بيانات الاعتماد
2. عليك بمصادقة المستخدم.
3. يُرجى تعديل واجهة المستخدم أو المتابعة إلى الصفحة المخصّصة.

الحصول على معلومات الاعتماد

للحصول على معلومات بيانات الاعتماد، استدعِ 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

على سبيل المثال، إذا كان موفّر الخدمة هو 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
• تسجيل الدخول إلى Twitter
• بروتوكول OAuth في GitHub

تخزين معلومات الهوية

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

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

ملاحظات