Vložení webového uživatelského rozhraní Azure Data Exploreru do prvku iframe

Platí pro: ✅Microsoft Fabric✅Azure Data Explorer

Webové uživatelské rozhraní Azure Data Exploreru je možné vložit do prvku iframe a hostovat ho na webech třetích stran. Tento článek popisuje, jak vložit webové uživatelské rozhraní Azure Data Exploreru do prvku iframe.

Všechny funkce jsou testovány pro přístupnost a podporují tmavé a světlé motivy na obrazovce.

Jak vložit webové uživatelské rozhraní do prvku iframe

Na svůj web přidejte následující kód:

<iframe
  src="https://dataexplorer.azure.com/?f-IFrameAuth=true&f-UseMeControl=false&workspace=<guid>"
></iframe>

Parametr f-IFrameAuth dotazu říká webovému uživatelskému rozhraní , aby nepřesměrovál , aby získal ověřovací token, a f-UseMeControl=false parametr říká webovému uživatelskému rozhraní , aby nezobsadl automaticky otevírané okno s informacemi o uživatelském účtu. Tyto akce jsou nezbytné, protože hostující web zodpovídá za ověřování.

Parametr workspace=<guid> dotazu vytvoří pro vložený prvek iframe samostatný pracovní prostor. Pracovní prostor je jednotka logiky, která obsahuje karty, dotazy, nastavení a připojení. Nastavením na jedinečnou hodnotu zabrání sdílení dat mezi vloženou a neintegrovanou verzí https://dataexplorer.azure.com.

Zpracování ověřování

Při vkládání webového uživatelského rozhraní zodpovídá za ověřování hostitelská stránka. Následující diagramy popisují tok ověřování.

K zpracování ověřování použijte následující postup:

1. V aplikaci si poslechněte zprávu getToken .

   window.addEventListener('message', (event) => {
      if (event.data.signature === "queryExplorer" && event.data.type === "getToken") {
        // CODE-1: Replace this placeholder with code to get the access token from Microsoft Entra ID and
        //         then post a "postToken" message with an access token and an event.data.scope
      }
   })    
   

2. Definujte funkci, která mapuje event.data.scope obor Microsoft Entra. V následující tabulce se můžete rozhodnout, jak se mapovat event.data.scope na obory Microsoft Entra:

   Prostředek	event.data.scope	Rozsah Microsoft Entra
   Cluster	query	https://{your_cluster}.{your_region}.kusto.windows.net/.default
   Graf	People.Read	People.Read, , User.ReadBasic.AllGroup.Read.All
   Řídicí panely	https://rtd-metadata.azurewebsites.net/user_impersonation	https://rtd-metadata.azurewebsites.net/user_impersonation

   Například následující funkce mapuje obory na základě informací v tabulce.

       function mapScope(scope) {
           switch(scope) {
               case "query": return ["https://your_cluster.your_region.kusto.windows.net/.default"];
               case "People.Read": return ["People.Read", "User.ReadBasic.All", "Group.Read.All"];
               default: return [scope]
           }
       }
   

3. Získejte přístupový token JWT z ověřování Provést jednostránkové aplikace (SPA) pro obor. Tento kód nahrazuje zástupný kód CODE-1.

   Můžete například použít @azure/MSAL-react k získání přístupového tokenu. V příkladu se používá funkce mapScope , kterou jste definovali dříve.

   import { useMsal } from "@azure/msal-react";
   const { instance, accounts } = useMsal();
   
   instance.acquireTokenSilent({
     scopes: mapScope(event.data.scope),
     account: accounts[0],
   })
   .then((response) =>
       var accessToken = response.accessToken
       // - CODE-2: Replace this placeholder with code to post a "postToken" message with an access token and an event.data.scope
   )
   

   Důležité

   K ověřování můžete použít pouze hlavní název uživatele (UPN), instanční objekty se nepodporují.

4. Publikujte zprávu postToken s přístupovým tokenem. Tento kód nahrazuje zástupný kód CODE-2:

        iframeWindow.postMessage({
            "type": "postToken",
            "message": // the access token your obtained earlier
            "scope": // event.data.scope as passed to the "getToken" message
        }, '*');
      }
   

   Důležité

   Hostitelské okno musí token před vypršením platnosti aktualizovat odesláním nové zprávy postToken s aktualizovanými tokeny. Jinak po vypršení platnosti tokenů se volání služby nezdaří.

Vložení řídicích panelů

Pokud chcete vložit řídicí panel, musí být mezi aplikací Microsoft Entra hostitele a službou řídicího panelu Azure Data Exploreru (RTD Metadata Service) vytvořen vztah důvěryhodnosti.

1. Postupujte podle kroků v ověřování jednostránkové aplikace (SPA).

2. Otevřete Azure Portal a ujistěte se, že jste přihlášeni ke správnému tenantovi. V pravém horním rohu ověřte identitu použitou k přihlášení k portálu.

3. V podokně prostředků vyberte ID> Microsoft Entra Registrace aplikací.

4. Vyhledejte aplikaci, která používá tok on-behalf-of , a otevřete ji.

5. Vyberte manifest.

6. Vyberte requiredResourceAccess.

7. Do manifestu přidejte následující položku:

     {
       "resourceAppId": "00001111-aaaa-2222-bbbb-3333cccc4444",
       "resourceAccess": [
           {
               "id": "388e2b3a-fdb8-4f0b-ae3e-0692ca9efc1c",
               "type": "Scope"
           }
       ]
     }
   

   • 00001111-aaaa-2222-bbbb-3333cccc4444 je ID aplikace služby řídicího panelu Azure Data Exploreru.
   • 388e2b3a-fdb8-4f0b-ae3e-0692ca9efc1c je oprávnění user_impersonation.

8. V manifestu uložte změny.

9. Vyberte oprávnění rozhraní API a ověřte, že máte novou položku: Služba metadat RTD.

10. V části Microsoft Graph přidejte oprávnění pro People.Read, User.ReadBasic.Alla Group.Read.All.

11. V Azure PowerShellu přidejte pro aplikaci následující nový instanční objekt:

    New-MgServicePrincipal -AppId 00001111-aaaa-2222-bbbb-3333cccc4444
    

    Pokud narazíte na Request_MultipleObjectsWithSameKeyValue chybu, znamená to, že aplikace už je v tenantovi, což znamená, že se úspěšně přidala.

12. Na stránce oprávnění rozhraní API vyberte Udělit správci souhlas se souhlasem pro všechny uživatele.

 <iframe src="https://dataexplorer.azure.com/dashboards?[feature-flags]" />

"f-IFrameAuth": true,
"f-PersistAfterEachRun": true,
"f-Homepage": false,
"f-ShowPageHeader": false,
"f-ShowNavigation": false,
"f-DisableExploreQuery": false,

Hlavní příznaky

Hostitelská aplikace může chtít řídit určité aspekty uživatelského prostředí. Skryjte například podokno připojení nebo zakažte připojení k jiným clusterům. V tomto scénáři webový průzkumník podporuje příznaky funkcí.

Příznak funkce lze použít v adrese URL jako parametr dotazu. Pokud chcete zakázat přidávání dalších clusterů, použijte https://dataexplorer.azure.com/?f-ShowConnectionButtons=false v hostitelské aplikaci.

Související obsah

• Přehled dotazovacího jazyka Kusto (KQL)
• Psaní dotazů Kusto
• Ukázka vkládání