تعديلات من خلال FedCM: مرحلة التجربة والتقييم في Button Mode API وCORS وSameSite

Eiji Kitamura

من Chrome 125، تبدأ Button Mode API مرحلة التجربة والتقييم على الكمبيوتر المكتبي باستخدام Button Mode API، يمكن لموفري الهوية استخدام واجهة برمجة التطبيقات FedCM API حتى إذا لم يكن لدى المستخدمين جلسات نشطة لموفِّر الهوية عند طلب بيانات من واجهة برمجة التطبيقات. يمكن للمستخدمين بعد ذلك تسجيل الدخول إلى أحد المواقع الإلكترونية باستخدام حسابهم الموحّد بدون تم الانتقال إلى موقع موفِّر الهوية (idP). واجهة مستخدم FedCM في وضع الزر تكون أكثر بروزًا مقارنةً بالمخطط من تدفق الأداة الحالي لأنه يحصره المستخدم ويعكس نية المستخدم لتسجيل الدخول بشكل أفضل.

Button Mode API

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

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

تضيف Button Mode API الجديدة وضعًا جديدًا لواجهة المستخدم يُسمى وضع button (الزر). وعلى عكس التطبيق المصغَّر، فلا يعني ذلك أن يتم استدعاء وضع الزر بمجرد وصول المستخدم الجهة المحظورة وإنما من المفترض أن يتم استدعاؤه عندما يبدأ المستخدم عملية تسجيل الدخول. مثل الضغط على "تسجيل الدخول باستخدام موفِّر الهوية" .

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

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

{
  // ... Other settings (like endpoints) here
  "branding": {
    "icons": [
      {
        "url": "https://size-25px-image",
        "size": 25,
      },
      {
        "url": "https://size-40px-image",
        "size": 40
      }
    ]
  }
}
باستخدام وضع الزر، يتم عرض مربع حوار نمطي في أعلى منتصف صفحة Chrome على أجهزة الكمبيوتر المكتبي.
باستخدام وضع الزر، يتم عرض مربّع حوار نمطي في أعلى منتصف نافذة Chrome على أجهزة الكمبيوتر المكتبي مع رمز أكبر.

جربه بنفسك باستخدام Chrome 125 على https://fedcm-rp-demo.glitch.me/button_flow.

مستخدم يسجّل الدخول إلى الجهة المحظورة باستخدام Button Mode API.

لاستخدام Button Mode API:

  • يمكنك تفعيل الميزة التجريبية "FedCmButtonMode" في "chrome://flags".
  • تأكَّد من استدعاء واجهة برمجة التطبيقات وراء التفعيل العابر للمستخدم. مثل النقر على زر.
  • يمكنك استدعاء واجهة برمجة التطبيقات باستخدام المعلَمة mode على النحو التالي:
  return await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: "https://idp.example/config.json",
        clientId: "123",
        nonce:"456",
      }],
      mode: "button"
    }
  });

سيرسل المتصفّح مَعلمة جديدة إلى تأكيد المعرّف. نقطة نهاية التي تمثّل نوع الطلب من خلال تضمين mode=button:

POST /fedcm_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity
account_id=123&client_id=client1234&nonce=Ct60bD&disclosure_text_shown=true&is_auto_selected=false&mode=button

رصد الميزات

لتحديد ما إذا كان المتصفّح مؤهَّلاً لاستخدام وضع الزرّ، يمكنك فحصها باستخدام التعليمة البرمجية التالية:

let supportsFedCmMode = false;
try {
  navigator.credentials.get({
    identity: Object.defineProperty(
      {}, 'mode', {
        get: function () { supportsFedCmMode = true; }
      }
    )
  });
} catch(e) {}

if (supportsFedCmMode) {
  // The button mode is supported.
}

استخدام خيار آخر للحساب

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

لتفعيل خيار استخدام حساب آخر:

  • تفعيل الميزة التجريبية "FedCmUseOtherAccount" في "chrome://flags" أو تسجيل مرحلة التجربة والتقييم في Button Mode API
  • يحدِّد موفِّر الهوية ما يلي في إعدادات موفِّر الهوية (idP). ملف:
{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

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

يمكنك تجربة واجهة برمجة تطبيقات Button Mode API من خلال تفعيل Chrome إبلاغ chrome://flags#fedcm-button-mode على الإصدار 125 من Chrome أو الإصدارات الأحدث.

يمكن لموفِّري الهوية أيضًا تفعيل "وضع الزر" من خلال تسجيل مرحلة تجريبية للمصدر على النحو التالي:

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

مرحلة التجربة والتقييم في Button Mode API متاحة من خلال Chrome 125 حتى Chrome 130.

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

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

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

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

ستكون سياسة CORS وSameSite=None مطلوبة في Chrome 125

CORS

سيفرض Chrome CORS على المعرّف تأكيد نقطة نهاية بدءًا من الإصدار 125 من Chrome.

تُعد CORS (مشاركة الموارد المشتركة المنشأ) نظامًا يتألف من نقل عناوين HTTP التي تحدد ما إذا كانت المتصفحات تحظر رمز JavaScript للواجهة الأمامية من الوصول إلى ردود الطلبات الواردة من عدّة مصادر نقطة نهاية تأكيد رقم التعريف مفعَّلة يجب أن يستجيب خادم موفِّر الهوية (idP) للطلب باستخدام عناوين إضافية. تشير رسالة الأشكال البيانية فيما يلي مثال على عنوان استجابة لطلب من https://fedcm-rp-demo.glitch.me:

Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true

SameSite=بدون

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

في FedCM، يرسل Chrome ملفات تعريف الارتباط إلى الحسابات نقطة نهاية، تأكيد المعرّف نقطة نهاية إلغاء الربط نقطة النهاية. بدءًا من Chrome 125، سيرسل Chrome هذه الطلبات المعتمدة باستخدام ملفات تعريف الارتباط فقط تم وضع علامة "SameSite=None" عليها بشكل صريح.