Egyoldalas alkalmazás létrehozása és üzembe helyezése a Power Pagesben

Power Pages támogatja az egyoldalas alkalmazáskód (SPA) integrálását a következő generációs AI-támogatású eszközökkel, például GitHub Copilot. Ez a funkció lehetővé teszi, hogy a fejlesztők modern, összetevőalapú előtérbeli szolgáltatásokat hozzanak Power Pages természetes nyelv használatával kódolási felületként.

Az AI által létrehozott kód irányításával, tesztelésével és finomhangolásával a készítők az ismétlődő megvalósítási feladatokról a magasabb szintű vezénylésre helyezhetik át a hangsúlyt. Ez a megközelítés intuitívabb, kreatívabb fejlődést biztosít a nagyvállalati szintű minőség és szabványok fenntartása mellett.

Ez a cikk bemutatja, hogyan:

Hozzon létre és állítson be egy SPA-projektet a Power Pages számára a Power Platform CLI (PAC CLI) használatával.
Töltsön fel és töltsön le kódegységeket a Power Pages webhelyére és onnan.
Állítson be egy biztonságos és karbantartható projektstruktúrát.
Ismerje meg az SPA-alapú és a hagyományos Power Pages implementációk közötti főbb különbségeket.

Megjegyzés:

A SPA-webhely egy Power Pages webhely, amely teljes egészében a felhasználó böngészőjében fut (ügyféloldali megjelenítés). A hagyományos Power Pages helyektől eltérően az SPA-helyeket csak forráskód- és parancssori felületi eszközökkel kezelheti.
A Power Platform Git-integrációja nem támogatott az egyoldalas alkalmazások (SPA) webhelyein a Power Pages-ben.

Prerequisites

Mielőtt hozzákezdene, győződjön meg arról, hogy:

Power Pages környezet admin jogosultságokkal.
A Power Platform parancssori felület (PAC CLI) 1.44.x vagy újabb verziója telepítve és hitelesítve van.
Egy Power Pages webhely a 9.7.4.x vagy újabb verzióban.
JavaScript-fájlok feltöltésének engedélyezése Dataverse-környezetekben.
Helyi Git-adattár az egyéni előtérbeli projekttel, például React, Angular vagy Vue.

JavaScript-fájlok feltöltésének engedélyezése

Alapértelmezés szerint egyes Dataverse-környezetek blokkolják a JavaScript-fájlok.js feltöltését. Ha a következő hibaüzenetet kapja : "Az importálás sikertelen: A melléklet nem érvényes típus, vagy túl nagy. Nem tölthető fel és nem tölthető le.", frissítse a környezeti beállításokat, hogy engedélyezze ezt a fájltípust.

A környezet felügyeleti központjának beállításainak Power Platform módosításához kövesse az alábbi lépéseket:

Jelentkezzen be a Power Platform felügyeleti központba.
Válassza a navigációs ablakban található Kezelés elemet.
A Kezelés panelen válassza a Környezetek lehetőséget.
Válasszon egy környezetet.
A parancssávon válassza a Beállítások lehetőséget.
Bontsa ki a Termék csomópontot, és válassza az Adatvédelem + biztonság lehetőséget.
A Letiltott mellékletek szakaszban távolítsa el js a fájlkiterjesztések listájából.
Válassza az Mentésgombot.

Egyoldalas alkalmazáswebhely létrehozása és üzembe helyezése

Power Pages SPA-webhelyek kezelése a PAC CLI-parancsokkal történik, upload-code-site és download-code-site. A webhely feltöltése után a Power Pages-ben megjelenik az Inaktív webhelyek listában. Aktiválja a webhelyet, hogy elérhetővé váljon a felhasználók számára.

Egyoldalas alkalmazáswebhely feltöltése

A pac pages upload-code-site paranccsal töltse fel a helyi forráskódját és a kompiled objektumokat a Power Pages környezetbe.

Szemantika

pac pages upload-code-site `
  --rootPath <local-source-folder> `
  [--compiledPath <build-output-folder>] `
  [--siteName <site-display-name>]

Parameters

Paraméter	Alias	Szükséges	Description
`--rootPath`	`-rp`	Igen	A webhely forrásfájljait tartalmazó helyi mappa
`--compiledPath`	`-cp`	No	Út az összegyűjtött eszközökhöz, például a Reacthez `build`
`--siteName`	`-sn`	No	A Power Pages-webhely megjelenítendő neve

Example

pac pages upload-code-site `
  --rootPath "../your-project" `
  --compiledPath "./build" `
  --siteName "Contoso Code Site"

Ha nem rendelkezik meglévő projektel, próbálja ki az SPA-webhelyek minta implementációit a React, az Angular és a Vue használatával.

Feltöltési paraméterek definiálása a `powerpages.config.json`

Testre szabhatja a upload-code-site parancs viselkedését úgy, hogy belevesz egy powerpages.config.json fájlt a webhely gyökérmappájába. Ha ez a fájl megtalálható, a upload-code-site parancsot csak a --rootPath paraméterrel futtassa. A parancs beolvassa a fennmaradó értékeket a konfigurációs fájlból. Ha a parancssori argumentumokat és a konfigurációs értékeket is megadja, a parancssori argumentumok elsőbbséget élveznek.

Konfigurációs mezők

Field	Típus	Szükséges	Description
`siteName`	karakterlánc	Igen	A Power Pages webhely megjelenítendő neve.
`compiledPath`	karakterlánc	Igen	A lefordított kimeneti könyvtár elérési útja (például a Vite `dist` vagy a React `build` mappa), a `powerpages.config.json` fájlhoz viszonyítva.
`defaultLandingPage`	karakterlánc	Igen	Az a HTML-oldal, amelyet a webhely gyökerének megnyitásakor szolgálnak ki, a(z) `compiledPath`-hoz viszonyítva értendő (általában `index.html`).
`bundleFilePatterns`	string[]	No	A webhely `web-files` fájljait azonosító helyettesítő karakterek listája, amelyeket a parancssori felület eltávolít az új build feltöltése előtt. Ezzel a mezővel megtisztíthatja az elavult, tartalomkivonatos kötegeket, hogy a régi eszközök ne halmozódjanak fel a webhelyen. Lásd a kód felosztását és a csomagok törlését.
`includeSource`	boolean	No	Amikor `true`, a parancs a forráskódot is feltölti a lefordított állományok mellett. Alapértelmezett érték: `false`.
`sourceExcludePatterns`	string[]	No	A feltöltésből kizárandó forrásfájlok helyettesítő karaktermintái. Csak akkor érvényes, ha `includeSource` van `true` (például kihagyhat `node_modules` vagy helyi környezeti fájlokat).

A legpontosabb és legnaprakészebb mezőreferenciáért tekintse meg a powerpages.config.json sémát. Adja hozzá az egyező $schema tulajdonságot a konfigurációs fájlhoz az ellenőrzés és az automatikus kiegészítés engedélyezéséhez a JSON-sémát támogató szerkesztőkben.

Minta `powerpages.config.json`

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "index-*.js",
    "index-*.css"
  ]
}

Egyoldalas alkalmazáswebhely letöltése

A pac pages download-code-site paranccsal letöltheti egy meglévő webhely kódját egy helyi könyvtárba szerkesztés vagy biztonsági mentés céljából.

Szemantika

pac pages download-code-site `
  [--environment <env-url-or-guid>] `
  --path <local-target-folder> `
  --webSiteId <site-guid> `
  [--overwrite]

Parameters

Paraméter	Alias	Szükséges	Description
`--environment`	`-env`	No	Dataverse-környezet (GUID vagy teljes URL-cím). Alapértelmezés szerint az aktív hitelesítési profil
`--path`	`-p`	Igen	Helyi könyvtár a helykód letöltéséhez
`--webSiteId`	`-id`	Igen	A Power Pages SPA-webhely webhelyrekordjának GUID azonosítója
`--overwrite`	`-o`	No	Meglévő fájlok felülírása a célkönyvtárban, ha léteznek

Example

pac pages download-code-site `
  --environment "https://contoso.crm.dynamics.com" `
  --path "./downloaded-site" `
  --webSiteId "11112222-bbbb-3333-cccc-4444dddd5555" `
  --overwrite

A webhely aktiválása és tesztelése

Lépjen a Power Pages.
Válassza az Inaktív webhelyek lehetőséget, keresse meg a webhelyet, és válassza az Újraaktiválás lehetőséget.
Ha a webhely aktív, nyissa meg a webhely URL-címét a telepítés ellenőrzéséhez.

Tip

Minden későbbi upload-code-site parancs automatikusan frissíti az aktív helyet.

A projekt felépítése és konfigurációja

A konzisztens projektelrendezés segít biztosítani a helyes feltöltési viselkedést.

/your-project
│
├─ src/                       ← Your source code, like React components
├─ build/                     ← Compiled assets, output of the `npm run build` command
├─ powerpages.config.json     ← Optional CLI configuration file
└─ README.md

Az opcionális powerpages.config.json fájl segítségével testreszabhatja a upload-code-site parancs működését.

Kód felosztása és csomagtisztítás

Az egyoldalas alkalmazások növekedésével egy JavaScript-csomag nagy méretűvé és lassan betölthetővé válik. A modern buildeszközök megoldják ezt a problémát a kódfelosztással. Ez a technika kisebb adattömbökre bontja az alkalmazást, amelyeket a böngésző igény szerint letölt (például csak akkor, ha a felhasználó egy adott útvonalra navigál). Minden egyes darab fájlnevében szerepel egy tartalomhash, például Dashboard-BSbmIXoe.js, így a böngészők hosszú ideig gyorsítótárazhatják, és csak akkor töltik le újra, ha a tartalma megváltozik.

A kódfelosztás a Power Pages SPA-webhelyekre jellemző üzembe helyezési szempontot vezet be: mivel minden build új kivonatolt fájlneveket hoz létre, az ismétlődő upload-code-site futtatások a régi kivonatolt fájlokat hagyják hátra a webhelyen. Sok telepítés során ezek az árván maradt adattöredékek felhalmozódnak a webhely web-files elemében. A bundleFilePatterns mező a powerpages.config.json fájlban arra szolgál, hogy rendbe tegye őket.

Kódfelosztás engedélyezése

A kódfelosztást az előtérbeli buildelési eszköz kezeli, nem a Power Pages, így a megközelítés a használt keretrendszertől és csomagkezelőtől függ. A leggyakoribb technika az alkalmazás egyes részeinek dinamikus importálással való betöltése, amely gyakran az útvonal vagy a nézet szintjén van alkalmazva, hogy minden szakasz csak akkor töltődjön le, amikor a felhasználó hozzá navigál (lusta betöltés).

Az olyan csomagcsomagolók, mint a Vite, a webpack és az esbuild is csoportosíthatják a modulokat nevesített adattömbökbe. A pontos konfigurációért tekintse meg a keretrendszer és a csomagkezelő dokumentációját.

dist/assets/
├─ index-BJltBIP-.js        ← app entry
├─ index-DMwMk7hv.css       ← styles
├─ Dashboard-BSbmIXoe.js    ← lazy route chunk
├─ InvoiceList-DwjrGrAI.js  ← lazy route chunk
└─ InvoiceDetail-D3DVGkeM.js← lazy route chunk

Bármelyik módszert is választja, az eredmény ugyanaz, és ez az üzembe helyezés szempontjából fontos rész: a build több kimeneti fájlt bocsát ki, amelyek mindegyike tartalmaz egy tartalomkivonatot a nevében. Mivel ezek a kivonatok megváltoznak, amikor egy fájl tartalma megváltozik, minden build más fájlneveket hoz létre. A következő szakaszok ismertetik, hogyan tarthatja tisztán a Dataverse-környezeteket a nevek változásakor.

Hogyan tisztítja meg a `upload-code-site` az elavult csomagokat

A lefordított erőforrások feltöltése előtt a upload-code-site töröl a webhely web-files könyvtárában található minden olyan fájlt, amely megfelel a bundleFilePatterns helyettesítőkarakter-mintának, majd feltölti az aktuális buildet. Ez a törlés, majd feltöltés viselkedés biztosítja, hogy az üzembe helyezett fájlkészlet megegyezzen a legutóbb lefordított kimenettel, ahelyett hogy az egyes build-eket az előzőekre rétegezné.

Ahhoz, hogy a törlés működjön, a bundleFilePatterns helyettesítő karakteres mintáinak meg kell egyezniük a build által létrehozott fájlnevekkel. Attól függően, hogy a fordítóeszköze hogyan nevezi el a fájlokat, kétféleképpen biztosíthatja a pontosságukat.

1. lehetőség: Helyettesítő karakterek mintáinak listázása közvetlenül

Számos buildelési eszköz megtartja a stabil névelőtagot, és csak a tartalomkivonatot módosítja, például index-[hash].js. Ha a kimeneti fájlnevek egy ehhez hasonló kiszámítható mintát követnek, listázz egy helyettesítő karaktermintát mindegyikben bundleFilePatterns. Nincs szükség további eszközökre:

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "index-*.js",
    "index-*.css"
  ]
}

Egy helyettesítőminta, például index-*.js, minden összeállításkor illeszkedik arra a fájlra, a hash értéktől függetlenül. Adjon hozzá egy bejegyzést kimeneti fájlonként, és adjon hozzá egy új mintát, amikor a build új kimeneti fájlt kezd létrehozni.

2. lehetőség: Helyettesítő karakterek mintáinak létrehozása a buildelés utáni szkripttel

Ezt a módszert akkor használja, ha a kimeneti fájlnevek nem követnek kiszámítható mintát, vagy ha az alkalmazás sok olyan fájlt hoz létre, amelynek a neve megváltozik az útvonalak hozzáadásakor és eltávolításakor, ami a kézzel karbantartott lista hibáját eredményezi. Egy rövid szkript, amely a build után fut, átvizsgálja a lefordított kimenetet, és minden egyes előállított fájlhoz egy helyettesítő karakteres mintára írja át a bundleFilePatterns elemet. Ha például egy fordítóeszköz a fájlokat [name]-[hash].[ext] néven hozza létre, a szkript a Dashboard-BSbmIXoe.js elemet a Dashboard-*.js mintára egyszerűsíti.

scripts/postbuild.js:

#!/usr/bin/env node

/**
 * Post-build script: scans dist/assets/ and updates powerpages.config.json
 * with bundleFilePatterns that match all Vite-generated chunks.
 *
 * This ensures `pac pages upload-code-site` cleans up old hashed bundles
 * on each deploy instead of accumulating stale files.
 *
 * Usage: node scripts/postbuild.js
 * Or via npm: "postbuild": "node scripts/postbuild.js" in package.json
 */

import { readdirSync, readFileSync, writeFileSync } from 'fs'
import { join } from 'path'

const ROOT = join(import.meta.dirname, '..')
const DIST_ASSETS = join(ROOT, 'dist', 'assets')
const CONFIG_PATH = join(ROOT, 'powerpages.config.json')

// Vite output format: [name]-[hash].[ext]
// We want to extract "name" and "ext" to produce "name-*.ext" patterns
const HASH_PATTERN = /^(.+)-[A-Za-z0-9_-]{6,12}\.(js|css)$/

try {
  const files = readdirSync(DIST_ASSETS)
  const patternSet = new Set()

  for (const file of files) {
    const match = file.match(HASH_PATTERN)
    if (match) {
      const [, baseName, ext] = match
      patternSet.add(`${baseName}-*.${ext}`)
    }
  }

  const patterns = [...patternSet].sort()

  if (patterns.length === 0) {
    console.log('No hashed bundles found in dist/assets/ — skipping config update.')
    process.exit(0)
  }

  // Read current config
  const config = JSON.parse(readFileSync(CONFIG_PATH, 'utf-8'))
  const oldPatterns = config.bundleFilePatterns || []

  // Check if update is needed
  const oldSet = new Set(oldPatterns)
  const newSet = new Set(patterns)
  const changed = oldSet.size !== newSet.size || [...newSet].some(p => !oldSet.has(p))

  if (!changed) {
    console.log(`bundleFilePatterns already up-to-date (${patterns.length} patterns).`)
    process.exit(0)
  }

  // Update config
  config.bundleFilePatterns = patterns
  writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2) + '\n', 'utf-8')

  console.log(`Updated powerpages.config.json with ${patterns.length} bundle patterns:`)
  for (const p of patterns) {
    console.log(`  ${p}`)
  }
} catch (err) {
  console.error('postbuild error:', err.message)
  process.exit(1)
}

Illessze be a szkriptet a buildfolyamatba, hogy az mindig a csomagoló után fusson:

{
  "scripts": {
    "build": "tsc -b && vite build && node scripts/postbuild.js"
  }
}

Most már egy üzembe helyezéshez elég két parancs, és a webhelyen soha nem halmozódnak fel árván maradt darabok:

npm run build
pac pages upload-code-site --rootPath .

A build után a powerpages.config.json pontosan az aktuális csomagokat tükrözi, például:

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "Dashboard-*.js",
    "InvoiceDetail-*.js",
    "InvoiceList-*.js",
    "index-*.css",
    "index-*.js"
  ]
}

Hitelesítés és engedélyezés

Power Pages SPA-webhelyek ugyanazt a biztonsági modellt használják mint a hagyományos Power Pages helyek.

Identitásszolgáltatók konfigurálása

Lépjen a Power Pages.
Keresse meg webhelyét, és válassza a Szerkesztés lehetőséget.
Válassza ki a biztonsági>identitásszolgáltatókat.
identitás-szolgáltatók hozzáadása vagy beállítása, például Microsoft Entra ID.
Minden új webhely automatikusan rendelkezik egy alapértelmezett Microsoft Entra ID szolgáltatóval.

Felhasználói környezet elérése a kódban

Hitelesítési metaadatok lekérése a kliensen:

Hitelesítési URL-cím:

A Microsoft Entra ID szolgáltatói vagy bejelentkezési URL-címe a következő:
```
https://login.windows.net/<tenantId>
```
Keresse meg a többi konfigurált identitásszolgáltató hitelesítési URL-címét a Power Pages><your site>>Biztonság>Identitásszolgáltatók> konfigurációs beállításaiban.

Felhasználó adatai:

window["Microsoft"].Dynamic365.Portal.User

Minta React-folyamat

import { IconButton, Tooltip } from '@mui/material';
import {
    Login,
    Logout
} from '@mui/icons-material';
import React from 'react';
export const AuthButton = () => {
    const username = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.userName ?? "";
    const firstName = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.firstName ?? "";
    const lastName = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.lastName ?? "";
    const tenantId = (window as any)["Microsoft"]?.Dynamic365?.Portal?.tenant ?? "";
    const isAuthenticated = username !== "";
    const [token, setToken] = React.useState<string>("");

    React.useEffect(() => {
        const fetchAntiForgeryToken = async (): Promise<string> => {
            try {
                const tokenEndpoint = "/_layout/tokenhtml";

                const response = await fetch(tokenEndpoint, {});

                if (response.status !== 200) {
                    throw new Error(`Failed to fetch token: ${response.status}`);
                }

                const tokenResponse = await response.text();                
                const valueString = 'value="';
                const terminalString = '" />';
                const valueIndex = tokenResponse.indexOf(valueString);

                if (valueIndex === -1) {
                    throw new Error('Token not found in response');
                }

                const requestVerificationToken = tokenResponse.substring(
                    valueIndex + valueString.length,
                    tokenResponse.indexOf(terminalString, valueIndex)
                );

                return requestVerificationToken || '';
            } catch (error) {
                console.warn('[Impersonation] Failed to fetch anti-forgery token:', error);
                return '';
            }
        };

        const getToken = async () => {
            try {
                const token = await fetchAntiForgeryToken();
                setToken(token);
            } catch (error) {
                console.error('Error fetching token:', error);
            }
        };
        getToken();
    }, []);

    return (
        <div className="flex items-center gap-4">
            {isAuthenticated ? (
                <>
                    <span className="text-sm">Welcome {firstName + " " + lastName}</span>
                    <Tooltip title="Logout">
                        <IconButton color="primary" onClick={() => window.location.href = "/Account/Login/LogOff?returnUrl=%2F"}>
                            <Logout />
                        </IconButton>
                    </Tooltip>
                </>
            ) : (
                <form action="/Account/Login/ExternalLogin" method="post">
                    <input name="__RequestVerificationToken" type="hidden" value={token} />
                    <Tooltip title="Login">
                        <IconButton name="provider" type="submit" color="primary" value={`https://login.windows.net/${tenantId}/`}>
                            <Login />
                        </IconButton>
                    </Tooltip>
                </form>
            )}
        </div>
    );
};

Power Pages webes API-k használata

A fejlesztők Power Pages webes API-k használatával tölthetnek be tartalmakat a felhasználói felületre, illetve rekordokat hozhatnak létre, frissíthetnek és törölhetnek. Az API-k használata előtt győződjön meg arról, hogy a szükséges webes API-k engedélyezve vannak, és hogy a megfelelő táblaengedélyek és webes szerepkörök megfelelően vannak konfigurálva.


// Create query to get all cards from Dataverse
const fetchCards = async () => {
    const response = await fetch("/_api/cr7ae_creditcardses");
    const data = await response.json();
    const cards = data.value;
    const returnData = [];

    // Loop through the cards and get the name and id of each card
    for (let i = 0; i < cards.length; i++) {
        const card = cards[i];
        const cardName = card.cr7ae_name;
        const cardId = card.cr7ae_creditcardsid;
        const features = card.cr7ae_features
            ?.split(',')
            .map((feature: string) => feature.trim());
        const type = card.cr7ae_type;
        const image = card.cr7ae_image;
        const category = card.cr7ae_category
            ?.split(',')
            .map((cat: string) => cat.trim());
        
        // ...additional processing/pushing to returnData...
    }

    return returnData;
};

Helyi fejlesztés beállítása a localhostból érkező webes API-hívások Microsoft Entra ID-hitelesítéssel történő engedélyezésével

A fejlesztőknek gyorsabb iterációs ciklusokra, helyi hibakeresési és gyakori újratöltési képességekre van szükségük az alkalmazások létrehozásakor. Az SPA támogatja ezeket a munkafolyamatokat azáltal, hogy engedélyezi a biztonságos webes API-hívásokat localhost Microsoft Entra ID (Azure AD) v1-hitelesítéssel.

Ez a beállítás a következőket teszi lehetővé:

Futtassa az alkalmazást helyileg a teljes hitelesítés támogatásával.
Használjon modern fejlesztőeszközöket, például a Vite-et a gyors újratöltéshez és a gyors visszajelzéshez.
Kerülje a CORS-problémákat a Power Pages webes API-k meghívása során.
Felgyorsíthatja a fejlesztést anélkül, hogy módosításokat helyez üzembe a portálon.

Ez a konfiguráció hatékony helyi fejlesztési élményt tesz lehetővé az SPA számára, így a fejlesztők gyorsan készíthetnek, tesztelhetnek és iterálhatnak a teljes API-hozzáféréssel és hitelesítéssel.

Important

Hitelesítéshez csak Microsoft Entra v1-végpontokat használjon.
A tulajdonosi hitelesítés csak a 9.7.6.6.6-os vagy újabb portálverziókban támogatott.
Ezeket a beállításokat csak fejlesztési környezetekben alkalmazza.

Konfigurációs lépések

SPA-hitelesítés engedélyezése
1. A Azure portálon nyissa meg a portálon regisztrált Microsoft Entra alkalmazást.
2. Engedélyezze az egyoldalas alkalmazás (SPA) hitelesítését.
3. Adja hozzá a(z) localhost elemet átirányítási URI-ként a Single-page application platformkonfiguráció használatával. További információ : Átirányítási URI hozzáadása az alkalmazásban.
  - Átirányítási URI: http://localhost:<port>/.

Webhelybeállítások hozzáadása

Adja hozzá ezeket a webhelybeállításokat a Power Pagesben:

Authentication/BearerAuthentication/Enabled = true
Authentication/BearerAuthentication/Protocol = OpenIdConnect
Authentication/BearerAuthentication/Provider = AzureAD

ADAL.js használata hitelesítéshez
- Ügyféloldali hitelesítés implementálása ADAL.jshasználatával.
Megjegyzés:

MSAL.js nem kompatibilis, mert Power Pages Microsoft Entra v1-végpontokat használ, míg az MSAL v2-t. A kiállító formátuma verziónként eltérő.
Engedélyezési fejléc hozzáadása
- Adja meg ezt a fejlécet az összes webes API-kéréshez:
```
Authorization: Bearer <id_token>
```
Webhely láthatóságának beállítása nyilvánosra
- Ez a beállítás lehetővé teszi localhost a webhely elérését fejlesztési és tesztelési célokra.

Fejlesztési proxy konfigurálása

Ha a Vite-ot használja, adja hozzá ezt a kódot a CORS-problémák elkerülése érdekében vite.config.js :

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/_api': {
        target: 'https://site-foo.powerappsportals.com',
        changeOrigin: true,
        secure: true
      }
    }
  }
});

Különbségek a meglévő Power Pages helyektől

Az alábbi táblázat az ezzel a funkcióval létrehozott SPA-webhelyek és a hagyományos Power Pages helyek közötti főbb különbségeket foglalja össze:

Tulajdonság	Egyoldalas alkalmazáswebhely viselkedése
Kiszolgálóoldali frissítés	Mindig a webhely gyökéroldalát adja vissza, az ügyféloldali útválasztó pedig alútvonalakat jelenít meg.
Útvonal-ütközések	Az ügyféloldali útvonalak elsőbbséget élveznek, és a frissítés visszaesik a gyökérbe.
Lap munkaterület	A lapok munkaterülete nem támogatott. Ügyfél-útválasztás és ügyfélwebhely-lapok használata. Az oldalszintű biztonság érdekében ellenőrizze a hozzárendelt webes szerepköröket a globális felhasználói objektummal, és feltételesen renderelje a felhasználói felületet.
Stílus munkaterület	A stílus munkaterülettel való formázás nem támogatott. Használja a keretrendszer stílusát, például CSS, CSS-in-JSvagy segédprogramosztályokat.
Lokalizáció	Egynyelvű támogatás. Ügyféloldali erőforrás-betöltés végrehajtása.
Liquid sablonok	A Liquid-kód és a Liquid-sablonok nem támogatottak. Adatok elérése a keretrendszer sablonmotorjával és webes API-jával.

GYIK

Milyen támogatás érhető el az egység- és integrációs teszteléshez?

Jelenleg nincs beépített támogatás az egység- és integrációs teszteléshez. A készítőknek helyben vagy a CI/CD-folyamataikban kell megírniuk és végrehajtaniuk ezeket a teszteket.

Támogatott a WebAssembly használatával történő Power Fx-integráció?

Ez a képesség jelenleg nem támogatott.

Elérhető a forráskód a Power Pages?

A készítők jelenleg TypeScript vagy GitHub Copilot Ügynök használatával hozhatnak létre webhelyeket. A lefordított JavaScript- és CSS-fájlok elérhetők, és szerkeszthetők Visual Studio Code. A HTML-fájlok közvetlen és kiterjedt szerkesztése azonban jelenleg nem támogatott.

Létrehozhatok egy összetevőt külsőleg ezzel a funkcióval, és elhozhatom egy Power Pages webhelyre?

Nem, ezzel a funkcióval nem hozhat létre külsőleg létrehozott összetevőt egy meglévő Power Pages webhelyre.

Hozzáadhatok beépített összetevőket, például listákat és űrlapokat?

A beépített összetevők, például listák és űrlapok hozzáadása jelenleg nem támogatott. A React keretrendszer és a webes API-k használatával azonban létrehozhat egyéni űrlapokat és listákat.

Engedélyezhetem egyoldalas alkalmazás helyét PWA-ként a Beállítás munkaterületről?

No. A SPA-webhelyek nem támogatják a progresszív webalkalmazás (PWA)beállítását a munkaterület beállításakor. Ez a korlátozás azt jelenti, hogy a Mobile szakaszban nem engedélyezheti a webhelyet PWA-ként. Ha olyan PWA-képességeket szeretne hozzáadni, mint például a telepíthető alkalmazásélmények és az offline oldalak, implementálja őket a keretrendszer kódjában. Például adjon hozzá egy webalkalmazás-jegyzéket és egy szolgáltatásmunkást.

Hogyan működik a verziókövetés?

A fejlesztők Power Platform Git-integrációt használhatnak a verziókövetéshez. Azonban csak az összegyűjtött webfájlok kerülnek a tárolóba, a teljes forráskód nem.

Ezek az oldalak támogatják a SEO-t?

Mivel az egyoldalas alkalmazásoldalak a React keretrendszerrel készülnek, és kliensoldali renderelést használnak, a SEO-támogatás korlátozott.

Milyen Power Pages biztonsági és szabályozási támogatást nyújtanak az SPA-webhelyek?

Power Pages a webes API-hívások táblaengedélyeit és biztonsági webes szerepköreit kényszeríti ki, biztosítva, hogy az adathozzáférés megfeleljen a felhasználói szerepköröknek. Az window["Microsoft"].Dynamic365.Portal.User objektum használatával lekérheti az alapszintű felhasználói tulajdonságokat, és testre szabhatja a felhasználói élményt a felhasználói személyiségek alapján.

Ezenkívül az egyoldalas alkalmazáswebhelyek támogatják:

A nyilvános és privát webhelykonfigurációkat
Az irányítási beállításokat, beleértve a névtelen adathozzáférés szabályozását
A hitelesítésszolgáltató konfigurációit

Ezek a funkciók biztosítják az egyéni összetevők biztonságos és megfelelő integrációját Power Pages.

Microsoft Power Platform parancssori felület
Tutorial: Microsoft Power Platform parancssori felület használata Power Pages
A Visual Studio Code bővítmény használata

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2026-07-21

Egyoldalas alkalmazás létrehozása és üzembe helyezése a Power Pagesben

Prerequisites

JavaScript-fájlok feltöltésének engedélyezése

Egyoldalas alkalmazáswebhely létrehozása és üzembe helyezése

Egyoldalas alkalmazáswebhely feltöltése

Szemantika

Parameters

Example

Feltöltési paraméterek definiálása a powerpages.config.json

Konfigurációs mezők

Minta powerpages.config.json

Egyoldalas alkalmazáswebhely letöltése

Szemantika

Parameters

Example

A webhely aktiválása és tesztelése

A projekt felépítése és konfigurációja

Kód felosztása és csomagtisztítás

Kódfelosztás engedélyezése

Hogyan tisztítja meg a upload-code-site az elavult csomagokat

1. lehetőség: Helyettesítő karakterek mintáinak listázása közvetlenül

2. lehetőség: Helyettesítő karakterek mintáinak létrehozása a buildelés utáni szkripttel

Hitelesítés és engedélyezés

Identitásszolgáltatók konfigurálása

Felhasználói környezet elérése a kódban

Minta React-folyamat

Power Pages webes API-k használata

Helyi fejlesztés beállítása a localhostból érkező webes API-hívások Microsoft Entra ID-hitelesítéssel történő engedélyezésével

Konfigurációs lépések

Különbségek a meglévő Power Pages helyektől

GYIK

Milyen támogatás érhető el az egység- és integrációs teszteléshez?

Támogatott a WebAssembly használatával történő Power Fx-integráció?

Elérhető a forráskód a Power Pages?

Létrehozhatok egy összetevőt külsőleg ezzel a funkcióval, és elhozhatom egy Power Pages webhelyre?

Hozzáadhatok beépített összetevőket, például listákat és űrlapokat?

Engedélyezhetem egyoldalas alkalmazás helyét PWA-ként a Beállítás munkaterületről?

Hogyan működik a verziókövetés?

Ezek az oldalak támogatják a SEO-t?

Milyen Power Pages biztonsági és szabályozási támogatást nyújtanak az SPA-webhelyek?

Kapcsolódó információk

Visszajelzés

További források

Feltöltési paraméterek definiálása a `powerpages.config.json`

Minta `powerpages.config.json`

Hogyan tisztítja meg a `upload-code-site` az elavult csomagokat