Integrowanie aplikacji kanwy z witrynami internetowymi i innymi usługami

Tworzone aplikacje są często najbardziej przydatne, gdy są dostępne bezpośrednio w miejscu, gdzie ludzie rzeczywiście wykonują swoją pracę. Poprzez osadzenie aplikacji kanwy w ramce iframe, można zintegrować te aplikacje z witrynami sieci Web i innymi usługami, takimi jak Power BI lub SharePoint.

W tym temacie pokażemy sposób ustawiania parametrów dla osadzania aplikacji, a następnie osadzimy naszą aplikację porządkowania zasobów w witrynie internetowej.

Pulpit nawigacyjny usługi Power BI z osadzoną aplikacją.

Uwaga

  • Tylko użytkownicy usługi Power Apps w tej samej dzierżawie mogą mieć dostęp do osadzonej aplikacji.
  • Osadzenie aplikacji kanwy w macierzystej aplikacji stacjonarnej nie jest obsługiwane. Nie obejmuje to integracji strony pierwszej, na przykład Power Apps w aplikacji Teams).

Możesz również zintegrować usługę aplikacje kanwy z usługą SharePoint Online bez użycia elementu iframe. Więcej informacji: Office: używanie części internetowej usługi Power Apps.

Ustawianie parametrów identyfikatora URI dla aplikacji

Jeśli masz aplikację, którą chcesz osadzić, pierwszym krokiem jest ustawienie parametrów dla identyfikatora URI, dzięki czemu element iframe wie, gdzie szukać aplikacji. Identyfikator URI ma następującą postać:

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

Dla użytkowników GCC

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

Ważne

W sierpniu 2019 roku format identyfikatora URI został zmieniony z https://web.powerapps.com/webplayer na https://apps.powerapps.com/play. Zaktualizuj wszystkie osadzone ramki iframe, tak aby korzystały z nowego formatu URI. Odwołania do poprzedniego formatu będą przekierowywane do nowego identyfikatora URI w celu zapewnienia zgodności.

Poprzedni format:

https://web.powerapps.com/webplayer/iframeapp?source=iframe&appId=/providers/Microsoft.PowerApps/apps/[AppID]

Jedyną czynnością, którą musisz wykonać, jest zastąpienie identyfikatora aplikacji elementem [AppID] w identyfikatorze URI (razem ze znakami „[” & „]”). Wkrótce pokażemy Ci, jak uzyskać tę wartość, ale najpierw tutaj znajdziesz wszystkie parametry dostępne w identyfikatorze URI:

  • [appID] – zawiera identyfikator aplikacji do uruchomienia.
  • tenantid – to opcjonalny parametr służący do obsługi dostępu z dostępem gościnnym oraz określający, z której dzierżawy ma zostać otwarta aplikacja.
  • screenColor – służy do zapewnienia lepszego ładowania aplikacji dla użytkowników. Ten parametr jest zapisany w formacie RGBA (wartość czerwonego, wartość zielonego, wartość niebieskiego, kanał alfa) i steruje kolorem ekranu podczas ładowania aplikacji. Najlepiej ustawić taki sam kolor jak kolor ikony swojej aplikacji.
  • źródło – nie ma wpływu na aplikację, ale zalecamy dodanie nazwy opisowej do odwoływania się do źródła osadzania.
  • Na koniec możesz dodać wszelkie parametry niestandardowe, używając funkcji Param(), przy czym te wartości mogą być wykorzystywane przez Twoją aplikację. Są one dodawane do końca identyfikatora URI, na przykład [AppID]?source=iframe&param1=value1&param2=value2. Te parametry są odczytywane tylko podczas uruchamiania aplikacji. Jeśli zachodzi konieczność ich zmiany, należy ponownie uruchomić aplikację. Należy pamiętać, że element [AppID] powinien mieć wartość "?"; po tym, jak to przedstawiono w tym artykule, należy użyć funkcji "&".

Pobierz identyfikator aplikacji

Identyfikator aplikacji jest dostępny w witrynie powerapps.com. Dla aplikacji, którą chcesz osadzić:

  1. W witrynie powerapps.com na karcie Aplikacje kliknij lub naciśnij przycisk wielokropka ( . . . ), a następnie pozycję Szczegóły.

    Przechodzenie do szczegółów aplikacji.

  2. Skopiuj Identyfikator aplikacji.

    Kopiowanie identyfikatora aplikacji ze szczegółów.

  3. Zastąp wartość [AppID] w identyfikatorze URI. W przypadku naszej aplikacji do porządkowania zasobów identyfikator URI wygląda następująco:

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

Może być konieczne wyrażenie zgody na wyświetlanie wyskakujących okienek w przeglądarce w przypadku osadzenia aplikacji w witrynie sieci Web, która korzysta z funkcji uruchamiania () w celu uruchomienia strony sieci Web lub aplikacji.

Osadzanie aplikacji w witrynie internetowej

Osadzanie aplikacji jest teraz bardzo proste. Wystarczy dodać element iframe do kodu HTML Twojej witryny (lub jakiejkolwiek innej usługi, która obsługuje elementy iframe, takiej jak Power BI lub 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"/>

Określ wartości dla szerokości i wysokości elementu iframe oraz zastąp identyfikator swojej aplikacji dla [AppID].

Uwaga

Umieść allow="geolocation; microphone; camera" w elemencie iframe kodu HTML, aby pozwolić na wykorzystanie tych możliwości przez aplikacje w przeglądarce Google Chrome.

Na poniższej ilustracji przedstawiono aplikację do porządkowania zasobów osadzoną w przykładowej witrynie internetowej firmy Contoso.

Witryna internetowa firmy Contoso z osadzoną aplikacją.

Należy pamiętać o następujących kwestiach dotyczących uwierzytelniania użytkowników w Twojej aplikacji:

  • Jeśli witryna internetowa używa uwierzytelniania opartego na usłudze tożsamości Microsoft Entra, nie jest wymagane dodatkowe logowanie.
  • Jeśli witryna internetowa korzysta z jakiegokolwiek innego mechanizmu logowania lub nie jest uwierzytelniona, użytkownicy zobaczą monit logowania dla elementu iframe. Po zalogowaniu będą oni mogli uruchamiać aplikację tak długo, jak długo autor aplikacji będzie im ją udostępniał.

Jak widać, osadzanie aplikacji jest proste i skuteczne. Osadzanie umożliwia przeniesienie aplikacji bezpośrednio do Twojego miejsca pracy i miejsc pracy Twoich klientów — witryn internetowych, pulpitów nawigacyjnych usługi Power BI, stron usługi SharePoint itd.

Uwaga

Czy możesz poinformować nas o preferencjach dotyczących języka dokumentacji? Wypełnij krótką ankietę. (zauważ, że ta ankieta jest po angielsku)

Ankieta zajmie około siedmiu minut. Nie są zbierane żadne dane osobowe (oświadczenie o ochronie prywatności).