একটি আইফ্রেম ব্যবহার করে এক ট্যাপ সংহত করুন

Google One Tap আপনার নিজের ওয়েবসাইট দ্বারা হোস্ট করা একটি iframe (এর পরে ইন্টারমিডিয়েট Iframe হিসাবে উল্লেখ করা হয়েছে) এর মধ্যে রেন্ডার করা যেতে পারে। একটি মধ্যবর্তী iframe ব্যবহার করা হলে One Tap UX-এ কোনো বোধগম্য পরিবর্তন নেই।

মধ্যবর্তী iframe ভিত্তিক ইন্টিগ্রেশন কিছু নমনীয়তা এবং ঝুঁকি নিয়ে আসে:

  • এক ট্যাপ এবং পরবর্তী UX প্রবাহের জন্য এম্বেড করা UX ।

    One Tap UX সম্পন্ন হওয়ার পর, আপনি মধ্যবর্তী আইফ্রেমের ভিতরে পরবর্তী UX প্রবাহ প্রদর্শন করতে পারেন। সুতরাং, ওয়ান ট্যাপ এবং পরবর্তী ইউএক্স উভয়ই বর্তমান বিষয়বস্তু পৃষ্ঠায় এম্বেড করা যেতে পারে। নীচে একটি উদাহরণ দেখুন.

    ইন্টারমিডিয়েট আইফ্রেম সহ এমবেডেড ইউএক্সের একটি উদাহরণ।

    ইন্টারমিডিয়েট আইফ্রেম ছাড়া, পরবর্তী UX ফ্লো প্রদর্শন করতে সাধারণত আপনার একটি পূর্ণ পৃষ্ঠা নেভিগেশন প্রয়োজন, যা কিছু ক্ষেত্রে অনুপ্রবেশকারী হতে পারে।

  • একবার সংহত করুন এবং সর্বত্র প্রদর্শন করুন ।

    সমস্ত One Tap ইন্টিগ্রেশন কোড (One Tap API আমন্ত্রণ এবং পরবর্তী UX হ্যান্ডলিং) মধ্যবর্তী আইফ্রেমে এনক্যাপসুলেট করা হয়েছে। বিষয়বস্তু পৃষ্ঠাগুলিতে, যেখানে এক ট্যাপ প্রদর্শিত হতে পারে, আপনাকে যা করতে হবে তা হল মধ্যবর্তী iframe এম্বেড করা।

    এই আর্কিটেকচারটি উদ্বেগগুলিকে আলাদা করার অনুমতি দেয় এবং এইভাবে আপনার একীকরণ এবং রক্ষণাবেক্ষণের খরচ হ্রাস করে।

  • আইডি টোকেন এক্সপোজার স্কোপ সীমিত করুন ।

    আইডি টোকেন সরাসরি মধ্যবর্তী iframe দ্বারা গ্রাস করা হয়। তারা কন্টেন্ট পেজ উন্মুক্ত হয় না. এই আর্কিটেকচার নাটকীয়ভাবে ID টোকেন এক্সপোজার সুযোগ হ্রাস করতে পারে।

    ইন্টারমিডিয়েট আইফ্রেম পদ্ধতিটি এমন ওয়েবসাইটগুলির সাথেও ভাল কাজ করে যেগুলির ইতিমধ্যে একটি ডেডিকেটেড লগইন-সম্পর্কিত সাব ডোমেন (বলুন, login.example.com) এবং একাধিক সামগ্রী-সম্পর্কিত সাব ডোমেন রয়েছে (বলুন, sports.example.com এবং games.example.com) .

  • এক ট্যাপ প্রদর্শন ডোমেন .

    Google-এর OAuth নীতিগুলির প্রয়োজন অনুসারে, OAuth প্রতিক্রিয়াগুলি গ্রহণ করে এমন সমস্ত ডোমেনগুলিকে Google ক্লাউড কনসোলে প্রাক-নিবন্ধিত হতে হবে৷ সাধারণ ওয়ান ট্যাপ ইন্টিগ্রেশনের সাথে, ডেভেলপারদের এমন সমস্ত ডোমেন প্রাক-নিবন্ধন করতে হবে যা এক ট্যাপ প্রদর্শন করতে পারে, যেহেতু আইডি টোকেনগুলি এই ডোমেনে ফেরত পাঠানো হবে। কিছু ওয়েবসাইট তাদের ব্যবহারকারীদের গতিশীলভাবে সাব ডোমেন তৈরি করার অনুমতি দেয়, যা পূর্ব-নিবন্ধিত করা অসম্ভব। ফলস্বরূপ, এই গতিশীলভাবে তৈরি সাব ডোমেনে ওয়ান ট্যাপ প্রদর্শন করা যাবে না।

    মধ্যবর্তী iframe ব্যবহার করে এই সমস্যাটি সমাধান করা যেতে পারে। এই ক্ষেত্রে, শুধুমাত্র মধ্যবর্তী আইফ্রেমের ডোমেনটি প্রাক-নিবন্ধন করা প্রয়োজন। কন্টেন্ট পেজ ডোমেন রেজিস্টার করার কোন প্রয়োজন নেই, যেহেতু আইডি টোকেন এই কন্টেন্ট পেজগুলিতে উন্মুক্ত হয় না।

  • গোপনীয়তা ঝুঁকি .

    অপ্রত্যাশিত ডোমেনে অন্তর্বর্তী iframes এম্বেড করা প্রতিরোধ করার জন্য বিকাশকারীদের অবশ্যই ব্যবস্থা নিতে হবে। উদাহরণস্বরূপ, malicious.com আপনার মধ্যবর্তী iframe এম্বেড করতে পারে এবং এইভাবে তাদের ওয়েবসাইটে আপনার One Tap UX প্রদর্শন করতে পারে। এটি অবশ্যই শেষ ব্যবহারকারীদের কাছ থেকে প্রচুর গোপনীয়তা উদ্বেগ সৃষ্টি করবে।

  • নিরাপত্তা ঝুঁকি

    উপরে উল্লিখিত অপ্রত্যাশিত ফ্রেমিং সমস্যার কারণে, আপনার মধ্যবর্তী আইফ্রেম কখনই তার মূল ফ্রেমে নিরাপত্তা বা গোপনীয়তা সংবেদনশীল ডেটা পাঠাবে না, যেমন আইডি টোকেন, সেশন কুকি মান, ব্যবহারকারীর ডেটা ইত্যাদি। বিপদ

ইন্টারমিডিয়েট আইফ্রেমে এক ট্যাপ রেন্ডার করুন

ইন্টারমিডিয়েট আইফ্রেমের ভিতরে ওয়ান ট্যাপ প্রদর্শন করতে, মধ্যবর্তী আইফ্রেমের HTML কোডে নিম্নলিখিত কোড স্নিপেটটি রাখুন:

<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 মোডে চলে। আপনি বৈশিষ্ট্য মান হিসাবে একটি ডোমেন বা একটি কমা দ্বারা পৃথক ডোমেন তালিকা সেট করতে পারেন৷ ওয়াইল্ডকার্ড সাবডোমেনগুলিও সমর্থিত।

(ঐচ্ছিক) ইন্টারমিডিয়েট আইফ্রেমে পরবর্তী UX রেন্ডার করুন

লগইন প্রতিক্রিয়াতে, আপনি যে কোনও HTML কোড ফেরত দিতে পারেন, যা শেষ ব্যবহারকারীদের কাছে কিছু দৃশ্যমান সামগ্রী প্রদর্শন করতে পারে। উদাহরণস্বরূপ, অতিরিক্ত প্রোফাইল তথ্যের জন্য জিজ্ঞাসা করা, বা TOS এ সম্মত হওয়া। পৃষ্ঠাটি জমা দেওয়ার পরে, আপনি আরও পৃষ্ঠাগুলি প্রদর্শন করতে পারেন। উদাহরণস্বরূপ, একটি অর্থপ্রদান বা সদস্যতার জন্য।

আপনি মধ্যবর্তী আইফ্রেমের আকার পরিবর্তন করতে পারেন:

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

সংক্ষেপে, ইন্টারমিডিয়েট আইফ্রেমের সাথে, সম্পূর্ণ সাইন-ইন বা সাইন-আপ UX ফ্লো এমবেডেড UX হিসাবে প্রয়োগ করা যেতে পারে।

One Tap UX-এর পরে প্রথম পৃষ্ঠার জন্য, নিম্নলিখিত কারণগুলির জন্য আপনাকে notifyParentResize() পদ্ধতিতে দুবার কল করতে হবে।

  1. ওয়ান ট্যাপ ইউএক্স হয়ে গেলে ইন্টারমিডিয়েট আইফ্রেম লুকিয়ে রাখা হয়।

  2. একটি উপাদানের offsetHeight বৈশিষ্ট্যের মান 0 হয় যখন এটি লুকানো থাকে।

প্রথম কলে, আপনি এটিকে দৃশ্যমান করার জন্য আইফ্রেমের উচ্চতা 1px এ পুনরায় আকার দিতে পারেন। তারপর, offsetHeight অ্যাট্রিবিউট মান উপলব্ধ হওয়ার পরে, আপনি এটিকে উপযুক্ত উচ্চতায় পুনরায় আকার দিতে পারেন।

নিম্নলিখিত উদাহরণ কোডটি দেখায় কিভাবে পিতামাতার উত্সকে যাচাই করা যায় এবং One Tap UX-এর পরে UI-এর জন্য মধ্যবর্তী আইফ্রেমের আকার পরিবর্তন করা যায়।

<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>

ইউএক্স ডনে ইন্টারমিডিয়েট আইফ্রেমটি সরান

UX ফ্লো হয়ে গেলে মধ্যবর্তী iframe সরাতে আপনাকে অবশ্যই মূল বিষয়বস্তু পৃষ্ঠাকে অবহিত করতে হবে। এই লক্ষ্যে, আপনি আপনার লগইন প্রতিক্রিয়া কোডে নিম্নলিখিত কোড স্নিপেট রাখতে পারেন।

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

যদি UX ফ্লো বাদ দেওয়া হয়, তাহলে তার পরিবর্তে notifyParentClose পদ্ধতিটি কল করতে হবে।

HTML পৃষ্ঠাগুলিতে মধ্যবর্তী আইফ্রেম এম্বেড করুন

নিম্নলিখিত কোড স্নিপেটটি যেকোনও HTML পৃষ্ঠাতে রাখুন যা আপনি Google One Tap-কে প্রদর্শন করতে চান:

<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।