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

Eiji Kitamura

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

واجهة برمجة التطبيقات لوضع الزر

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

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

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

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

في واجهة مستخدم وضع الزر، يكون مربّع حوار تسجيل الدخول المعروض أكبر حجمًا مقارنةً بوضع التطبيق المصغّر، وبالتالي يجب أن يكون رمز العلامة التجارية بالحجم نفسه للحفاظ على التناسق المرئي. مع أنّ الحد الأدنى لحجم الرمز في وضع الأداة هو 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 على الكمبيوتر المكتبي، مع رمز أكبر.

يمكنك تجربة هذه الميزة بنفسك باستخدام الإصدار 125 من Chrome على الرابط https://fedcm-demo-rp.dev/active-mode.

يسجّل المستخدم الدخول إلى RP باستخدام 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 أو سجِّل في التجربة الأصلية لواجهة برمجة التطبيقات "وضع الزر".
  • يحدِّد موفِّر الهوية ما يلي في ملف إعدادات موفِّر الهوية:
{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

المشاركة في التجربة الأصلية

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

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

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

تتوفّر مرحلة التجربة والتقييم لواجهة برمجة التطبيقات Button Mode API من الإصدار 125 إلى الإصدار 130 من Chrome.

  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 في الإصدار 125 من Chrome

CORS

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

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

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

SameSite=None

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

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