دمج ميزة "نقرة واحدة" باستخدام إطار iframe

يمكن عرض ميزة "نقرة Google One" داخل إطار iframe (ويُشار إليه في ما يلي باسم "Intermedated Iframe" (إطار iframe المتوسط) الذي يستضيفه موقعك الإلكتروني. ليس هناك أي تغيير ملحوظ في تجربة المستخدم بنقرة واحدة عند استخدام إطار iframe وسيط.

يوفر التكامل المستند إلى إطار iframe المتوسط بعض المرونة والمخاطر:

• تضمين تجربة المستخدم بنقرة واحدة وخطوات تجربة المستخدم اللاحقة.

  بعد الانتهاء من تجربة "تجربة المستخدم بنقرة واحدة"، يمكنك عرض تدفق تجربة المستخدم اللاحق داخل إطار iframe المتوسط. وبالتالي، يمكن تضمين كل من ميزة "نقرة واحدة" و"تجربة المستخدم" اللاحقة في صفحة المحتوى الحالية. انظر المثال التالي.

  

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

• دمج "مرة واحدة" و"العرض في كل مكان"

  يتم تضمين جميع رموز الدمج الخاصة بميزة "نقرة واحدة" (استدعاء واجهة برمجة التطبيقات One Tap API والمعالجة اللاحقة لتجربة المستخدم) في إطار iframe المتوسط. في صفحات المحتوى التي قد تظهر فيها ميزة "نقرة واحدة"، ما عليك سوى تضمين إطار iframe المتوسط.

  تسمح هذه البنية بفصل المخاوف، وبالتالي تقلل من تكلفة الدمج والصيانة.

• تقييد نطاق عرض الرمز المميّز للمعرّف

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

  تعمل طريقة iframe المتوسطة أيضًا بشكل جيد مع مواقع الويب التي تحتوي من قبل على نطاق فرعي مخصص مرتبط بتسجيل الدخول (على سبيل المثال، Login.example.com) ونطاقات فرعية متعددة مرتبطة بالمحتوى (على سبيل المثال، Sports.example.com وgames.example.com).

• عرض النطاقات بنقرة واحدة:

  وفقًا لمتطلبات سياسات OAuth في Google، يجب أن تكون جميع النطاقات التي تتلقّى ردودًا OAuth مسجَّلة مسبقًا في وحدة تحكُّم واجهة برمجة تطبيقات Google. من خلال عملية الدمج العادية باستخدام One Tap، يحتاج المطوّرون إلى التسجيل المُسبَق في جميع النطاقات التي قد تعرضها ميزة "نقرة واحدة"، وذلك لأنّه سيتم تمرير الرموز المميّزة للمعرّفات إلى هذه النطاقات. تتيح بعض المواقع الإلكترونية لمستخدميها إنشاء نطاقات فرعية بشكل ديناميكي، وهو ما يستحيل تسجيله مسبقًا. ونتيجةً لذلك، لا يمكن عرض "نقرة واحدة" في هذه النطاقات الفرعية التي تم إنشاؤها ديناميكيًا.

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

• دعم AMP.

  وفقًا للإعدادات التلقائية، لا يمكن عرض ميزة "نقرة Google One" في صفحات AMP، وذلك للأسباب التالية:

  1. لا يُسمح بمكتبة JavaScript المخصّصة أو رمزها.

  2. قد تعرض ذاكرة التخزين المؤقت لصفحات AMP الصفحة من نطاق آخر (نطاق "عارِض صفحات AMP").

  يمكن إصلاح هذه المشكلة من خلال الاستفادة من بنية إطار iframe المتوسط. بعد إتمام عملية دمج ميزة "نقرة واحدة" في إطار iframe وسيط، يمكن لمطوّري البرامج تضمينها في صفحات AMP عن طريق إضافة مكوِّن <amp-onetap-google>.

  يمكن إعادة استخدام إطار iframe المتوسط نفسه على كل من صفحات AMP والصفحات التي ليست بتنسيق AMP.

• مخاطر الخصوصية:

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

• المخاطر الأمنية:

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

عرض نقرة واحدة في إطار iframe المتوسط

لعرض "نقرة واحدة" داخل إطار iframe المتوسط، ضَع مقتطف الرمز التالي في رمز HTML لإطار iframe المتوسط:

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-allowed_parent_origin="https://example.com">
</div>

في حال استخدام السمة data-allowed_parent_origin، يتم تشغيل "نقرة Google One" في وضع iframe المتوسط. يمكنك تعيين نطاق واحد أو قائمة نطاقات مفصولة بفواصل كقيمة السمة. يمكن أيضًا استخدام النطاقات الفرعية التي تتضمّن أحرف البدل.

(اختياري) عرض تجربة المستخدم اللاحقة في إطار Iframe المتوسط

في استجابة تسجيل الدخول، يمكنك عرض أي رمز HTML، ما قد يعرض بعض المحتوى المرئي للمستخدمين النهائيين. مثل طلب معلومات إضافية حول الملف الشخصي أو الاتفاق على بنود الخدمة بعد إرسال الصفحة، يمكنك عرض المزيد من الصفحات. على سبيل المثال، لدفعة أو اشتراك.

يمكنك تغيير حجم إطار iframe المتوسط:

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentResize(320);
</script>

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

في الصفحة الأولى بعد "تجربة المستخدم بنقرة واحدة"، عليك طلب الطريقة notifyParentResize() مرتَين للأسباب الموضَّحة أدناه.

1. ويتم ضبط إطار iframe المتوسط على مخفي عند انتهاء ميزة "تجربة المستخدم بنقرة واحدة".

2. وتكون قيمة السمة offsetHeight للعنصر هي 0 عندما يكون مخفيًا.

في الاستدعاء الأول، يمكنك تغيير حجم ارتفاع iframe إلى 1 بكسل فقط لجعله مرئيًا. بعد ذلك، بعد توفّر قيمة السمة offsetHeight، يمكنك تغيير حجمها إلى ارتفاع مناسب.

يعرض الرمز في المثال التالي كيفية التحقق من المصدر الرئيسي وتغيير حجم إطار iframe المتوسط لواجهة المستخدم بعد "تجربة المستخدم بنقرة واحدة".

<script>
window.onload = () => {
  google.accounts.id.intermediate.verifyParentOrigin(
    ["https://example.com","https://example-com.cdn.ampproject.org"],
    () => {
      google.accounts.id.intermediate.notifyParentResize(1);
      window.setTimeout(() => {
        let h = document.getElementById('container').offsetHeight;
        google.accounts.id.intermediate.notifyParentResize(h);
      }, 200);
    },
    () => {
      document.getElementById('container').style.display = 'none';
      document.getElementById('warning').innerText = 'Warning: the page is displayed in an unexpected domain!';
    }
  );
};
</script>

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

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

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentDone();
</script>

إذا تم تخطي تدفق تجربة المستخدم، يجب استدعاء طريقة notifyParentClose بدلاً من ذلك.

تضمين إطار iframe المتوسط في صفحات HTML

ضَع مقتطف الرمز التالي في أي صفحات HTML تريد عرضها من خلال ميزة "نقرة Google":

<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
     data-src="https://example.com/onetap_iframe.html">
</div>

السمة data-src هي معرّف الموارد المنتظم (URI) لإطار iframe المتوسط.