Az Azure Data Explorer webes felhasználói felületének beágyazása iframe-be

Cikk
01/10/2024

Az Azure Data Explorer webes felhasználói felülete beágyazható egy iframe-be, és külső webhelyeken üzemeltethető. Ez a cikk bemutatja, hogyan ágyazhatja be az Azure Data Explorer webes felhasználói felületét egy iframe-be.

Képernyőkép az Azure Data Explorer webes U I-ről.

Minden funkció akadálymentességi teszten van, és támogatja a sötét és világos képernyős témákat.

A webes felhasználói felület beágyazása iframe-be

Adja hozzá a következő kódot a webhelyhez:

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

A f-IFrameAuth lekérdezési paraméter arra utasítja a webes felhasználói felületet, hogy ne irányítsa át a hitelesítési jogkivonat lekéréséhez, a paraméter pedig arra utasítja a f-UseMeControl=false webes felhasználói felületet, hogy ne jelenítse meg a felhasználói fiók adatainak előugró ablakát. Ezekre a műveletekre azért van szükség, mert az üzemeltető webhely felelős a hitelesítésért.

A workspace=<guid> lekérdezési paraméter külön munkaterületet hoz létre a beágyazott iframe-hez. A munkaterület egy logikai egység, amely lapokat, lekérdezéseket, beállításokat és kapcsolatokat tartalmaz. Ha egyedi értékre állítja, megakadályozza az adatmegosztást a beágyazott és a nem beágyazott verzió https://dataexplorer.azure.comközött.

Hitelesítés kezelése

A webes felhasználói felület beágyazásakor az üzemeltetési oldal felel a hitelesítésért. Az alábbi ábrák a hitelesítési folyamatot írják le.

A hitelesítés kezeléséhez kövesse az alábbi lépéseket:

Az alkalmazásban figyelje meg a getToken üzenetet.

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
   }
})

Definiáljon egy függvényt, amely megfelelteti a event.data.scope Microsoft Entra hatókörnek. Az alábbi táblázat segítségével döntse el, hogyan képezheti le event.data.scope a hatóköröket Microsoft Entra:

Erőforrás	event.data.scope	Microsoft Entra hatókör
Fürt	`query`	`https://{your_cluster}.{your_region}.kusto.windows.net/.default`
Graph	`People.Read`	`People.Read`, `User.ReadBasic.All`, `Group.Read.All`
Irányítópultok	`https://rtd-metadata.azurewebsites.net/user_impersonation`	`https://rtd-metadata.azurewebsites.net/user_impersonation`

Az alábbi függvény például a táblázatban szereplő információk alapján leképezi a hatóköröket.

    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]
        }
    }

JWT hozzáférési jogkivonat lekérése a hatókör Microsoft Entra hitelesítési végpontjáról. Ez a kód lecseréli a CODE-1 helyőrzőt.

Használhatja például @azure/MSAL-react a hozzáférési jogkivonat lekérésére. A példa a korábban definiált mapScope függvényt használja.
```
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
)
```
Fontos

A hitelesítéshez csak egyszerű felhasználónév (UPN) használható, a szolgáltatásnevek nem támogatottak.
PostToken-üzenet közzététele a hozzáférési jogkivonattal. Ez a kód felváltja a CODE-2 helyőrzőt:
```
     iframeWindow.postMessage({
         "type": "postToken",
         "message": // the access token your obtained earlier
         "scope": // event.data.scope as passed to the "getToken" message
     }, '*');
   }
```
Fontos

Az üzemeltetési ablaknak frissítenie kell a jogkivonatot a lejárat előtt egy új postToken üzenet frissített jogkivonatokkal való elküldésével. Ellenkező esetben a jogkivonatok lejárata után a szolgáltatáshívások sikertelenek lesznek.

Tipp

A mintaprojektben megtekintheti a hitelesítést használó alkalmazásokat .

Irányítópultok beágyazása

Irányítópult beágyazásához megbízhatósági kapcsolatot kell létesíteni a gazdagép Microsoft Entra alkalmazása és az Azure Data Explorer irányítópult-szolgáltatás (RTD Metaadat-szolgáltatás) között.

Kövesse a Web Client (JavaScript) hitelesítés és engedélyezés lépéseit.
Nyissa meg a Azure Portal, és győződjön meg arról, hogy a megfelelő bérlőbe jelentkezett be. A jobb felső sarokban ellenőrizze a portálra való bejelentkezéshez használt identitást.
Az Erőforrások panelen válassza Microsoft Entra azonosítót>Alkalmazásregisztrációk.
Keresse meg a helyszíni folyamatot használó alkalmazást, és nyissa meg.
Válassza a Jegyzék elemet.
Válassza a requiredResourceAccess lehetőséget.
A jegyzékben adja hozzá a következő bejegyzést:
```
  {
    "resourceAppId": "35e917a9-4d95-4062-9d97-5781291353b9",
    "resourceAccess": [
        {
            "id": "388e2b3a-fdb8-4f0b-ae3e-0692ca9efc1c",
            "type": "Scope"
        }
    ]
  }
```
- 35e917a9-4d95-4062-9d97-5781291353b9az Azure Data Explorer irányítópult-szolgáltatás alkalmazásazonosítója.
- 388e2b3a-fdb8-4f0b-ae3e-0692ca9efc1c a user_impersonation engedély.
Mentse a módosításokat a Jegyzékfájlban.
Válassza az API-engedélyek lehetőséget , és ellenőrizze, hogy van-e új bejegyzése: RTD Metadata Service.
A Microsoft Graph alatt adjon hozzá engedélyeket a , User.ReadBasic.Allés Group.Read.Alla People.Readszámára.
A Azure PowerShell adja hozzá a következő új szolgáltatásnevet az alkalmazáshoz:
```
New-MgServicePrincipal -AppId 35e917a9-4d95-4062-9d97-5781291353b9
```
Ha a Request_MultipleObjectsWithSameKeyValue hibát tapasztalja, az azt jelenti, hogy az alkalmazás már szerepel a bérlőben, jelezve, hogy sikeresen hozzáadták.
Az API-engedélyek lapon válassza a Rendszergazdai hozzájárulás megadása az összes felhasználó hozzájárulásához lehetőséget.

Megjegyzés

Ha a lekérdezési terület nélkül szeretne irányítópultot beágyazni, használja a következő beállítást:

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

hol [feature-flags] van:

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

Funkciójelölők

Fontos

Az f-IFrameAuth=true iframe működéséhez a jelző szükséges. A többi jelző nem kötelező.

Előfordulhat, hogy az üzemeltetési alkalmazás szeretné szabályozni a felhasználói élmény bizonyos aspektusait. Rejtse el például a kapcsolatpanelt, vagy tiltsa le a csatlakozást más fürtökhöz. Ebben a forgatókönyvben a Web Explorer támogatja a funkciójelölőket.

Az URL-címben funkciójelölő használható lekérdezési paraméterként. Más fürtök hozzáadásának letiltásához használja https://dataexplorer.azure.com/?f-ShowConnectionButtons=false az üzemeltetési alkalmazásban.

Beállítás	Description	Alapértelmezett érték
f-ShowShareMenu	A Megosztás menüelem megjelenítése	true
f-ShowConnectionButtons	A Kapcsolat hozzáadása gomb megjelenítése új fürt hozzáadásához	true
f-ShowOpenNewWindowButton	A megnyitás a webes felhasználói felületen gomb megjelenítése, amely megnyitja az új böngészőablakot, és a megfelelő fürtre és adatbázisra https://dataexplorer.azure.com mutat a hatókörben	hamis
f-ShowFileMenu	A fájlmenü megjelenítése (letöltés, lap, tartalom stb.)	true
f-ShowToS	Az Azure Data Explorer szolgáltatási feltételeire mutató hivatkozás megjelenítése a beállítások párbeszédpanelen	true
f-ShowPersona	A felhasználónév megjelenítése a beállítások menüben, a jobb felső sarokban.	true
f-UseMeControl	A felhasználó fiókadatainak megjelenítése	true
f-IFrameAuth	Ha igaz, a webkezelő elvárja, hogy az iframe kezelje a hitelesítést, és egy üzeneten keresztül adjon meg egy jogkivonatot. Ez a paraméter iframe-forgatókönyvekhez szükséges.	hamis
f-PersistAfterEachRun	A böngészők általában megmaradnak a kiürítési eseményben. A kiürítési esemény azonban nem mindig aktiválódik iframe-ben való üzemeltetéskor. Ez a jelző az egyes lekérdezések futtatása után aktiválja a megőrzött helyi állapoteseményt . Ez korlátozza az esetleges adatvesztést, hogy csak olyan új lekérdezésszövegre legyen hatással, amely még soha nem futott.	hamis
f-ShowSmoothIngestion	Ha igaz, akkor az adatbázisra való jobb kattintáskor jelenítse meg a betöltési varázsló felületét	true
f-RefreshConnection	Ha igaz, mindig frissíti a sémát az oldal betöltésekor, és soha nem függ a helyi tárolótól	hamis
f-ShowPageHeader	Ha igaz, megjeleníti az Azure Data Explorer címét és beállításait tartalmazó oldalfejlécet	true
f-HideConnectionPane	Ha igaz, a bal oldali kapcsolatpanel nem jelenik meg	hamis
f-SkipMonacoFocusOnInit	Kijavítottuk a fókusz problémáját az iframe-en való üzemeltetéskor	hamis
f-Homepage	A kezdőlap engedélyezése és az új felhasználók átirányítása hozzá	true
f-ShowNavigation	HA igaz, a bal oldali navigációs panel jelenik meg	true
f-DisableDashboardTopBar	HA igaz, elrejti az irányítópult felső sávját	hamis
f-DisableNewDashboard	HA igaz, elrejti az új irányítópult hozzáadásának lehetőségét	hamis
f-DisableNewDashboard	HA igaz, elrejti a keresés lehetőségét az irányítópultok listájában	hamis
f-DisableDashboardEditMenu	HA igaz, elrejti az irányítópult szerkesztésének lehetőségét	hamis
f-DisableDashboardFileMenu	HA igaz, elrejti a fájl menügombját egy irányítópulton	hamis
f-DisableDashboardShareMenu	HA igaz, elrejti a megosztás menügombját egy irányítópulton	hamis
f-DisableDashboardDelete	HA igaz, elrejti az irányítópult törlés gombját	hamis
f-DisableTileRefresh	HA igaz, letiltja a csempék frissítési gombját az irányítópulton	hamis
f-DisableDashboardAutoRefresh	HA igaz, letiltja a csempék automatikus frissítését egy irányítópulton	hamis
f-DisableExploreQuery	HA igaz, letiltja a csempék feltáró lekérdezés gombját	hamis
f-DisableCrossFiltering	HA igaz, letiltja a keresztszűrés funkciót az irányítópultokon	hamis
f-HideDashboardParametersBar	HA igaz, elrejti a paramétersávot egy irányítópulton	hamis

Az Azure Data Explorer webes felhasználói felületének beágyazása iframe-be

A webes felhasználói felület beágyazása iframe-be

Hitelesítés kezelése

Irányítópultok beágyazása

Funkciójelölők

Visszajelzés

Visszajelzés

További források

Az Azure Data Explorer webes felhasználói felületének beágyazása iframe-be

A webes felhasználói felület beágyazása iframe-be

Hitelesítés kezelése

Irányítópultok beágyazása

Funkciójelölők

Kapcsolódó tartalom

Visszajelzés

Visszajelzés

További források