Chi tiết về iframe và tham số truy vấn

Tiện ích bổ sung của Lớp học được tải trong một iframe để mang đến cho người dùng cuối trải nghiệm liền mạch và thuận tiện. Có 5 loại iframe riêng biệt; hãy xem các trang iframe trong thư mục Hành trình của người dùng để biết thông tin tổng quan về mục đích và giao diện của từng iframe.

Nguyên tắc bảo mật iframe

Nhà phát triển phải tuân theo các phương pháp hay nhất trong ngành để bảo mật iframe của họ. Tuy nhiên, bạn cũng nên kết hợp một số hoạt động tương tác với API trong quy trình người dùng để xác nhận rằng bạn có thông tin đăng nhập hợp lệ và có thể xác định chính xác vai trò của người dùng trong khoá học.

Cấu hình ứng dụng máy chủ

Để bảo vệ iframe, bạn nên thiết lập cấu hình máy chủ như sau:

Tham số truy vấn

Các iframe truyền thông tin quan trọng đến tiện ích bổ sung dưới dạng tham số truy vấn. Có hai danh mục tham số: tham số liên quan đến tệp đính kèm và tham số liên quan đến hoạt động đăng nhập.

Các tham số liên quan đến tệp đính kèm cung cấp cho tiện ích bổ sung thông tin về khoá học, bài tập, tệp đính kèm của tiện ích bổ sung, bài tập đã nộp của học viên và mã thông báo uỷ quyền.

Mã khoá học

Giá trị courseId là giá trị nhận dạng của khoá học.

Đi kèm với tất cả iframe.

Mã mặt hàng

Giá trị itemId là mã nhận dạng của Announcement, CourseWork hoặc CourseWorkMaterial mà tệp đính kèm này được đính kèm.

Đi kèm với tất cả iframe.

Loại mục

Giá trị itemType xác định loại tài nguyên mà tệp đính kèm này được đính kèm. Giá trị chuỗi được truyền là một trong các giá trị "announcements", "courseWork" hoặc "courseWorkMaterials".

Đi kèm với tất cả iframe.

Mã nhận dạng tệp đính kèm

Giá trị attachmentId là giá trị nhận dạng của tệp đính kèm.

Có trong teacherViewUri, studentViewUri và iframe studentWorkReviewUri.

Mã bài nộp

Giá trị submissionId là một giá trị nhận dạng cho bài tập của học viên, nhưng bạn nên sử dụng giá trị này kết hợp với attachmentId để xác định bài tập của học viên cho một bài tập cụ thể.

Có trong gói studentWorkReviewUri.

Mã thông báo tiện ích bổ sung

Giá trị addOnToken là mã thông báo uỷ quyền dùng để thực hiện các lệnh gọi addOnAttachments.create nhằm tạo tiện ích bổ sung.

Được đưa vào iframe Khám phá tệp đính kèm và iframe Nâng cấp đường liên kết.

URL cần nâng cấp

Sự xuất hiện của giá trị urlToUpgrade ngụ ý rằng giáo viên đã thêm Tệp đính kèm đường liên kết vào bài tập và đã đồng ý nâng cấp tệp đính kèm đó thành tệp đính kèm bổ sung. Nếu bạn chưa định cấu hình tính năng này, hãy xem hướng dẫn về nâng cấp đường liên kết thành tệp đính kèm bổ sung để biết thêm thông tin chi tiết.

Có trong iframe Nâng cấp đường liên kết.

Tham số truy vấn login_hint cung cấp thông tin về người dùng Lớp học đang truy cập vào trang web của tiện ích bổ sung. Tham số truy vấn này được cung cấp trên URL src của iframe. Sự kiện này được gửi khi người dùng đã từng sử dụng tiện ích bổ sung của bạn để giúp giảm bớt khó khăn khi đăng nhập của người dùng cuối. Bạn phải xử lý tham số truy vấn này trong quá trình triển khai tiện ích bổ sung.

Gợi ý đăng nhập

login_hint là giá trị nhận dạng riêng biệt cho Tài khoản Google của người dùng. Sau khi người dùng đăng nhập vào tiện ích bổ sung của bạn lần đầu tiên, tham số login_hint sẽ được truyền trong mỗi lần truy cập tiếp theo vào tiện ích bổ sung của bạn bởi cùng một người dùng.

Có 2 cách sử dụng tham số login_hint:

  1. Truyền giá trị login_hint trong quy trình xác thực để người dùng không cần nhập thông tin đăng nhập khi hộp thoại đăng nhập xuất hiện. Người dùng không được tự động đăng nhập.
  2. Sau khi người dùng đăng nhập, hãy sử dụng tham số này để so sánh giá trị với bất kỳ người dùng nào mà bạn có thể đã đăng nhập vào tiện ích bổ sung. Nếu tìm thấy kết quả trùng khớp, bạn có thể để người dùng đăng nhập và tránh hiển thị quy trình đăng nhập. Nếu tham số không khớp với bất kỳ người dùng nào đã đăng nhập, hãy nhắc người dùng đăng nhập bằng nút đăng nhập có gắn thương hiệu Google.

Đi kèm với tất cả iframe.

Iframe Khám phá tệp đính kèm

Phương diện Mô tả
Bắt buộc Có
URI Có trong siêu dữ liệu của tiện ích bổ sung
Tham số truy vấn courseId, itemId, itemType, addOnToken và login_hint.
Chiều cao Chiều cao cửa sổ bằng 80% trừ đi 60 px cho tiêu đề trên cùng
Chiều rộng Tối đa 1.600 px
Chiều rộng cửa sổ 90% khi cửa sổ có chiều rộng <= 600 px
Chiều rộng cửa sổ 80% khi cửa sổ có chiều rộng > 600 px

Ví dụ về trường hợp Khám phá tệp đính kèm

  1. Tiện ích bổ sung Lớp học được đăng ký trong Google Workspace Marketplace bằng Attachment Discovery URI là https://example.com/addon.
  2. Giáo viên cài đặt tiện ích bổ sung này và tạo một thông báo, bài tập hoặc tài liệu mới trong một trong các khoá học của họ. Ví dụ: itemId=234, itemType=courseWork và courseId=123.
  3. Trong khi định cấu hình mục đó, giáo viên chọn tiện ích bổ sung mới cài đặt làm tệp đính kèm.
  4. Lớp học tạo một iframe có URL src được đặt thành https://example.com/addon?courseId=123&itemId=234&itemType=courseWork&addOnToken=456.
    1. Giáo viên thực hiện thao tác trong iframe để chọn tệp đính kèm.
  5. Khi bạn chọn tệp đính kèm, tiện ích bổ sung sẽ gửi một postMessage đến Lớp học để đóng iframe.

iframe teacherViewUri và studentViewUri

Phương diện Mô tả
Bắt buộc Có
URI teacherViewUri hoặc studentViewUri
Tham số truy vấn courseId, itemId, itemType, attachmentId và login_hint.
Chiều cao Chiều cao cửa sổ 100% trừ đi 140px cho tiêu đề trên cùng
Chiều rộng Chiều rộng cửa sổ 100%

iframe studentWorkReviewUri

Phương diện Mô tả
Bắt buộc Không (Xác định xem đây có phải là tệp đính kèm thuộc loại hoạt động hay không)
URI studentWorkReviewUri
Tham số truy vấn courseId, itemId, itemType, attachmentId, submissionId và login_hint.
Chiều cao Chiều cao cửa sổ 100% trừ đi 168 px cho tiêu đề trên cùng
Chiều rộng Chiều rộng cửa sổ 100% trừ đi chiều rộng thanh bên<> thanh bên có chiều rộng 312 px khi mở rộng và 56 px khi thu gọn
Phương diện Mô tả
Bắt buộc Có, nếu tiện ích bổ sung của bạn hỗ trợ tính năng nâng cấp đường liên kết thành tệp đính kèm tiện ích bổ sung.
URI Có trong siêu dữ liệu của tiện ích bổ sung
Tham số truy vấn courseId, itemId, itemType, addOnToken, urlToUpgrade và login_hint.
Chiều cao Chiều cao cửa sổ bằng 80% trừ đi 60 px cho tiêu đề trên cùng
Chiều rộng Tối đa 1.600 px
Chiều rộng cửa sổ 90% khi cửa sổ có chiều rộng <= 600 px
Chiều rộng cửa sổ 80% khi cửa sổ có chiều rộng > 600 px
  1. Tiện ích bổ sung Lớp học được đăng ký bằng URI Nâng cấp đường liên kết là https://example.com/upgrade. Bạn đã cung cấp các mẫu tiền tố đường dẫn và máy chủ lưu trữ sau đây cho Tệp đính kèm liên kết mà Lớp học sẽ cố gắng nâng cấp lên tệp đính kèm tiện ích bổ sung:
    • Máy chủ lưu trữ là example.com và tiền tố đường dẫn là /quiz.
  2. Giáo viên tạo một thông báo, bài tập hoặc tài liệu mới trong một trong các khoá học của họ. Ví dụ: itemId=234, itemType=courseWork và courseId=123.
  3. Giáo viên dán một đường liên kết https://example.com/quiz/5678 vào hộp thoại Tệp đính kèm đường liên kết khớp với một mẫu URL mà bạn đã cung cấp. Sau đó, giáo viên sẽ được nhắc nâng cấp Đường liên kết thành tệp đính kèm tiện ích bổ sung.

  4. Lớp học sẽ khởi chạy iframe Nâng cấp đường liên kết với URL được đặt thành https://example.com/upgrade?courseId=123&itemId=234&itemType=courseWork&addOnToken=456&urlToUpgrade=https%3A%2F%2Fexample.com%2Fquiz%2F5678.

  5. Bạn đánh giá các tham số truy vấn được truyền trên iframe và thực hiện một lệnh gọi đến điểm cuối CreateAddOnAttachment. Xin lưu ý rằng tham số truy vấn urlToUpgrade được mã hoá URI khi được truyền trên iframe. Bạn cần giải mã tham số để nhận được tham số ở dạng ban đầu. Ví dụ: JavaScript cung cấp hàm decodeURIComponent().

  6. Khi tạo thành công một tệp đính kèm tiện ích bổ sung từ một Đường liên kết, bạn sẽ gửi postMessage đến Lớp học để đóng iframe.

Đóng iframe

Khung nội tuyến có thể bị đóng từ công cụ học tập bằng cách gửi một postMessage có tải trọng {type: 'Classroom', action: 'closeIframe'}. Classroom chỉ chấp nhận postMessage này từ host_name+port tương ứng với URI ban đầu đã được mở.

<button id="close">Send message to close iframe</button>
<script>
  document.querySelector('#close')
    .addEventListener('click', () => {
        window.parent.postMessage({
            type: 'Classroom',
            action: 'closeIframe',
        }, '*');
    });
</script>

Đóng iframe từ iframe

Miền + cổng của trang gửi sự kiện postMessage phải có cùng miền + cổng với miền + cổng của URI dùng để chạy iframe, nếu không thì thông báo sẽ bị bỏ qua. Giải pháp là chuyển hướng trở lại một trang trên miền ban đầu. Trang này chỉ gửi sự kiện postMessage.

Đóng iframe từ một thẻ mới

Các biện pháp bảo vệ trên nhiều miền sẽ ngăn chặn việc này. Giải pháp là tự xử lý thông tin liên lạc giữa iframe và thẻ mới, đồng thời để iframe chịu trách nhiệm phát hành sự kiện đóng postMessage. Lưu ý: siêu liên kết "Mở trong Tên đối tác" sẽ bị xoá để người dùng không tạo thẻ theo cách này trong tương lai gần.

Quy định hạn chế

Tất cả iframe đều được mở bằng thuộc tính sandbox sau đây:

  • allow-popups
  • allow-popups-to-escape-sandbox
  • allow-forms
  • allow-scripts
  • allow-storage-access-by-user-activation
  • allow-same-origin

và chính sách về tính năng sau:

  • allow="microphone *"

Xin lưu ý rằng việc chặn cookie của bên thứ ba sẽ gây khó khăn cho việc duy trì một phiên đã đăng nhập trong iframe. Tham khảo https://www.cookiestatus.com để biết trạng thái hiện tại của việc chặn cookie trên nhiều trình duyệt. Dĩ nhiên, vấn đề này không chỉ xảy ra với các tiện ích bổ sung của Google Lớp học mà còn ảnh hưởng đến tất cả những trang web có bên thứ ba được đặt trong iframe. Nhiều đối tác của chúng tôi đã gặp phải vấn đề này.

Một số giải pháp chung là:

  • Mở một thẻ mới để tạo cookie trong bối cảnh bên thứ nhất. Một số trình duyệt cấp quyền truy cập vào cookie được tạo trong bối cảnh bên thứ nhất trong khi ở bối cảnh bên thứ ba.
  • Yêu cầu người dùng cho phép cookie của bên thứ ba. Không phải lúc nào bạn cũng có thể làm được điều này với tất cả người dùng.
  • Thiết kế các ứng dụng web một trang không dựa vào cookie.

Các phiên bản trình duyệt trong tương lai dự kiến sẽ có thêm nhiều quy định hạn chế về cookie. Tạo yêu cầu về tính năng để gửi ý kiến phản hồi cho Google về cách giảm mức độ hỗ trợ mà đối tác cần.

Cho phép tìm thấy các tiện ích bổ sung bằng biểu thức chính quy của URL

Giáo viên thường tạo bài tập có tệp đính kèm là đường liên kết. Để quảng bá việc sử dụng tiện ích bổ sung, bạn có thể chỉ định các biểu thức chính quy khớp với URL của những tài nguyên có thể truy cập trong tiện ích bổ sung. Nếu giáo viên đính kèm một đường liên kết khớp với một trong các biểu thức chính quy của bạn, thì họ sẽ thấy một hộp thoại có thể đóng, khuyến khích họ dùng thử tiện ích bổ sung của bạn. Họ chỉ thấy hộp thoại nếu tiện ích bổ sung đã được cài đặt cho tài khoản của họ.

Nếu bạn muốn cung cấp hành vi này cho giáo viên, hãy cung cấp cho danh bạ Google của bạn các biểu thức chính quy thích hợp. Nếu biểu thức chính quy mà bạn cung cấp quá rộng hoặc xung đột với một tiện ích bổ sung khác, thì biểu thức đó có thể được sửa đổi để bị hạn chế hơn hoặc khác biệt hơn.

Giáo viên chọn tệp đính kèm là đường liên kết Hình 1. Giáo viên chọn một tệp đính kèm là đường liên kết cho bài tập mới.

Giáo viên dán đường liên kết Hình 2. Giáo viên dán đường liên kết từ một nguồn bên thứ ba. Giáo viên đã cài đặt tiện ích bổ sung của bên thứ ba cho Lớp học.

Hộp thoại khám phá biểu thức chính quy Hình 3. Hộp thoại tương tác xuất hiện với giáo viên khi đường liên kết được dán khớp với biểu thức chính quy do nhà phát triển bên thứ ba chỉ định.

Nếu giáo viên chọn "Dùng thử ngay" trong cửa sổ bật lên như trong hình 3, họ sẽ được chuyển hướng đến iframe Khám phá tệp đính kèm của tiện ích bổ sung.