Tích hợp ứng dụng canvas vào trang web và dịch vụ khác

Các ứng dụng mà bạn xây dựng thường hữu ích nhất khi có sẵn tại nơi mọi người làm việc. Bằng cách nhúng các ứng dụng canvas vào iframe, bạn có thể tích hợp các ứng dụng đó vào trang web và các dịch vụ khác, chẳng hạn như Power BI hoặc SharePoint.

Trong chủ đề này, chúng tôi sẽ chỉ cho bạn cách đặt các tham số cho ứng dụng nhúng; sau đó, chúng tôi sẽ nhúng ứng dụng Đặt hàng tài sản vào một trang web.

Bạn cũng có thể tích hợp các ứng dụng canvas vào SharePoint Online mà không sử dụng iframe. Thông tin thêm: Sử dụng phần web Power Apps.

Đặt tham số URI cho ứng dụng của bạn

Nếu bạn có một ứng dụng muốn nhúng, bước đầu tiên là đặt tham số cho Mã định danh tài nguyên đồng nhất (URI) để iframe biết nơi tìm ứng dụng, URI có dạng sau:

https://apps.powerapps.com/play/[AppID]?source=iframe

Dành cho người dùng GCC

https://apps.gov.powerapps.us/play/[AppID]?source=iframe

Điều duy nhất bạn phải làm là thay thế ID của ứng dụng cho [AppID] trong URI (bao gồm '[' & ']'). Chúng tôi sẽ chỉ cho bạn cách nhận được giá trị đó trong thời gian ngắn, nhưng trước tiên, đây là tất cả các tham số có trong URI:

• [appID] - Cung cấp ID của ứng dụng sẽ chạy.
• tenantid - là tham số tùy chọn để hỗ trợ quyền truy cập của khách và xác định đối tượng thuê nào sẽ mở ứng dụng từ đó.
• screenColor - được dùng để cung cấp trải nghiệm tải ứng dụng tốt hơn cho người dùng của bạn. Tham số này ở định dạng RGBA (giá trị đỏ, giá trị xanh lục, giá trị xanh lam, alpha) và kiểm soát màu của màn hình trong khi tải ứng dụng. Tốt nhất là nên đặt giống với màu của biểu tượng ứng dụng.
• nguồn - không ảnh hưởng đến ứng dụng, nhưng bạn nên thêm một tên mô tả dể tham chiếu nguồn nhúng.
• Cuối cùng, bạn có thể thêm bất kỳ tham số tùy chỉnh nào bạn muốn bằng hàm Param(), và những giá trị đó có thể được ứng dụng sử dụng. Chúng được thêm vào cuối URI, chẳng hạn như [AppID]?source=iframe&param1=value1&param2=value2. Các tham số này chỉ được đọc trong khi khởi chạy ứng dụng. Nếu cần thay đổi các tham số, bạn phải khởi chạy lại ứng dụng. Lưu ý rằng chỉ mục đầu tiên sau [appid] mới có "?"; sau đó, sử dụng "&" như minh họa ở đây.

Nhận ID ứng dụng

ID ứng dụng có sẵn trên powerapps.com. Đối với ứng dụng bạn muốn nhúng:

1. Trong powerapps.com, trên tab Ứng dụng, nhấp vào nhấn vào dấu ba chấm ( . . . ), sau đó nhấp vào Chi tiết.

   

2. Sao chép ID ứng dụng.

   

3. Thay thế giá trị [AppID] trong URI. Đối với ứng dụng Đặt hàng tài sản, URI sẽ giống như thế này:

   https://apps.powerapps.com/play/76897698-91a8-b2de-756e-fe2774f114f2?source=iframe
   

Bạn có thể cần cho phép cửa sổ bật lên trong trình duyệt khi nhúng một ứng dụng vào trang web sử dụng hàm Khởi chạy() để khởi chạy ứng dụng hoặc trang web.

Nhúng ứng dụng vào trang web

Việc nhúng ứng dụng của bạn bây giờ đơn giản như việc thêm iframe vào mã HTML cho trang web của bạn (hoặc bất kỳ dịch vụ nào khác hỗ trợ iframe, chẳng hạn như Power BI hoặc SharePoint):

<iframe width="[W]" height="[H]" src="https://apps.powerapps.com/play/[AppID]?source=website&screenColor=rgba(165,34,55,1)" allow="geolocation; microphone; camera"/>

Chỉ định các giá trị cho chiều rộng và chiều cao của iframe và thay thế ID của ứng dụng cho [AppID].

Hình ảnh sau đây cho biết ứng dụng Đặt hàng tài sản được nhúng trong trang web mẫu của Contoso.

Hãy ghi nhớ các điểm sau đây để xác thực người dùng ứng dụng của bạn:

• Nếu trang web của bạn sử dụng Microsoft Entra xác thực dựa trên ID, bạn không cần đăng nhập thêm.
• Nếu trang web của bạn sử dụng bất kỳ cơ chế đăng nhập nào khác hoặc không được xác thực, người dùng của bạn sẽ thấy lời nhắc đăng nhập trên iframe. Sau khi đăng nhập, họ sẽ có thể chạy ứng dụng miễn là tác giả của ứng dụng đã chia sẻ với họ.

Như bạn thấy, việc nhúng các ứng dụng thật đơn giản và hiệu quả. Tính năng nhúng cho phép bạn mang ứng dụng đến đúng nơi bạn và khách hàng làm việc – trang web, bảng thông tin Power BI, trang SharePoint, v.v.