تحديثات FedCM: واجهة برمجة تطبيقات حالة تسجيل الدخول لموفِّر الهوية وتلميح تسجيل الدخول والمزيد

يشحن متصفِّح Chrome 116 إمكانات برنامج FedCM، مثل واجهة برمجة التطبيقات Login Hint API وUser Info API وواجهة برمجة التطبيقات RP Context API، ويبدأ فترة تجريبية أصلية خاصة بواجهة برمجة التطبيقات لميزة تسجيل الدخول إلى موفِّر الهوية (IdP).

في Chrome 116، يشحن Chrome ميزات إدارة بيانات الاعتماد المتحدّة (FedCM) الجديدة التالية:

  • Login Hint API: حدِّد حساب المستخدم المفضَّل لتسجيل الدخول.
  • User Info API: يمكنك استرجاع معلومات المستخدم المكرّر الزيارة حتى يتمكّن موفِّر الهوية (IdP) من عرض زر تسجيل دخول مخصَّص داخل إطار iframe.
  • RP Context API: استخدِم عنوانًا مختلفًا عن "تسجيل الدخول" في مربّع حوار FedCM.

بالإضافة إلى ذلك، يبدأ Chrome تجربة مصدر لواجهة برمجة التطبيقات لحالة تسجيل الدخول لموفِّر الهوية (IdP). إنّ واجهة برمجة التطبيقات لحالة تسجيل الدخول لموفِّر الهوية (IdP) هي أحد المتطلبات وسيحدث تغيير مهم عند شحنها. إذا كان لديك تطبيق حالي لـ FedCM، فتأكد من المشاركة في مرحلة التجربة والتقييم.

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

عند استدعاء برنامج FedCM، يعرض المتصفِّح الحساب الذي تم تسجيل الدخول إليه من خلال موفِّر الهوية المحدّد. عندما يتوافق موفِّر الهوية مع حسابات متعددة، يدرج جميع الحسابات التي تم تسجيل الدخول إليها.

مربّع حوار FedCM يعرض حسابات مستخدمين متعددة
مربّع حوار لـ FedCM يعرض حسابات مستخدمين متعددة

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

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

{
  "accounts": [{
    "id": "demo1",
    "email": "demo1@example.com",
    "name": "John Doe",
    "login_hints": ["demo1", "demo1@example.com"],
    ...
  }, {
    "id": "demo2",
    "email": "demo2@example.com",
    "name": "Jane Doe",
    "login_hints": ["demo2", "demo2@example.com"],
    ...
  }, ...]
}

من خلال تمرير login_hints في قائمة الحسابات، يمكن للجهة المحظورة استدعاء navigator.credentials.get() باستخدام السمة loginHint كما هو موضّح في نموذج الرمز التالي لعرض الحساب المحدّد بشكل انتقائي:

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "123",
      nonce: nonce,
      loginHint : "demo1@example.com"
    }]
  }
});

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

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

زر "تسجيل الدخول باستخدام حساب Google"
زر "تسجيل الدخول باستخدام حساب Google"
زر تسجيل الدخول المخصص باستخدام حساب Google
الزر المخصّص "تسجيل الدخول باستخدام حساب Google"

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

إنّ واجهة برمجة تطبيقات User Info API، المتوفرة للشحن في Chrome 116، توفّر وسيلة لموفِّر الهوية (IdP) للحصول على معلومات المستخدم المكرّر من الخادم بدون الاعتماد على ملفات تعريف الارتباط التابعة لجهات خارجية.

من المتوقّع أن يطلب موفِّر الهوية (IdP) واجهة برمجة التطبيقات من داخل إطار iframe مضمّن على موقع الجهة المحظورة على الويب كي تتمكّن من استرداد معلومات المستخدم وعرض زر مخصّص كما لو كان جزءًا من سطح الجهة المحظورة. من خلال طلب البيانات من واجهة برمجة التطبيقات، يطلب المتصفّح نقطة نهاية قائمة الحسابات، ثم يعرض مصفوفة من معلومات المستخدم في الحالات التالية:

  • سجَّل المستخدم الدخول في السابق إلى الجهة المحظورة من خلال موفِّر الهوية من خلال FedCM على نسخة المتصفّح نفسها ولم يتم محو البيانات.
  • سجَّل المستخدم الدخول إلى موفِّر الهوية على نسخة المتصفِّح نفسها.
// Iframe displaying a page from the https://idp.example origin
const user_info = await IdentityProvider.getUserInfo({
    configUrl: "https://idp.example/fedcm.json",
    clientId: "client1234"
});

// IdentityProvider.getUserInfo returns an array of user information.
if (user_info.length > 0) {
  // Chrome puts returning accounts first, so the first account received is guaranteed to be a returning account.
  const name = user_info[0].name;
  const given_name = user_info[0].given_name;
  const display_name = given_name ? given_name : name;
  const picture = user_info[0].picture;
  const email = user_info[0].email;
  // Renders the personalized sign-in button with the information above.
}

تجدر الإشارة إلى أنّه للسماح باستدعاء IdentityProvider.getUserInfo() من داخل إطار iframe له نفس مصدر موفِّر الهوية، يجب أن تسمح ترميز HTML المُضمَّنة بذلك صراحةً من خلال سياسة الأذونات الخاصة بـ identity-credentials-get.

<iframe src="https://fedcm-idp-demo.glitch.me" allow="identity-credentials-get"></iframe>

يمكنك الاطّلاع عليه بشكل عملي على الرابط https://fedcm-rp-demo.glitch.me/button.

واجهة برمجة تطبيقات RP Context

تتيح واجهة برمجة التطبيقات RP Context API، المتوفرة في Chrome 116، للجهة المحظورة تعديل السلسلة في واجهة مستخدم مربّع حوار "المراسلة عبر السحابة الإلكترونية من Firebase" بحيث يمكنها استيعاب سياقات المصادقة محدّدة مسبقًا. يُرجى الاطّلاع على لقطات الشاشة التالية لمعرفة الخيارات المختلفة:

مربع حوار FedCM يظهر مع
يتم عرض مربّع حوار "المراسلة عبر السحابة الإلكترونية من Firebase" مع "تسجيل الدخول إلى ****". وهذا هو الخيار التلقائي في حال عدم تحديد سياق الجهة المحظورة.
مربع حوار FedCM يظهر مع
يتم عرض مربّع حوار FedCM مع عبارة "Sign up to ****"
مربع حوار FedCM يظهر مع
عرض مربّع حوار FedCM مع عبارة "متابعة إلى ****"
مربع حوار FedCM يظهر مع
يتم عرض مربّع حوار FedCM مع عبارة "Use ****"

الاستخدام بسيط: يمكنك توفير السمة identity.context من بين "signin" (الخيار التلقائي) أو "signup" أو "use" أو "continue".

const credential = await navigator.credentials.get({
  identity: {
    // "signin" is the default, "signup", "use" and "continue" 
    // can also be used
    context: "signup", 
    providers: [{
      configURL: "https://idp.example/fedcm.json",
      clientId: "1234",
    }],
  }
});

مرحلة التجربة والتقييم في واجهة برمجة التطبيقات لحالة تسجيل الدخول إلى موفِّر الهوية (IdP)

يبدأ Chrome تجربة مصدر واجهة برمجة التطبيقات لحالة تسجيل الدخول لموفِّر الهوية (IdP) على جهاز كمبيوتر سطح المكتب من الإصدار 116 من Chrome، يليها متصفّح Android Chrome لاحقًا. تتيح لك الفترات التجريبية الأصلية إمكانية الوصول إلى ميزة جديدة أو تجريبية لإنشاء وظائف يمكن للمستخدمين تجربتها لفترة محدودة قبل أن تصبح الميزة متاحة للجميع.

واجهة برمجة التطبيقات لحالة تسجيل الدخول لموفِّر الهوية هي آلية يُعلِم فيها موفِّر الهوية المتصفِّح بحالة تسجيل دخول المستخدم على موفِّر الهوية (IdP). باستخدام واجهة برمجة التطبيقات هذه، يمكن للمتصفّح تقليل الطلبات غير الضرورية إلى موفِّر الهوية والحدّ من هجمات التوقيت المحتملة.

إبلاغ المتصفِّح بحالة تسجيل دخول المستخدم

ويمكن لموفِّر الهوية إرسال إشارة إلى المتصفِّح بحالة تسجيل دخول المستخدم من خلال إرسال عنوان HTTP أو من خلال استدعاء واجهة برمجة تطبيقات JavaScript، أو عندما يكون المستخدم مسجّلاً الدخول في موفِّر الهوية، أو عندما يسجِّل المستخدم الخروج من جميع حسابات موفِّر الهوية. ويسجّل المتصفّح الحالة التالية: "تسجيل الدخول" أو "تسجيل الخروج" أو "غير معروف" (تلقائيًا).

للإشارة إلى أنّ المستخدم سجّل الدخول، أرسِل عنوان HTTP يتضمّن IdP-SignIn-Status: action=signin في عملية تنقّل على المستوى الأعلى أو في طلب مورد فرعي من المصدر نفسه:

IdP-SignIn-Status: action=signin

بدلاً من ذلك، يمكنك استدعاء واجهة برمجة تطبيقات JavaScript IdentityProvider.login() من مصدر IdP:

IdentityProvider.login()

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

للإشارة إلى أنّ المستخدم سجّل الخروج من جميع حساباته، أرسِل عنوان HTTP IdP-SignIn-Status: action=signout-all في شريط التنقّل على المستوى الأعلى أو في طلب مورد فرعي من المصدر نفسه، وذلك وفقًا لما يلي:

IdP-SignIn-Status: action=signout-all

بدلاً من ذلك، يمكنك استدعاء واجهة برمجة تطبيقات JavaScript IdentityProvider.logout() من مصدر IdP:

IdentityProvider.logout()

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

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

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

ماذا لو انتهت صلاحية جلسة المستخدم؟ السماح للمستخدم بتسجيل الدخول من خلال عملية تسجيل دخول ديناميكية

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

سيعرض مربع حوار FedCM رسالة، كما هو موضح في الصورة التالية:

مربّع حوار FedCM يقترح تسجيل الدخول إلى موفِّر الهوية
مربع حوار في FedCM يقترح تسجيل الدخول إلى موفِّر الهوية
.

بالنقر على الزر متابعة، يفتح المتصفِّح نافذة منبثقة ترسل المستخدم إلى صفحة تسجيل الدخول لموفِّر الهوية (IdP).

نافذة منبثقة تظهر بعد النقر على زر تسجيل الدخول إلى موفِّر الهوية (IdP).
تظهر نافذة منبثقة بعد النقر على زر تسجيل الدخول إلى زر موفِّر الهوية.

يمكن تحديد عنوان URL لصفحة تسجيل الدخول (والذي يجب أن يكون مصدر موفِّر الهوية) باستخدام signin_url كجزء من ملف إعداد موفِّر الهوية.

{
  "accounts_endpoint": "/auth/accounts",
  "client_metadata_endpoint": "/auth/metadata",
  "id_assertion_endpoint": "/auth/idtokens",
  "signin_url": "/signin"
  }
}

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

  • أرسِل عنوان IdP-SignIn-Status: action=signin أو استدعِ واجهة برمجة التطبيقات IdentityProvider.login() لإعلام المتصفّح بأنّه تم تسجيل دخول المستخدم.
  • استدعِ "IdentityProvider.close()" لإغلاق نفسه (النافذة المنبثقة).
// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
  // Signal to the browser that the user has signed in.
  IdentityProvider.close();
}
تسجيل دخول مستخدم إلى جهة محظورة بعد تسجيل الدخول إلى موفِّر الهوية باستخدام خدمة FedCM

يمكنك تجربة سلوك واجهة برمجة التطبيقات لميزة تسجيل الدخول إلى موفِّر الهوية (IdP) في العرض التوضيحي الخاص بنا. تنتهي صلاحية الجلسة بعد ثلاث دقائق من تسجيل الدخول إلى موفِّر الهوية (IdP) التجريبي. يمكنك بعد ذلك مراقبة عملية تسجيل الدخول إلى موفِّر الهوية من خلال سلوك النافذة المنبثقة.

المشاركة في مرحلة التجربة والتقييم

يمكنك تجربة واجهة برمجة تطبيقات حالة تسجيل الدخول لموفِّر الهوية على الجهاز من خلال تفعيل علامة
Chrome
chrome://flags#fedcm-idp-signin-status-api.
الإصدار 116 من Chrome أو إصدار أحدث.

يمكنك أيضًا تفعيل واجهة برمجة التطبيقات IdP Sign-In Status API من خلال تسجيل مرحلة التجربة والتقييم مرتين:

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

إنّ مرحلة التجربة والتقييم على واجهة برمجة التطبيقات الخاصة بحالة تسجيل الدخول لموفِّر الهوية (IdP) متاحة من الإصدار 116 من Chrome حتى الإصدار 119 من متصفّح Chrome.

تسجيل مرحلة تجريبية للتقييم في موفِّر الهوية (IdP)

  1. انتقِل إلى صفحة تسجيل مرحلة التجربة والتقييم.
  2. انقر على زر Register (تسجيل) واملأ النموذج لطلب رمز مميّز.
  3. أدخِل أصل موفّر الهوية كـ مصدر الويب.
  4. انقر على إرسال.
  5. أضِف العلامة <meta> لبرامج origin-trial إلى عناوين الصفحات التي تستخدم السمة IdentityProvider.close(). على سبيل المثال، قد يبدو ما يلي:
    <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

تسجيل مرحلة تجريبية أصلية تابعة لجهة خارجية في الجهة المحظورة

  1. انتقِل إلى صفحة تسجيل مرحلة التجربة والتقييم.
  2. انقر على زر Register (تسجيل) واملأ النموذج لطلب رمز مميّز.
  3. أدخِل أصل موفّر الهوية كـ مصدر الويب.
  4. تحقَّق من مطابقة الجهات الخارجية لإدخال الرمز المميّز باستخدام JavaScript على مصادر أخرى.
  5. انقر على إرسال.
  6. يمكنك تضمين الرمز المميّز الذي تم إصداره على موقع إلكتروني تابع لجهة خارجية.

لتضمين الرمز المميّز على موقع إلكتروني تابع لجهة خارجية، أضِف الرمز التالي إلى مكتبة JavaScript أو حزمة تطوير البرامج (SDK) التي يتم عرضها من مصدر موفِّر الهوية.

const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);

استبدِل TOKEN_GOES_HERE برمزك المميّز.

التفاعل ومشاركة الملاحظات

إذا كانت لديك ملاحظات أو واجهت أي مشاكل أثناء الاختبار، يمكنك مشاركتها على crbug.com.

تصوير دان كريستيان بدوريت على Unسبلاش