ব্যবহারকারীদের একটি নিরবচ্ছিন্ন এবং সুবিধাজনক ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য একটি আইফ্রেমের মধ্যে ক্লাসরুম অ্যাড-অন লোড করা হয়। পাঁচটি স্বতন্ত্র আইফ্রেম প্রকার রয়েছে; প্রতিটি আইফ্রেমের উদ্দেশ্য এবং উপস্থিতি সম্পর্কে একটি সারসংক্ষেপের জন্য ব্যবহারকারীর ভ্রমণ ডিরেক্টরিতে আইফ্রেম পৃষ্ঠাগুলি দেখুন।
আইফ্রেম নিরাপত্তা নির্দেশিকা
ডেভেলপারদের কাছ থেকে তাদের আইফ্রেম সুরক্ষিত করার জন্য শিল্পের সেরা অনুশীলনগুলি অনুসরণ করার আশা করা হয়। তবে, আপনার বৈধ শংসাপত্র রয়েছে এবং কোর্সে ব্যবহারকারীর ভূমিকা সঠিকভাবে সনাক্ত করতে পারেন তা নিশ্চিত করার জন্য আপনার ব্যবহারকারী প্রবাহে কিছু API ইন্টারঅ্যাকশন অন্তর্ভুক্ত করা উচিত।
সার্ভার অ্যাপ্লিকেশন কনফিগারেশন
আইফ্রেম সুরক্ষিত করার জন্য, আমরা নিম্নলিখিত সার্ভার কনফিগারেশনগুলি সুপারিশ করি:
- HTTPS আবশ্যক । আমরা দৃঢ়ভাবে TLS 1.2 বা তার বেশি সংস্করণ ব্যবহার করার এবং HTTP স্ট্রিক ট্রান্সপোর্ট সিকিউরিটি (HSTS) সক্ষম করার পরামর্শ দিচ্ছি। স্ট্রিক ট্রান্সপোর্ট সিকিউরিটি সম্পর্কে এই সম্পর্কিত MDN নিবন্ধটি দেখুন।
- কঠোর সামগ্রী সুরক্ষা নীতি (কঠোর CSP) সক্ষম করুন। এই OWASP নিবন্ধ এবং এই সম্পর্কিত সামগ্রী সুরক্ষা নীতি MDN নিবন্ধটি দেখুন।
- সিকিউর কুকি অ্যাট্রিবিউট সক্রিয় করুন। HttpOnly অ্যাট্রিবিউট এবং এই সম্পর্কিত কুকিজ MDN নিবন্ধটি দেখুন।
কোয়েরি প্যারামিটার
আইফ্রেমগুলি অ্যাড-অনে গুরুত্বপূর্ণ তথ্য কোয়েরি প্যারামিটার হিসেবে প্রেরণ করে। প্যারামিটারের দুটি বিভাগ রয়েছে: সংযুক্তি-সম্পর্কিত এবং সাইন-ইন সম্পর্কিত প্যারামিটার।
সংযুক্তি-সম্পর্কিত পরামিতি
সংযুক্তি-সম্পর্কিত প্যারামিটারগুলি অ্যাড-অনকে কোর্স, অ্যাসাইনমেন্ট, অ্যাড-অন সংযুক্তি, শিক্ষার্থীর জমা এবং একটি অনুমোদন টোকেন সম্পর্কে তথ্য প্রদান করে।
- কোর্স আইডি
courseIdমান হল কোর্সের একটি শনাক্তকারী।সমস্ত আইফ্রেমের সাথে অন্তর্ভুক্ত।
- আইটেম আইডি
itemIdমান হলAnnouncement,CourseWork, অথবাCourseWorkMaterialএর একটি শনাক্তকারী যার সাথে এই সংযুক্তিটি সংযুক্ত করা হয়েছে।সমস্ত আইফ্রেমের সাথে অন্তর্ভুক্ত।
- জিনিসপত্রের ধরণ
itemTypeমানটি সেই রিসোর্সের ধরণ চিহ্নিত করে যার সাথে এই সংযুক্তিটি সংযুক্ত করা হয়েছে। পাস করা স্ট্রিং মান হল"announcements","courseWork", অথবা"courseWorkMaterials"এর মধ্যে একটি।সমস্ত আইফ্রেমের সাথে অন্তর্ভুক্ত।
- সংযুক্তি আইডি
attachmentIdমানটি সংযুক্তির একটি শনাক্তকারী।teacherViewUri,studentViewUriএবংstudentWorkReviewUriআইফ্রেমের সাথে অন্তর্ভুক্ত।- জমা দেওয়ার আইডি
submissionIdমানটি শিক্ষার্থীর কাজের একটি শনাক্তকারী, তবে এটিattachmentIdসাথে একত্রে ব্যবহার করা উচিত যাতে শিক্ষার্থীর একটি নির্দিষ্ট অ্যাসাইনমেন্টের কাজ সনাক্ত করা যায়।studentWorkReviewUriসাথে অন্তর্ভুক্ত।
- অ্যাড-অন টোকেন
addOnTokenমান হল একটি অনুমোদন টোকেন যা অ্যাড-অন তৈরি করার জন্যaddOnAttachments.createকল করতে ব্যবহৃত হয়।এর সাথে সংযুক্তি আবিষ্কার আইফ্রেম এবং লিঙ্ক আপগ্রেড আইফ্রেম অন্তর্ভুক্ত।
- আপগ্রেড করার জন্য URL
urlToUpgradeমানের উপস্থিতি বোঝায় যে শিক্ষক অ্যাসাইনমেন্টে একটি লিঙ্ক সংযুক্তি অন্তর্ভুক্ত করেছেন এবং এটিকে একটি অ্যাড-অন সংযুক্তিতে আপগ্রেড করতে সম্মত হয়েছেন। যদি আপনার কাছে ইতিমধ্যেই এই বৈশিষ্ট্যটি কনফিগার না থাকে, তাহলে আরও বিস্তারিত জানার জন্য লিঙ্কগুলিকে অ্যাড-অন সংযুক্তিতে আপগ্রেড করার নির্দেশিকাটি দেখুন।লিঙ্ক আপগ্রেড আইফ্রেমের সাথে অন্তর্ভুক্ত।
সাইন-ইন সম্পর্কিত প্যারামিটার
login_hint কোয়েরি প্যারামিটারটি অ্যাড-অন ওয়েব পৃষ্ঠায় আসা ক্লাসরুম ব্যবহারকারী সম্পর্কে তথ্য প্রদান করে। এই কোয়েরি প্যারামিটারটি iframe src URL-এ দেওয়া আছে। ব্যবহারকারী যখন আপনার অ্যাড-অন ব্যবহার করেছেন তখন এটি পাঠানো হয় যাতে ব্যবহারকারীর সাইন-ইন ঘর্ষণ কমাতে সাহায্য করা যায়। আপনার অ্যাড-অন বাস্তবায়নে আপনাকে এই কোয়েরি প্যারামিটারটি পরিচালনা করতে হবে।
- লগইন ইঙ্গিত
login_hintহল ব্যবহারকারীর Google অ্যাকাউন্টের জন্য একটি অনন্য শনাক্তকারী। ব্যবহারকারী প্রথমবার আপনার অ্যাড-অনে লগ ইন করার পরে, একই ব্যবহারকারী আপনার অ্যাড-অনে পরবর্তী প্রতিটি ভিজিটেlogin_hintপ্যারামিটারটি পাস করে।login_hintপ্যারামিটারের দুটি সম্ভাব্য ব্যবহার রয়েছে:- প্রমাণীকরণ প্রবাহের সময়
login_hintমানটি পাস করুন যাতে সাইন-ইন ডায়ালগ প্রদর্শিত হলে ব্যবহারকারীকে তাদের শংসাপত্রগুলি প্রবেশ করতে না হয়। ব্যবহারকারী স্বয়ংক্রিয়ভাবে সাইন-ইন হয় না। - ব্যবহারকারী সাইন-ইন করার পর, এই প্যারামিটারটি ব্যবহার করে অ্যাড-অনে ইতিমধ্যেই সাইন-ইন করা ব্যবহারকারীদের সাথে মান তুলনা করুন। যদি আপনি কোনও মিল খুঁজে পান, তাহলে আপনি ব্যবহারকারীকে সাইন-ইন করে রাখতে পারেন এবং সাইন-ইন প্রবাহ দেখানো এড়াতে পারেন। যদি প্যারামিটারটি আপনার সাইন-ইন করা কোনও ব্যবহারকারীর সাথে না মেলে, তাহলে ব্যবহারকারীকে Google ব্র্যান্ডেড সাইন-ইন বোতাম ব্যবহার করে সাইন-ইন করতে বলুন।
সমস্ত আইফ্রেমের সাথে অন্তর্ভুক্ত।
- প্রমাণীকরণ প্রবাহের সময়
সংযুক্তি আবিষ্কার আইফ্রেম
| মাত্রা | বিবরণ |
|---|---|
| প্রয়োজনীয় | হাঁ |
| ইউআরআই | অ্যাড-অন মেটাডেটাতে দেওয়া আছে |
| কোয়েরি প্যারামিটার | courseId , itemId , itemType , addOnToken , এবং login_hint । |
| উচ্চতা | উপরের হেডারের জন্য উইন্ডোর উচ্চতা ৮০% বিয়োগ করে ৬০px |
| প্রস্থ | সর্বোচ্চ ১৬০০ পিক্সেল উইন্ডো প্রস্থ ৯০% যখন উইন্ডো <= ৬০০ পিক্সেল প্রস্থ ৬০০ পিক্সেলের বেশি প্রস্থের উইন্ডোর প্রস্থ ৮০% |
উদাহরণ সংযুক্তি আবিষ্কারের দৃশ্যকল্প
- একটি Classroom অ্যাড-অন Google Workspace Marketplace-এ
https://example.com/addonএর Attachment Discovery URI সহ নিবন্ধিত। - একজন শিক্ষক এই অ্যাড-অনটি ইনস্টল করেন এবং তাদের যেকোনো একটি কোর্সের মধ্যে একটি নতুন ঘোষণা, অ্যাসাইনমেন্ট বা উপাদান তৈরি করেন। উদাহরণস্বরূপ,
itemId=234,itemType=courseWorkএবংcourseId=123। - সেই আইটেমটি কনফিগার করার সময়, শিক্ষক নতুন ইনস্টল করা অ্যাড-অনটিকে সংযুক্তি হিসেবে বেছে নেন।
- ক্লাসরুম একটি আইফ্রেম তৈরি করে যার src URL
https://example.com/addon?courseId=123&itemId=234&itemType=courseWork&addOnToken=456এ সেট করা থাকে।- শিক্ষক আইফ্রেমের মধ্যে কাজ করে সংযুক্তি নির্বাচন করেন।
- সংযুক্তি নির্বাচনের সময়, অ্যাড-অনটি আইফ্রেম বন্ধ করার জন্য ক্লাসরুমে একটি
postMessageপাঠায়।
শিক্ষকViewUri এবং ছাত্রViewUri আইফ্রেম
| মাত্রা | বিবরণ |
|---|---|
| প্রয়োজনীয় | হাঁ |
| ইউআরআই | teacherViewUri অথবা studentViewUri |
| কোয়েরি প্যারামিটার | courseId , itemId , itemType , attachmentId , এবং login_hint । |
| উচ্চতা | উপরের হেডারের জন্য উইন্ডোর উচ্চতা ১০০% বিয়োগ করে ১৪০ পিক্সেল |
| প্রস্থ | ১০০% জানালার প্রস্থ |
studentWorkReviewUri আইফ্রেম
| মাত্রা | বিবরণ |
|---|---|
| প্রয়োজনীয় | না (এটি একটি কার্যকলাপ-ধরণের সংযুক্তি কিনা তা নির্ধারণ করে) |
| ইউআরআই | studentWorkReviewUri |
| কোয়েরি প্যারামিটার | courseId , itemId , itemType , attachmentId , submissionId , এবং login_hint । |
| উচ্চতা | উপরের হেডারের জন্য উইন্ডোর উচ্চতা ১০০% বিয়োগ করে ১৬৮ পিক্সেল |
| প্রস্থ | ১০০% উইন্ডো প্রস্থ বিয়োগ করে সাইডবার প্রস্থ <> সাইডবার প্রসারিত হলে ৩১২ পিক্সেল এবং আড়াল করলে ৫৬ পিক্সেল হবে |
লিংক আপগ্রেড আইফ্রেম
| মাত্রা | বিবরণ |
|---|---|
| প্রয়োজনীয় | হ্যাঁ, যদি আপনার অ্যাড-অন লিঙ্কগুলিকে অ্যাড-অন সংযুক্তিতে আপগ্রেড করার কাজটি সমর্থিত হয়। |
| ইউআরআই | অ্যাড-অন মেটাডেটাতে দেওয়া আছে |
| কোয়েরি প্যারামিটার | courseId , itemId , itemType , addOnToken , urlToUpgrade , এবং login_hint । |
| উচ্চতা | উপরের হেডারের জন্য উইন্ডোর উচ্চতা ৮০% বিয়োগ করে ৬০px |
| প্রস্থ | সর্বোচ্চ ১৬০০ পিক্সেল উইন্ডো প্রস্থ ৯০% যখন উইন্ডো <= ৬০০ পিক্সেল প্রস্থ ৬০০ পিক্সেলের বেশি প্রস্থের উইন্ডোর প্রস্থ ৮০% |
লিঙ্ক আপগ্রেডের দৃশ্যকল্পের উদাহরণ
- একটি Classroom অ্যাড-অন
https://example.com/upgradeএর একটি Link UPGRADE URI-এর সাথে নিবন্ধিত। আপনি Link Attachments- এর জন্য নিম্নলিখিত হোস্ট এবং পাথ প্রিফিক্স প্যাটার্ন প্রদান করেছেন যা Classroom-কে একটি অ্যাড-অন অ্যাটাচমেন্টে আপগ্রেড করার চেষ্টা করতে হবে:- হোস্টটি হল
example.comএবং পাথ প্রিফিক্স হল/quiz।
- হোস্টটি হল
- একজন শিক্ষক তাদের কোর্সের মধ্যে একটি নতুন ঘোষণা, অ্যাসাইনমেন্ট বা উপাদান তৈরি করেন। উদাহরণস্বরূপ,
itemId=234,itemType=courseWorkএবংcourseId=123। - একজন শিক্ষক আপনার প্রদত্ত URL প্যাটার্নের সাথে মিলে যাওয়া লিঙ্ক সংযুক্তি ডায়ালগে
https://example.com/quiz/5678একটি লিঙ্ক পেস্ট করেন। এরপর শিক্ষককে লিঙ্কটি একটি অ্যাড-অন সংযুক্তিতে আপগ্রেড করার জন্য অনুরোধ করা হয়। ক্লাসরুম লিঙ্ক আপগ্রেড আইফ্রেম চালু করে যার URL
https://example.com/upgrade?courseId=123&itemId=234&itemType=courseWork&addOnToken=456&urlToUpgrade=https%3A%2F%2Fexample.com%2Fquiz%2F5678এ সেট করা আছে।আপনি iframe-এ পাস করা কোয়েরি প্যারামিটারগুলি মূল্যায়ন করেন এবং
CreateAddOnAttachmentএন্ডপয়েন্টে কল করেন। মনে রাখবেন যেurlToUpgradeকোয়েরি প্যারামিটারটি iframe-এ পাস করার সময় URI এনকোড করা হয়। প্যারামিটারটিকে তার আসল আকারে পেতে আপনাকে ডিকোড করতে হবে। উদাহরণস্বরূপ, জাভাস্ক্রিপ্টdecodeURIComponent()ফাংশন অফার করে।একটি লিঙ্ক থেকে একটি অ্যাড-অন সংযুক্তি সফলভাবে তৈরি করার পরে, আপনি আইফ্রেমটি বন্ধ করার জন্য ক্লাসরুমে একটি
postMessageপাঠান।
আইফ্রেম বন্ধ করুন
লার্নিং টুল থেকে iframe বন্ধ করা যেতে পারে একটি postMessage পাঠিয়ে যার পেলোড {type: 'Classroom', action: 'closeIframe'} । Classroom শুধুমাত্র host_name+port থেকে খোলা মূল URI এর সাথে সম্পর্কিত এই postMessage গ্রহণ করে।
<button id="close">Send message to close iframe</button>
<script>
document.querySelector('#close')
.addEventListener('click', () => {
window.parent.postMessage({
type: 'Classroom',
action: 'closeIframe',
}, '*');
});
</script>
আইফ্রেম থেকে আইফ্রেম বন্ধ করুন
postMessage ইভেন্ট পাঠানোর জন্য ব্যবহৃত URI-এর ডোমেইন+পোর্টের মতোই ডোমেইন+পোর্ট থাকা আবশ্যক, অন্যথায় বার্তাটি উপেক্ষা করা হবে। এর একটি সমাধান হল মূল ডোমেনের এমন একটি পৃষ্ঠায় পুনঃনির্দেশিত করা যা postMessage ইভেন্ট পাঠানো ছাড়া আর কিছুই করে না।
একটি নতুন ট্যাব থেকে আইফ্রেম বন্ধ করুন
ক্রস-ডোমেন সুরক্ষা এটিকে কাজ করতে বাধা দেয়। একটি সমাধান হল আইফ্রেম এবং নতুন ট্যাবের মধ্যে যোগাযোগগুলি নিজেরাই পরিচালনা করা এবং আইফ্রেমকে ক্লোজ postMessage ইভেন্ট জারি করার জন্য চূড়ান্তভাবে দায়ী করা। একটি পার্শ্ব নোট হিসাবে, "পার্টনার নেমে খুলুন" হাইপারলিঙ্কটি সরানো হচ্ছে যাতে ব্যবহারকারীরা অদূর ভবিষ্যতে এইভাবে ট্যাব তৈরি না করে।
বিধিনিষেধ
সমস্ত আইফ্রেম নিম্নলিখিত স্যান্ডবক্স বৈশিষ্ট্যগুলির সাথে খোলা হয়:
-
allow-popups -
allow-popups-to-escape-sandbox -
allow-forms -
allow-scripts -
allow-storage-access-by-user-activation -
allow-same-origin
এবং নিম্নলিখিত বৈশিষ্ট্য নীতি:
-
allow="microphone *"
থার্ড-পার্টি কুকি ব্লক করা হচ্ছে
মনে রাখবেন যে থার্ড-পার্টি কুকি ব্লক করার ফলে আইফ্রেমে সাইন ইন করা সেশন বজায় রাখা কঠিন হয়ে পড়ে। বিভিন্ন ব্রাউজারে কুকি ব্লক করার বর্তমান অবস্থা জানতে https://www.cookiestatus.com দেখুন। অবশ্যই, এই সমস্যাটি কেবল গুগল ক্লাসরুম অ্যাড-অনগুলির জন্য নয় এবং এটি তৃতীয়-পক্ষের আইফ্রেম করা সমস্ত ওয়েবসাইটকে প্রভাবিত করে। আমাদের অনেক অংশীদার ইতিমধ্যেই এই সমস্যার সম্মুখীন হয়েছেন।
কিছু সাধারণ সমাধান হল:
- প্রথম-পক্ষের প্রসঙ্গে কুকি তৈরি করতে একটি নতুন ট্যাব খুলুন। কিছু ব্রাউজার তৃতীয়-পক্ষের প্রসঙ্গে থাকাকালীন প্রথম-পক্ষের প্রসঙ্গে তৈরি কুকিগুলিতে অ্যাক্সেস দেয়।
- ব্যবহারকারীকে তৃতীয় পক্ষের কুকিজ ব্যবহারের অনুমতি দিতে বলুন। এটি সব ব্যবহারকারীর সাথে সবসময় সম্ভব নাও হতে পারে।
- কুকিজের উপর নির্ভর করে না এমন একক-পৃষ্ঠার ওয়েব অ্যাপ্লিকেশন ডিজাইন করুন।
ভবিষ্যতের ব্রাউজার সংস্করণগুলিতে আরও কুকি বিধিনিষেধ থাকবে বলে আশা করা হচ্ছে। অংশীদারদের দ্বারা প্রয়োজনীয় লিফট কীভাবে কমানো যায় সে সম্পর্কে Google-কে প্রতিক্রিয়া পাঠানোর জন্য বৈশিষ্ট্য অনুরোধ তৈরি করুন।
URL রেগুলার এক্সপ্রেশন ব্যবহার করে অ্যাড-অনগুলির আবিষ্কারযোগ্যতা সক্ষম করুন
শিক্ষকরা প্রায়শই লিঙ্ক সংযুক্তি ব্যবহার করে অ্যাসাইনমেন্ট তৈরি করেন। আপনার অ্যাড-অনের ব্যবহার প্রচারের জন্য, আপনি এমন নিয়মিত এক্সপ্রেশন নির্দিষ্ট করতে পারেন যা আপনার অ্যাড-অনে অ্যাক্সেস করা যেতে পারে এমন রিসোর্সের URL গুলির সাথে মেলে। আপনার নিয়মিত এক্সপ্রেশনগুলির একটির সাথে মেলে এমন একটি লিঙ্ক সংযুক্ত করা শিক্ষক একটি খারিজযোগ্য ডায়ালগ দেখতে পান যা তাদের আপনার অ্যাড-অনটি চেষ্টা করার জন্য উৎসাহিত করে। তারা কেবল তখনই ডায়ালগটি দেখতে পান যদি অ্যাড-অনটি তাদের অ্যাকাউন্টে ইতিমধ্যেই ইনস্টল করা থাকে।
যদি আপনি শিক্ষকদের এই আচরণটি প্রদান করতে চান, তাহলে আপনার Google পরিচিতিদের উপযুক্ত নিয়মিত অভিব্যক্তি প্রদান করুন । যদি আপনার দেওয়া নিয়মিত অভিব্যক্তিগুলি অত্যধিক বিস্তৃত হয় বা অন্য কোনও অ্যাড-অনের সাথে সাংঘর্ষিক হয়, তাহলে সেগুলিকে আরও সীমাবদ্ধ বা স্বতন্ত্র করে পরিবর্তন করা হতে পারে।
চিত্র ১. শিক্ষক একটি নতুন অ্যাসাইনমেন্টের লিঙ্ক সংযুক্তি নির্বাচন করছেন।
চিত্র ২. শিক্ষক তৃতীয় পক্ষের উৎস থেকে একটি লিঙ্ক পেস্ট করছেন। শিক্ষক ইতিমধ্যেই তৃতীয় পক্ষের ক্লাসরুম অ্যাড-অন ইনস্টল করেছেন।
চিত্র ৩. যখন পেস্ট করা লিঙ্কটি তৃতীয় পক্ষের ডেভেলপার দ্বারা নির্দিষ্ট করা একটি নিয়মিত অভিব্যক্তির সাথে মিলে যায় তখন শিক্ষকের কাছে উপস্থাপিত ইন্টারেক্টিভ ডায়ালগ।
যদি একজন শিক্ষক চিত্র ৩-এ দেখানো পপ-আপে "এখনই চেষ্টা করে দেখুন" নির্বাচন করেন, তাহলে তাকে আপনার অ্যাড-অনের Attachment Discovery iframe- এ পুনঃনির্দেশিত করা হবে।