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

Eiji Kitamura

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

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

ما هي واجهة برمجة التطبيقات Credential Management API؟

تتيح Credential Management API للمطوّرين تخزين كلمة المرور واستردادها. بيانات الاعتماد وبيانات الاعتماد الموحدة وتوفر 3 وظائف:

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

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

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

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

دمج Credential Management API مع موقعك الإلكتروني

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

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

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

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

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

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

إظهار "مُحدِّد الحساب" عند تسجيل الدخول

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

بيانات الاعتماد الخاصة بمتجر Play

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

يسأل Chrome المستخدمين عما إذا كانوا يريدون تخزين بيانات الاعتماد (أو موفّر خدمة اتحاد).
يسأل 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.
  • لدى المستخدم بيانات اعتماد واحدة فقط مخزَّنة للمصدر.
  • لم يسجِّل المستخدم خروجه صراحةً في الجلسة السابقة.

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

مخطَّط تدفق عنصر بيانات الاعتماد

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

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

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

navigator.credentials.requireUserMediation();
رسم بياني لتدفق تسجيل الدخول التلقائي

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

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

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

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

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

الموارد

لمزيد من المعلومات حول Credential Management API، يُرجى الاطّلاع على دليل الدمج.