웹 사이트 및 기타 서비스로 캔버스 앱 통합Integrate canvas apps into websites and other services

작성하는 앱은 종종 사람들이 작업 수행에 바로 사용할 수 있을 때 가장 유용합니다.The apps that you build are often most useful when they're available right where people do their work. 캔버스 앱을 iframe에 포함하여 웹 사이트 및 Power BI 또는 SharePoint와 같은 다른 서비스에 해당 앱을 통합할 수 있습니다.By embedding canvas apps in an iframe, you can integrate those apps into websites and other services, such as Power BI or SharePoint.

이 토픽에서는 앱 포함을 위해 매개 변수를 설정하는 방법을 보여 준 다음 웹 사이트에 자산 순서 지정 앱을 포함합니다.In this topic, we'll show you how to set parameters for app embedding; then we'll embed our Asset Ordering app in a website.

포함된 앱이 있는 Power BI 대시보드

다음과 같은 제한 사항을 염두에 두십시오.Keep the following restrictions in mind:

  • 동일한 테넌트의 PowerApps 사용자만 포함된 앱에 액세스할 수 있습니다.Only PowerApps users in the same tenant can access the embedded app.
  • Internet Explorer 11을 사용하여 PowerApps에 액세스하려면 호환성 보기를 해제해야 합니다.To access PowerApps using Internet Explorer 11, you must turn off Compatibility View.

또한 iframe을 사용하지 않고 SharePoint Online에 캔버스 앱을 통합할 수 있습니다.You can also integrate canvas apps into SharePoint Online without using an iframe. 자세한 정보: PowerApps 웹 파트 사용.More information: Use the PowerApps web part.

앱에 대한 URI 매개 변수 설정Set URI parameters for your app

포함하려는 앱이 있는 경우 첫 번째 단계는 iframe이 앱을 찾을 수 있는 위치를 알 수 있도록 URI(Uniform Resource Identifier)에 대한 매개 변수를 설정하는 것입니다.If you have an app you want to embed, the first step is to set parameters for the Uniform Resource Identifier (URI), so that the iframe knows where to find the app. URI는 다음과 같은 형식입니다.The URI is in the following form:



URI가 페이지에 더 잘 표시되도록 줄 바꿈을 추가했습니다.We added a line break so the URI displays better on the page.

수행해야 하는 유일한 작업은 URI에서 [AppID]에 대한 앱 ID를 대체하는 것입니다('[' & ']' 포함).The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). 해당 값을 가져오는 방법을 곧 보여 줄 예정이지만 먼저 URI에서 사용할 수 있는 모든 매개 변수는 다음과 같습니다.We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • [appID] - /providers/Microsoft.PowerApps/apps/[AppID]의 형식입니다.[appID] - is in the format /providers/Microsoft.PowerApps/apps/[AppID]. 실행할 앱의 ID를 제공합니다.It provides the ID of the app to run.
  • screenColor - 사용자를 위해 더 나은 앱 로딩 환경을 제공하는 데 사용됩니다.screenColor - is used to provide a better app loading experience for your users. 이 매개 변수는 RGBA(빨강 값, 녹색 값, 파랑 값, 알파) 형식이며 앱이 로드하는 동안 화면 색상을 제어합니다.This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. 앱의 아이콘과 동일한 색으로 설정하는 것이 좋습니다.It is best to set it to the same color as your app's icon.
  • source - 앱에 영향을 주지 않지만 포함하는 원본을 참조하기 위해 설명이 포함된 이름을 추가하는 것이 좋습니다.source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • 마지막으로 Param() 함수를 사용하여 원하는 사용자 지정 매개 변수를 추가할 수 있으며 해당 값을 앱에서 사용할 수 있습니다.Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. [AppID]&param1=value1과 같이 URI의 끝에 추가됩니다.They are added to the end of the URI, such as [AppID]&param1=value1. 이러한 매개 변수는 앱 시작 동안에만 읽혀집니다. 변경해야 하는 경우 앱을 다시 시작해야 합니다.These parameters are read only during launch of the app; if you need to change them, you need to re-launch the app.

앱 ID 가져오기Get the App ID

앱 ID는 powerapps.com에서 제공됩니다.The app ID is available on powerapps.com. 포함하려는 앱의 경우:For the app you want to embed:

  1. powerapps.com 탭에서 줄임표( . . . )를 클릭하거나 탭한 다음In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . 세부 정보를 클릭하거나 탭합니다.), then Details.

    앱 세부 정보로 이동

  2. 앱 ID를 복사합니다.Copy the App ID.

    세부 정보에서 앱 ID 복사

  3. URI에서 [AppID] 값을 대체합니다.Substitute the [AppID] value in the URI. 자산 순서 지정 앱의 경우 URI는 다음과 같습니다.For our Asset Ordering app, the URI looks like this:


웹 사이트에 앱 포함Embed your app in a website

앱을 포함하는 것은 이제 사이트(또는 Power BI 또는 SharePoint와 같은 iframe을 지원하는 다른 서비스)에 대한 HTML 코드에 iframe을 포함하는 것만큼 간단합니다.Embedding your app is now as simple as adding the iframe to the HTML code for your site (or any other service that supports iframes, such as Power BI or SharePoint):

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

iframe 너비 및 높이에 대한 값을 지정하고 [AppID]에 대해 앱의 ID를 대체합니다.Specify values for the iframe width and height, and substitute the ID of your app for [AppID].


앱이 Google Chrome에서 이러한 기능을 사용할 수 있도록 허용하려면 iframe HTML 코드에 allow="geolocation; microphone; camera"를 포함하세요.Include allow="geolocation; microphone; camera" in your iframe HTML code to allow your apps to use these capabilities on Google Chrome.

다음 이미지는 Contoso 샘플 웹 사이트에 포함된 자산 순서 지정 앱을 보여 줍니다.The following image shows the Asset Ordering app embedded in a Contoso sample website.

포함된 앱이 있는 Contoso 웹 사이트

앱의 사용자를 인증하기 위해 다음 사항을 염두에 두십시오.Keep the following points in mind for authenticating users of your app:

  • 웹 사이트가 AAD(Azure Active Directory) 기반 인증을 사용하는 경우 추가 로그인이 필요하지 않습니다.If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • 웹 사이트가 다른 로그인 메커니즘을 사용하거나 인증되지 않는 경우 사용자에게 iframe에서 로그인 프롬프트를 표시합니다.If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. 로그인한 후에 앱의 작성자가 공유하는 한 앱을 실행할 수 있습니다.After they sign-in, they will be able to run the app as long as the author of the app has shared it with them.

보시다시피 앱 포함은 간단하면서도 강력합니다.As you can see, embedding apps is simple and powerful. 포함을 통해 사용자와 사용자의 고객이 작업하는 위치(웹 사이트, Power BI 대시보드, SharePoint 페이지 등)에 앱을 바로 가져올 수 있습니다.Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.