تبسيط عملية تسجيل الدخول باستخدام واجهة برمجة التطبيقات لإدارة بيانات الاعتماد

Eiji Kitamura

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

يتوافق أحدث إصدار من Chrome (51) مع Credential Management API. وهو عبارة عن اقتراح لتتبُّع المعايير في W3C يمنح مطوّري البرامج إمكانية الوصول الآلي إلى مدير بيانات اعتماد المتصفِّح ويساعد المستخدمين على تسجيل الدخول بسهولة أكبر.

تحذير: تم إجراء تعديلات كبيرة على واجهة برمجة التطبيقات هذه، وبالتالي لم تعُد الرموز النموذجية الواردة في هذه المقالة صالحة. راجِع دليل الدمج المحدّث أو ملخّص التعديل.

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

ما هي واجهة برمجة تطبيقات إدارة بيانات الاعتماد؟

تمكّن واجهة برمجة تطبيقات إدارة بيانات الاعتماد للمطوّرين من تخزين بيانات اعتماد كلمة المرور وبيانات الاعتماد الموحّدة واستردادها، وتوفّر هذه الواجهة 3 وظائف:

• navigator.credentials.get()
• navigator.credentials.store()
• navigator.credentials.requireUserMediation()

باستخدام واجهات برمجة التطبيقات البسيطة هذه، يمكن للمطوّرين تنفيذ إجراءات فعّالة مثل:

• يمكنك السماح للمستخدمين بتسجيل الدخول بنقرة واحدة فقط.
• تذكَّر الحساب الموحّد الذي استخدمه المستخدم لتسجيل الدخول من خلاله.
• تسجيل دخول المستخدمين مرة أخرى عند انتهاء صلاحية الجلسة

أثناء تنفيذ Chrome، سيتم تخزين بيانات الاعتماد في مدير كلمات المرور على Chrome. إذا سجّل المستخدمون الدخول إلى Chrome، يمكنهم مزامنة كلمات مرور المستخدم على جميع الأجهزة. يمكن أيضًا مشاركة كلمات المرور التي تمت مزامنتها مع تطبيقات Android التي دمجت Smart Lock for Passwords API for Android للحصول على تجربة سلسة عبر أنظمة أساسية مختلفة.

دمج واجهة برمجة تطبيقات إدارة بيانات الاعتماد في موقعك الإلكتروني

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

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

• الصفحة العلوية هي نموذج تسجيل.
• من خلال النقر على الزر "تسجيل الدخول"، سينتقل المستخدمون إلى نموذج تسجيل الدخول.
• يحتوي كل من نماذج التسجيل وتسجيل الدخول على الخيارات المعتادة فيما يخص بيانات اعتماد الهوية/كلمة المرور والاتحاد، على سبيل المثال تسجيل الدخول بحساب Google وتسجيل الدخول على Facebook.

باستخدام واجهة برمجة تطبيقات إدارة بيانات الاعتماد، ستتمكن من إضافة الميزات التالية إلى الموقع الإلكتروني، مثل:

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

يمكنك تجربة هذه الميزات في موقع إلكتروني تجريبي باستخدام نموذج الرمز الخاص به.

ملاحظة: يجب استخدام واجهة برمجة التطبيقات هذه على مصادر آمنة، مثل نطاقات HTTPS أو المضيف المحلي.

إظهار "أداة اختيار الحساب" عند تسجيل الدخول

يمكنك استخدام navigator.credentials.get() للحصول على معلومات بيانات الاعتماد بين نقرة المستخدم على زر "تسجيل الدخول" والانتقال إلى نموذج تسجيل الدخول. سيعرض Chrome واجهة مستخدم محدد الحساب يمكن للمستخدم اختيار حساب منها.

تظهر واجهة مستخدم أداة اختيار الحساب للمستخدم ليختار حسابًا لتسجيل الدخول

الحصول على عنصر بيانات اعتماد كلمة المرور

لعرض بيانات اعتماد كلمة المرور كخيارات للحساب، استخدِم password: true.

navigator.credentials.get({
    password: true, // `true` to obtain password credentials
}).then(function(cred) {
    // continuation
    ...

استخدام بيانات اعتماد كلمة مرور لتسجيل الدخول

بعد أن يختار المستخدم الحساب، ستتلقى وظيفة تحديد كلمة المرور بيانات اعتماد كلمة المرور. يمكنك إرسالها إلى الخادم باستخدام fetch():

    // continued from previous example
}).then(function(cred) {
    if (cred) {
    if (cred.type == 'password') {
        // Construct FormData object
        var form = new FormData();

        // Append CSRF Token
        var csrf_token = document.querySelector('csrf_token').value;
        form.append('csrf_token', csrf_token);

        // You can append additional credential data to `.additionalData`
        cred.additionalData = form;

        // `POST` the credential object as `credentials`.
        // id, password and the additional data will be encoded and
        // sent to the url as the HTTP body.
        fetch(url, {           // Make sure the URL is HTTPS
        method: 'POST',      // Use POST
        credentials: cred    // Add the password credential object
        }).then(function() {
        // continuation
        });
    } else if (cred.type == 'federated') {
        // continuation

استخدام بيانات اعتماد موحّدة لتسجيل الدخول

لعرض الحسابات الموحّدة لمستخدم، أضِف federated إلى خيارات get() التي تأخذ مجموعة من موفّري الهوية.

عند تخزين حسابات متعددة في "مدير كلمات المرور"

navigator.credentials.get({
    password: true, // `true` to obtain password credentials
    federated: {
    providers: [  // Specify an array of IdP strings
        'https://accounts.google.com',
        'https://www.facebook.com'
    ]
    }
}).then(function(cred) {
    // continuation
    ...

يمكنك فحص السمة type لكائن بيانات الاعتماد لمعرفة ما إذا كان PasswordCredential (type == 'password') أو FederatedCredential (type == 'federated'). وإذا كانت بيانات الاعتماد هي FederatedCredential، يمكنك استدعاء واجهة برمجة التطبيقات المناسبة باستخدام المعلومات التي تتضمنها.

    });
} else if (cred.type == 'federated') {
    // `provider` contains the identity provider string
    switch (cred.provider) {
    case 'https://accounts.google.com':
        // Federated login using Google Sign-In
        var auth2 = gapi.auth2.getAuthInstance();

        // In Google Sign-In library, you can specify an account.
        // Attempt to sign in with by using `login_hint`.
        return auth2.signIn({
        login_hint: cred.id || ''
        }).then(function(profile) {
        // continuation
        });
        break;

    case 'https://www.facebook.com':
        // Federated login using Facebook Login
        // continuation
        break;

    default:
        // show form
        break;
    }
}
// if the credential is `undefined`
} else {
// show form

بيانات اعتماد المتجر

عندما يسجِّل أحد المستخدمين الدخول إلى موقعك الإلكتروني باستخدام نموذج، يمكنك استخدام navigator.credentials.store() لتخزين بيانات الاعتماد. وستتم مطالبة المستخدم بتخزينه أم لا. واستنادًا إلى نوع بيانات الاعتماد، استخدِم new PasswordCredential() أو new FederatedCredential() لإنشاء عنصر بيانات اعتماد تريد تخزينه.

يسأل Chrome المستخدمين عمّا إذا كانوا يريدون تخزين بيانات الاعتماد (أو موفّر خدمة الاتحاد)

إنشاء وتخزين بيانات اعتماد كلمة المرور من عنصر نموذج

يستخدم الرمز التالي سمات autocomplete من أجل ربط عناصر النموذج تلقائيًا بمَعلمات الكائن PasswordCredential.

HTML html <form id="form" method="post"> <input type="text" name="id" autocomplete="username" /> <input type="password" name="password" autocomplete="current-password" /> <input type="hidden" name="csrf_token" value="******" /> </form>

JavaScript

var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
    // continuation
});

إنشاء بيانات اعتماد موحّدة وتخزينها

// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
    id: id,                                  // The id for the user
    name: name,                              // Optional user name
    provider: 'https://accounts.google.com',  // A string that represents the identity provider
    iconURL: iconUrl                         // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
    // continuation
});

السماح للمستخدم بتسجيل الدخول مرة أخرى تلقائيًا

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

عندما يتم تسجيل دخول المستخدم تلقائيًا، سيظهر إشعار على الشاشة.

الحصول على عنصر بيانات اعتماد

navigator.credentials.get({
    password: true, // Obtain password credentials or not
    federated: {    // Obtain federation credentials or not
    providers: [  // Specify an array of IdP strings
        'https://accounts.google.com',
        'https://www.facebook.com'
    ]
    },
    unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
    if (cred) {
    // auto sign-in possible
    ...
    } else {
    // auto sign-in not possible
    ...
    }
});

من المفترض أن يبدو الرمز مشابهًا لما رأيته في قسم "إظهار محدد الحساب عند تسجيل الدخول". الفرق الوحيد هو أنك ستضبط unmediated: true.

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

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

إذا لم يتم استيفاء أي من هذه الشروط، سيتم رفض الدالة.

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

عندما يسجِّل المستخدم خروجه من موقعك الإلكتروني، تقع على عاتقك مسؤولية ضمان عدم تسجيل دخول المستخدم مرة أخرى تلقائيًا. ولضمان ذلك، توفّر واجهة برمجة التطبيقات Credential Management API آلية تُسمى التوسّط. يمكنك تفعيل وضع التوسّط من خلال طلب الرمز navigator.credentials.requireUserMediation(). ما دامت حالة توسّط المستخدم للمصدر مفعّلة، باستخدام unmediated: true مع navigator.credentials.get()، سيتم حلّ هذه الدالة باستخدام undefined.

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

navigator.credentials.requireUserMediation();

الأسئلة الشائعة

هل يمكن أن يسترد JavaScript على الموقع الإلكتروني كلمة مرور أولية؟ لا، يمكنك الحصول على كلمات المرور كجزء من "PasswordCredential" فقط، ولا يمكن كشفها بأي طريقة.

هل من الممكن تخزين 3 مجموعات من الأرقام لرقم تعريف باستخدام Credential Management API؟ ليس حاليًا. نشكرك على ملاحظاتك بشأن المواصفات.

هل يمكنني استخدام Credential Management API في إطار iframe؟ تقتصر واجهة برمجة التطبيقات على سياقات المستوى الأعلى. وسيتم حل المكالمات الواردة إلى .get() أو .store() في إطار iframe على الفور بدون تأثير.

هل يمكنني دمج إضافة Chrome لإدارة كلمات المرور مع Credential Management API؟ يمكنك إلغاء navigator.credentials وربطه بإضافة Chrome إلى بيانات اعتماد get() أو store().

المراجِع

للمزيد من المعلومات حول واجهة برمجة تطبيقات إدارة بيانات الاعتماد، يمكنك الاطّلاع على دليل الدمج للاطّلاع على مزيد من المعلومات.

• مواصفات واجهة برمجة التطبيقات
• مناقشات وملاحظات حول المواصفات
• مرجع واجهة برمجة تطبيقات MDN
• دليل دمج واجهة برمجة التطبيقات لإدارة بيانات الاعتماد
• العرض التوضيحي
• رمز المصدر التجريبي
• الدرس التطبيقي حول الترميز "تفعيل تسجيل الدخول التلقائي باستخدام واجهة برمجة تطبيقات إدارة بيانات الاعتماد"