دمج نقرة واحدة عبر إطار iframe

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

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

  • تجربة المُستخدِم المضمّنة بنقرة واحدة والتدفق التالي للمستخدم.

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

    مثال على تجربة المُستخدِم المضمّنة مع إطار iframe المتوسط.

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

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

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

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

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

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

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

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

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

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

  • دعم AMP:

    يتعذّر بشكلٍ تلقائي عرض Google One Tap في صفحات AMP نتيجة لبعض الأسباب أدناه.

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

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

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

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

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

    على مطوّري البرامج اتخاذ إجراءات لمنع تضمين إطارات iframe المتوسطة في نطاقات غير متوقعة. على سبيل المثال، قد يتضمّن ضارة.com إطار 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 Tap في وضع 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 One. انقر:

<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 الوسيطة.