المصادقة باستخدام تأكيد الدفع الآمن

Eiji Kitamura

يمكن للتجّار استخدام ميزة "تأكيد الدفع الآمن" (SPC) كجزء من عملية مصادقة قوية للعملاء (SCA) لبطاقة ائتمان أو حساب مصرفي معيّن. تُجري WebAuthn عملية المصادقة (غالبًا من خلال المقاييس الحيوية). يجب تسجيل WebAuthn مسبقًا، ويمكنك الاطّلاع على مزيد من المعلومات حول ذلك في مقالة تسجيل تأكيد دفع آمن.

آلية عمل عملية التنفيذ النموذجية

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

لنطّلِع على خطوات المصادقة:

1. يقدّم العميل بيانات اعتماد الدفع (مثل معلومات بطاقة الائتمان) للتاجر.
2. يطلب التاجر من جهة إصدار بيانات اعتماد الدفع أو المصرف (الطرف المعتمد أو الجهة المحظورة) جهة إصدار بيانات اعتماد الدفع إذا احتاجت الجهة المسدِّدة إلى مصادقة منفصلة. وقد يحدث هذا التبادل، على سبيل المثال، مع EMV® 3-D Secure.
   • إذا أراد موفّر الحساب الردّ على التاجر لاستخدام ميزة "الدفع بدون إنترنت"، وإذا سبق للمستخدم تسجيله، يردّ موفّر الحساب بقائمة أرقام تعريف بيانات الاعتماد التي سجّلها المدفِع واختبارًا.
   • إذا لم تكن المصادقة مطلوبة، يمكن للتاجر مواصلة إكمال المعاملة.
3. إذا كانت المصادقة مطلوبة، يحدّد التاجر ما إذا كان المتصفّح متوافقًا مع بروتوكول SPC.
   • إذا كان المتصفّح لا يتوافق مع بروتوكول SPC، يمكنك متابعة عملية مصادقة العميل الحالية.
4. يطلب التاجر الحصول على إذن بمعالجة البيانات الشخصية. يعرض المتصفّح مربّع حوار التأكيد.
   • إذا لم يتم تمرير أرقام تعريف بيانات الاعتماد من مقدّم الخدمة، يمكنك الرجوع إلى مسار المصادقة الحالي. بعد إتمام عملية المصادقة بنجاح، ننصحك باستخدام تسجيل SPC لتسهيل عمليات المصادقة المستقبلية.
5. يتحقق المستخدم من مبلغ الدفعة ووجهتها ويصادق عليها من خلال فتح قفل الجهاز.
6. يتلقّى التاجر بيانات اعتماد من المصادقة.
7. يتلقّى الجهة المحظورة بيانات الاعتماد من التاجر وتتحقّق من أصالتها.
8. يرسل موفّر الدفع نتائج عملية إثبات الهوية إلى التاجر.
9. يعرض التاجر للمستخدم رسالة للإشارة إلى ما إذا كانت عملية الدفع ناجحة أو غير ناجحة.

ملاحظة مهمة: لتقديم تجربة أوّلية سريعة لميزة "الدفع بدون متجر"، تم تصميم واجهة برمجة التطبيقات هذه على أساس عمليات التنفيذ الحالية لواجهات برمجة التطبيقات Payment Request وPayment Handler. هناك الآن اتفاق عام على استكشاف تصميم SPC مستقل عن طلب الدفع. نتوقّع (بدون جدول زمني ملموس) أن تبتعد شركة SPC عن مصادر طلبات الدفع. من المفترض أن يؤدي ذلك إلى تحسين رصد الميزات واستخدامها وغيرها من سمات واجهة برمجة التطبيقات

.

رصد الميزات

لمعرفة ما إذا كانت ميزة "السلامة الشخصية" متاحة في المتصفّح، يمكنك إرسال مكالمة وهمية إلى canMakePayment().

انسخ الرمز التالي والصقه لعرض ميزة رصد الأسعار المتغيرة على موقع التاجر الإلكتروني.

const isSecurePaymentConfirmationSupported = async () => {
  if (!'PaymentRequest' in window) {
    return [false, 'Payment Request API is not supported'];
  }

  try {
    // The data below is the minimum required to create the request and
    // check if a payment can be made.
    const supportedInstruments = [
      {
        supportedMethods: "secure-payment-confirmation",
        data: {
          // RP's hostname as its ID
          rpId: 'rp.example',
          // A dummy credential ID
          credentialIds: [new Uint8Array(1)],
          // A dummy challenge
          challenge: new Uint8Array(1),
          instrument: {
            // Non-empty display name string
            displayName: ' ',
            // Transparent-black pixel.
            icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==',
          },
          // A dummy merchant origin
          payeeOrigin: 'https://non-existent.example',
        }
      }
    ];

    const details = {
      // Dummy shopping details
      total: {label: 'Total', amount: {currency: 'USD', value: '0'}},
    };

    const request = new PaymentRequest(supportedInstruments, details);
    const canMakePayment = await request.canMakePayment();
    return [canMakePayment, canMakePayment ? '' : 'SPC is not available'];
  } catch (error) {
    console.error(error);
    return [false, error.message];
  }
};

isSecurePaymentConfirmationSupported().then(result => {
  const [isSecurePaymentConfirmationSupported, reason] = result;
  if (isSecurePaymentConfirmationSupported) {
    // Display the payment button that invokes SPC.
  } else {
    // Fallback to the legacy authentication method.
  }
});

مصادقة المستخدم

لمصادقة المستخدم، استخدِم طريقة PaymentRequest.show() مع المَعلمتَين secure-payment-confirmation وWebAuthn:

• PublicKeyCredentialRequestOptions
• المَعلمات الأخرى المتعلّقة بالدفع على منصة التاجر

في ما يلي المَعلمات التي يجب تقديمها إلى سمة data الخاصة بطريقة الدفع، SecurePaymentConfirmationRequest.

المَعلمة	الوصف
rpId	اسم مضيف مصدر الجهة المحظورة بصفتها رقم تعريف الجهة المحظورة
challenge	تحدّي عشوائي يمنع هجمات إعادة التشغيل
credentialIds	مصفوفة من معرّفات بيانات الاعتماد في مصادقة WebAuthn، يقبل الحقل allowCredentials صفيفًا من عناصر PublicKeyCredentialDescriptor، ولكن في بروتوكول SPC، لا يمكنك إرسال سوى قائمة بأرقام تعريف بيانات الاعتماد.
payeeName (اختياري)	اسم المدفوع له.
payeeOrigin	مصدر جهة الدفع في السيناريو المذكور أعلاه، يكون ذلك هو بلد إقامة التاجر.
instrument	سلسلة لسمة displayName وعنوان URL لسمة icon يشير إلى مرجع صورة يجب جلب رمز بنجاح وعرضه لنجاح الطلب، وذلك من خلال قيمة منطقية اختيارية (يتم ضبطها تلقائيًا على true) لـ iconMustBeShown تحدّد الرمز.
timeout	مهلة توقيع المعاملة بالمللي ثانية
extensions	تمّت إضافة الإضافات إلى طلب WebAuthn. ولا يتعين عليك تحديد الإضافة "الدفع" بنفسك.

تحقق من مثال التعليمة البرمجية هذا:

// After confirming SPC is available on this browser via a feature detection,
// fetch the request options cross-origin from the RP server.
const options = fetchFromServer('https://rp.example/spc-auth-request');
const { credentialIds, challenge } = options;

const request = new PaymentRequest([{
  // Specify `secure-payment-confirmation` as payment method.
  supportedMethods: "secure-payment-confirmation",
  data: {
    // The RP ID
    rpId: 'rp.example',

    // List of credential IDs obtained from the RP server.
    credentialIds,

    // The challenge is also obtained from the RP server.
    challenge,

    // A display name and an icon that represent the payment instrument.
    instrument: {
      displayName: "Fancy Card ****1234",
      icon: "https://rp.example/card-art.png",
      iconMustBeShown: false
    },

    // The origin of the payee (merchant)
    payeeOrigin: "https://merchant.example",

    // The number of milliseconds to timeout.
    timeout: 360000,  // 6 minutes
  }
}], {
  // Payment details.
  total: {
    label: "Total",
    amount: {
      currency: "USD",
      value: "5.00",
    },
  },
});

try {
  const response = await request.show();

  // response.details is a PublicKeyCredential, with a clientDataJSON that
  // contains the transaction data for verification by the issuing bank.
  // Make sure to serialize the binary part of the credential before
  // transferring to the server.
  const result = fetchFromServer('https://rp.example/spc-auth-response', response.details);
  if (result.success) {
    await response.complete('success');
  } else {
    await response.complete('fail');
  }
} catch (err) {
  // SPC cannot be used; merchant should fallback to traditional flows
  console.error(err);
}

تؤدي دالة .show() إلى إنشاء عنصر PaymentResponse باستثناء أنّ details يحتوي على بيانات اعتماد للمفتاح العام مع clientDataJSON يحتوي على بيانات المعاملة (payment) ليتمكّن مقدّم الخدمة من إثبات صحتها.

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

كيفية التحقّق من المعاملة من قِبل موفِّر الدفع

إنّ التحقّق من بيانات المعاملات على خادم RP هو الخطوة الأهم في عملية الدفع.

للتحقّق من بيانات المعاملات، يمكن للجهة المحظورة اتّباع عملية التحقّق من تأكيد المصادقة في WebAuthn. بالإضافة إلى ذلك، يجب عليه إثبات ملكية payment.

مثال على الحمولة في clientDataJSON:

{
  "type":"payment.get",
  "challenge":"SAxYy64IvwWpoqpr8JV1CVLHDNLKXlxbtPv4Xg3cnoc",
  "origin":"https://spc-merchant.glitch.me",
  "crossOrigin":false,
  "payment":{
    "rp":"spc-rp.glitch.me",
    "topOrigin":"https://spc-merchant.glitch.me",
    "payeeOrigin":"https://spc-merchant.glitch.me",
    "total":{
      "value":"15.00",
      "currency":"USD"
    },
    "instrument":{
      "icon":"https://cdn.glitch.me/94838ffe-241b-4a67-a9e0-290bfe34c351%2Fbank.png?v=1639111444422",
      "displayName":"Fancy Card 825809751248"
    }
  }
}

ملاحظة: تستخدم السمة type الرمز payment.get بدلاً من public-key. قد يتطلّب ذلك تعديل بعض مكتبات WebAuthn الحالية، إذا اخترت استخدام إحدى هذه المكتبات.

• يتطابق rp مع مصدر RP.
• تتطابق السمة topOrigin مع مصدر المستوى الأعلى الذي يتوقّعه الجهة المحظورة (مصدر التاجر في المثال أعلاه).
• يتطابق payeeOrigin مع مصدر مستلم الدفعة الذي كان من المفترض أن يتم عرضه للمستخدم.
• يتطابق total مع مبلغ المعاملة الذي كان من المفترض أن يتم عرضه على المستخدم.
• ويتطابق instrument مع تفاصيل وسيلة الدفع التي كان من المفترض أن تظهر للمستخدم.

const clientData = base64url.decode(response.clientDataJSON);
const clientDataJSON = JSON.parse(clientData);

if (!clientDataJSON.payment) {
  throw 'The credential does not contain payment payload.';
}

const payment = clientDataJSON.payment;
if (payment.rp !== expectedRPID ||
    payment.topOrigin !== expectedOrigin ||
    payment.payeeOrigin !== expectedOrigin ||
    payment.total.value !== '15.00' ||
    payment.total.currency !== 'USD') {
  throw 'Malformed payment information.';
}

بعد استيفاء جميع معايير التحقّق، يمكن لمسؤول المراجعة إبلاغ العميل بأنّ المعاملة تمت بنجاح.

الخطوات التالية

• الاطّلاع على النظرة العامة حول تأكيد الدفع الآمن
• مزيد من المعلومات حول التسجيل باستخدام تأكيد الدفع الآمن