Tworzenie i wdrażanie aplikacji jednostronicowej w Power Pages

Power Pages obsługuje integrowanie kodu aplikacji jednostronicowej (SPA) utworzonego przy użyciu narzędzi wspomaganych przez sztuczną inteligencję nowej generacji, takich jak GitHub Copilot. Ta funkcja umożliwia deweloperom wprowadzanie nowoczesnych środowisk frontonu opartych na składnikach do Power Pages przy użyciu języka naturalnego jako interfejsu kodowania.

Kierując, testując i udoskonalając kod generowany przez sztuczną inteligencję, twórcy mogą przenieść skupienie z powtarzalnych zadań implementacji na orkiestrację wyższego poziomu. Takie podejście umożliwia bardziej intuicyjne, kreatywne opracowywanie przy zachowaniu jakości i standardów klasy korporacyjnej.

W tym artykule pokazano, jak wykonać następujące działania:

Utwórz i skonfiguruj projekt SPA dla Power Pages przy użyciu Power Platform CLI (PAC CLI).
Przekazywanie i pobieranie zasobów kodu do i z witryny Power Pages.
Skonfiguruj bezpieczną i łatwą w utrzymaniu strukturę projektu.
Poznaj kluczowe różnice między implementacjami opartymi na SPA i tradycyjnymi Power Pages.

Note

Witryna SPA to witryna Power Pages, która całkowicie działa w przeglądarce użytkownika (renderowanie po stronie klienta). W przeciwieństwie do tradycyjnych witryn Power Pages witrynami SPA zarządza się wyłącznie za pomocą kodu źródłowego i narzędzi wiersza polecenia (CLI).
Integracja Power Platform Git nie jest dostępna dla witryn internetowych typu Single-Page Application (SPA) w Power Pages.

Wymagania wstępne

Przed rozpoczęciem upewnij się, że masz następujące elementy:

Środowisko Power Pages z uprawnieniami admin.
Power Platform CLI (PAC CLI) wersja 1.44.x lub nowsza zainstalowana i uwierzytelniona.
Witryna Power Pages w wersji 9.7.4.x lub nowszej.
Zezwalaj na przekazywanie plików JavaScript w środowiskach Dataverse.
Lokalne repozytorium Git z niestandardowym projektem front-endowym, takim jak React, Angular lub Vue.

Zezwalaj na przekazywanie plików JavaScript

Domyślnie niektóre środowiska Dataverse blokują przekazywanie plików JavaScript (.js). Jeśli wystąpi błąd "Importowanie nie powiodło się: załącznik nie jest prawidłowym typem lub jest za duży. Nie można go przekazać ani pobrać. Zaktualizuj ustawienia środowiska, aby zezwolić na ten typ pliku.

Aby dostosować ustawienia w centrum administracyjnym Power Platform dla danego środowiska, wykonaj następujące kroki:

Zaloguj się w Centrum administracyjnym Power Platform.
W okienku nawigacji wybierz pozycję Zarządzaj.
W okienku Zarządzaj, wybierz Środowiska.
Wybierz środowisko.
Na pasku poleceń wybierz Ustawienia.
Rozwiń Produkt, a następnie kliknij opcję Prywatność + Bezpieczeństwo.
W sekcji Zablokowane załączniki usuń js z listy rozszerzeń plików.
Wybierz Zapisz.

Utwórz i wdróż witrynę SPA

Witryny Power Pages SPA są zarządzane za pomocą poleceń PAC CLI upload-code-site i download-code-site. Po przesłaniu witryny pojawi się ona w Power Pages na liście Nieaktywne witryny. Aktywuj witrynę, aby była dostępna dla użytkowników.

Prześlij stronę SPA

Użyj polecenia pac pages upload-code-site, aby przesłać lokalne zasoby źródłowe i skompilowane zasoby do środowiska Power Pages.

Syntax

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

Parameters

Parametr	Alias	Wymagania	Description
`--rootPath`	`-rp`	Yes	Folder lokalny zawierający pliki źródłowe witryny
`--compiledPath`	`-cp`	No	Ścieżka do skompilowanych zasobów, takich jak React `build`
`--siteName`	`-sn`	No	Nazwa wyświetlana witryny Power Pages

Example

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

Jeśli nie masz istniejącego projektu, wypróbuj przykładowe implementacje witryn SPA przy użyciu platform React, Angular i Vue.

Definiowanie parametrów przesyłania danych za pomocą `powerpages.config.json`

Dostosuj zachowanie upload-code-site polecenia, dołączając powerpages.config.json plik do folderu głównego witryny. Jeśli ten plik jest obecny, uruchom upload-code-site wyłącznie z parametrem --rootPath. Polecenie odczytuje pozostałe wartości z pliku konfiguracji. Jeśli podasz zarówno argumenty wiersza polecenia, jak i wartości konfiguracji, argumenty wiersza polecenia mają pierwszeństwo.

Pola konfiguracji

Pole	Typ	Wymagania	Description
`siteName`	ciąg	Yes	Nazwa wyświetlana witryny Power Pages.
`compiledPath`	ciąg	Yes	Ścieżka do skompilowanego katalogu wyjściowego (na przykład folderu Vite `dist` lub React `build`) względem `powerpages.config.json`.
`defaultLandingPage`	ciąg	Yes	Strona HTML wyświetlana po otwarciu katalogu głównego witryny, względem `compiledPath` (zazwyczaj `index.html`).
`bundleFilePatterns`	string[]	No	Lista wzorców z symbolami wieloznacznymi identyfikujących pliki w obszarze `web-files` witryny, które interfejs wiersza polecenia usuwa przed przekazaniem nowej kompilacji. Użyj tego pola, aby usunąć nieaktualne pakiety ze skrótami do treści, tak aby w witrynie nie gromadziły się stare zasoby. Zobacz Dzielenie kodu i oczyszczanie pakietu.
`includeSource`	boolean	No	Gdy `true`, polecenie przesyła kod źródłowy wraz ze skompilowanymi zasobami. Wartość domyślna to `false`.
`sourceExcludePatterns`	string[]	No	Wzorce z symbolami wieloznacznymi dla plików źródłowych, które mają zostać wykluczone z przekazywania. Dotyczy tylko wtedy, gdy `includeSource` jest `true` (na przykład do pomijania `node_modules` lub plików środowiska lokalnego).

Aby uzyskać najdokładniejsze i najbardziej aktualne informacje o polach, zobacz schemat powerpages.config.json. Dodaj zgodną $schema właściwość do pliku konfiguracji, aby włączyć walidację i autouzupełnianie w edytorach obsługujących schemat JSON.

Przykład `powerpages.config.json`

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

Pobierz stronę SPA

Użyj polecenia pac pages download-code-site, aby pobrać kod istniejącej witryny do lokalnego katalogu w celu edycji lub utworzenia kopii zapasowej.

Syntax

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

Parameters

Parametr	Alias	Wymagania	Description
`--environment`	`-env`	No	Środowisko Dataverse (GUID lub pełny adres URL). Domyślnie jest to aktywny profil uwierzytelniania
`--path`	`-p`	Yes	Lokalizacja katalogu do pobrania kodu strony
`--webSiteId`	`-id`	Yes	Identyfikator GUID rekordu witryny SPA Power Pages
`--overwrite`	`-o`	No	Zastępowania istniejących plików w katalogu docelowym, jeśli istnieją

Example

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

Aktywowanie i testowanie lokalizacji

Przejdź do Power Pages.
Wybierz Nieaktywne witryny, znajdź swoją witrynę i wybierz Reaktywuj.
Gdy witryna jest aktywna, przejdź do adresu URL witryny, aby sprawdzić wdrożenie.

Wskazówka

Każde późniejsze polecenie upload-code-site automatycznie aktualizuje aktywną witrynę.

Struktura i konfiguracja projektu

Spójny układ projektu pomaga zapewnić prawidłowe zachowanie przesyłania.

/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

Użyj opcjonalnego pliku powerpages.config.json, aby dostosować działanie polecenia upload-code-site.

Dzielenie kodu i czyszczenie pakietów

W miarę rozwoju aplikacji jednostronicowej pojedynczy pakiet JavaScript staje się duży i wolno ładowany. Nowoczesne narzędzia kompilacji rozwiązują ten problem z podziałem kodu. Ta technika dzieli aplikację na mniejsze fragmenty pobierane przez przeglądarkę na żądanie (na przykład tylko wtedy, gdy użytkownik przechodzi do określonej trasy). Każdy fragment jest emitowany za pomocą skrótu zawartości w nazwie pliku, takiego jak Dashboard-BSbmIXoe.js, dzięki czemu przeglądarki mogą buforować je przez długi czas i pobierać go ponownie tylko wtedy, gdy jego zawartość ulegnie zmianie.

Dzielenie kodu wprowadza aspekt wdrożeniowy specyficzny dla witryn SPA w usłudze Power Pages: ponieważ każda kompilacja tworzy nowe nazwy plików z haszami, kolejne uruchomienia upload-code-site pozostawiałyby w witrynie stare pliki z haszami. Po wielu wdrożeniach te oddzielone fragmenty gromadzą się w obszarze web-files witryny. Pole bundleFilePatterns w powerpages.config.json służy do ich czyszczenia.

Włączanie dzielenia kodu

Dzielenie kodu jest obsługiwane przez narzędzie do budowania frontendu, a nie przez Power Pages, więc podejście zależy od używanego frameworka i bundlera. Najczęstszą techniką jest ładowanie części aplikacji za pomocą importów dynamicznych, często stosowane na poziomie tras lub widoków, tak aby każda sekcja była pobierana dopiero wtedy, gdy użytkownik do niej nawiguje (leniwe ładowanie).

Pakiety, takie jak Vite, webpack i esbuild, mogą również grupować moduły w jawnie nazwane fragmenty. Aby uzyskać dokładną konfigurację, zobacz dokumentację platformy i pakietu.

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

Niezależnie od wybranego podejścia wynik jest taki sam i jest to część, która ma znaczenie dla wdrożenia: kompilacja emituje wiele plików wyjściowych, z których każda ma wartość skrótu zawartości w nazwie. Ponieważ te skróty zmieniają się przy każdej zmianie zawartości pliku, każda kompilacja tworzy inny zestaw nazw plików. W następnych sekcjach wyjaśniono, jak zachować czyste środowiska usługi Dataverse, gdy te nazwy się zmieniają.

Jak element `upload-code-site` usuwa nieaktualne pakiety

Przed przekazaniem skompilowanych zasobów element upload-code-site usuwa z obszaru web-files witryny każdego pliku, który pasuje do wzorca z symbolami wieloznacznymi w bundleFilePatterns, a następnie przekazuje bieżącą kompilację. Takie działanie polegające najpierw na usunięciu plików, a następnie ich przesłaniu sprawia, że wdrożony zestaw plików jest identyczny z najnowszym wynikiem kompilacji, zamiast nakładać każdą kompilację na poprzednią.

Aby czyszczenie działało poprawnie, wzorce z symbolami wieloznacznymi w bundleFilePatterns muszą odpowiadać nazwom plików generowanych przez proces kompilacji. Istnieją dwa sposoby, aby zachować ich poprawność, w zależności od tego, jak narzędzie do kompilacji nadaje nazwy plikom.

Opcja 1. Bezpośrednie wyświetlanie listy wzorców wieloznacznych

Wiele narzędzi kompilacji zachowuje stabilny prefiks nazwy i zmienia tylko skrót zawartości, taki jak index-[hash].js. Gdy nazwy plików wyjściowych mają przewidywalny wzorzec, tak jak tutaj, podaj wzorzec z symbolami wieloznacznymi dla każdej z nich w bundleFilePatterns. Nie są potrzebne żadne dodatkowe narzędzia:

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

Wzorzec z symbolami wieloznacznymi, taki jak index-*.js, dopasowuje ten plik przy każdej kompilacji, niezależnie od skrótu. Dodaj jeden wpis na plik wyjściowy i dodaj nowy wzorzec za każdym razem, gdy kompilacja zacznie tworzyć nowy plik wyjściowy.

Opcja 2. Generowanie wzorców wieloznacznych za pomocą skryptu po kompilacji

Użyj tego podejścia, gdy nazwy plików wyjściowych nie są zgodne z przewidywalnym wzorcem lub gdy aplikacja generuje wiele plików, których nazwy zmieniają się podczas dodawania i usuwania tras, co powoduje, że lista jest podatna na błędy obsługiwanej ręcznie. Krótki skrypt, który uruchamia się po kompilacji, skanuje skompilowane pliki wyjściowe i zastępuje bundleFilePatterns wzorcem wieloznacznym dla każdego wygenerowanego pliku. Na przykład, gdy narzędzie kompilacji nadaje plikom nazwy takie jak [name]-[hash].[ext], skrypt sprowadza Dashboard-BSbmIXoe.js do wzorca Dashboard-*.js.

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

Podłącz skrypt do kompilacji, aby zawsze był uruchamiany po pakiecie:

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

Teraz wdrożenie to dwa polecenia, a witryna nigdy nie gromadzi oddzielonych fragmentów:

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

Po kompilacji powerpages.config.json odzwierciedla dokładnie bieżące pakiety, na przykład:

{
  "$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"
  ]
}

Uwierzytelnianie i autoryzacja

Power Pages witryny SPA używają tego samego modelu bezpieczeństwa jak tradycyjne witryny Power Pages.

Konfigurowanie dostawców tożsamości

Przejdź do Power Pages.
Znajdź swoją lokalizację i wybierz pozycję Edytuj.
Wybierz Zabezpieczenia>Dostawcy tożsamości.
Dodaj lub skonfiguruj dostawców tożsamości, takich jak Microsoft Entra ID.
Każda nowa witryna automatycznie ma domyślnego dostawcę Microsoft Entra ID.

Uzyskiwanie dostępu do kontekstu użytkownika w kodzie

Pobierz metadane uwierzytelniania na kliencie:

Adres URL urzędu

Urząd lub adres URL logowania dla Microsoft Entra ID to:
```
https://login.windows.net/<tenantId>
```
Znajdź adres URL urzędu dla innych skonfigurowanych dostawców tożsamości, przechodząc do Power Pages><your site>>Bezpieczeństwo>Dostawcy tożsamości>.

Szczegóły użytkownika

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

Przykładowy przepływ React

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

Użyj webowych interfejsów API Power Pages

Programiści mogą używać internetowych interfejsów API usługi Power Pages do ładowania treści do interfejsu użytkownika lub tworzenia, aktualizowania i usuwania rekordów. Przed użyciem tych interfejsów API upewnij się, że wymagane internetowe interfejsy API są włączone i że odpowiednie uprawnienia tabeli i role internetowe są prawidłowo skonfigurowane.


// 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;
};

Skonfiguruj lokalne środowisko deweloperskie, umożliwiając wywołania interfejsu API sieciowego z serwera localhost przy użyciu uwierzytelniania Microsoft Entra ID.

Deweloperzy potrzebują szybszych cykli iteracji, lokalnego debugowania i możliwości ponownego ładowania podczas kompilowania aplikacji. SPA wspiera te przepływy pracy, umożliwiając bezpieczne wywołania interfejsu API Webowego z localhost przy użyciu uwierzytelniania Microsoft Entra ID (Azure AD) v1.

Ta konfiguracja umożliwia:

Uruchom aplikację lokalnie z pełną obsługą uwierzytelniania.
Używaj nowoczesnych narzędzi programistycznych, takich jak Vite , do ponownego ładowania i szybkiego przekazywania opinii.
Unikaj problemów z mechanizmem CORS podczas wywoływania interfejsów API w Power Pages.
Przyspieszanie programowania bez wdrażania zmian w portalu.

Ta konfiguracja umożliwia wydajne lokalne środowisko programistyczne dla SPA, dzięki czemu deweloperzy mogą tworzyć, testować i iterować szybko dzięki pełnej obsłudze dostępu do interfejsu API i uwierzytelniania.

Ważna

Do uwierzytelniania należy używać tylko punktów końcowych Microsoft Entra v1.
Uwierzytelnianie Bearer jest obsługiwane tylko w wersjach portalowych 9.7.6.6 lub nowszych.
Zastosuj te ustawienia tylko w środowiskach deweloperskich.

Kroki konfiguracji

Włączanie uwierzytelniania SPA
1. W portalu Azure otwórz aplikację Microsoft Entra zarejestrowaną w portalu.
2. Włącz uwierzytelnianie dla aplikacji jednostronicowej (SPA).
3. Dodaj localhost jako adres URI przekierowania za pomocą konfiguracji platformy Aplikacja jednostronicowa. Aby uzyskać więcej informacji, zobacz How to add a redirect URI in your application (Jak dodać identyfikator URI przekierowania w aplikacji).
  - Adres URI przekierowania: http://localhost:<port>/.

Dodawanie ustawień witryny

Dodaj następujące ustawienia witryny w usłudze Power Pages:

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

Używanie ADAL.js do uwierzytelniania
- Zaimplementuj uwierzytelnianie po stronie klienta przy użyciu ADAL.js.
Note

MSAL.js nie jest zgodna, ponieważ usługa Power Pages używa punktów końcowych usługi Microsoft Entra w wersji 1, podczas gdy biblioteka MSAL używa wersji 2. Format wystawcy różni się między wersjami.
Dodaj nagłówek autoryzacji
- Dołącz ten nagłówek do wszystkich żądań internetowego interfejsu API:
```
Authorization: Bearer <id_token>
```
Ustawianie widoczności witryny na publiczne
- To ustawienie umożliwia localhost dostęp do witryny na potrzeby programowania i testowania.

Konfigurowanie serwera proxy deweloperskiego

Jeśli używasz Vite, dodaj ten kod do vite.config.js, aby uniknąć problemów z mechanizmem CORS:

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

Różnice między istniejącymi witrynami Power Pages

Poniższa tabela zawiera podsumowanie kluczowych różnic między witrynami SPA utworzonymi za pomocą tej funkcji i tradycyjnych witryn Power Pages:

Funkcja	Zachowanie witryny SPA
Odświeżanie po stronie serwera	Zawsze zwraca stronę główną witryny, a router po stronie klienta renderuje trasy podrzędne.
Konflikty tras	Trasy po stronie klienta mają pierwszeństwo, a twarde odświeżenie powoduje powrót do katalogu głównego.
Obszar roboczy strony	Obszar roboczy strony nie jest obsługiwany. Użyj routingu klienta i stron klienta. Aby zapewnić bezpieczeństwo na poziomie strony, sprawdź przypisane role internetowe za pomocą globalnego obiektu użytkownika i warunkowo renderuj interfejs użytkownika.
Obszar roboczy Stylu	Stylizacja za pomocą obszaru roboczego stylu nie jest obsługiwana. Użyj stylów w swoim frameworku, takich jak CSS, CSS-in-JS lub klasy użytkowe.
Lokalizacja	Obsługa jednego języka. Zaimplementuj ładowanie zasobów po stronie klienta.
Szablony Liquid	Kod Liquid i szablony Liquid nie są obsługiwane. Uzyskuj dostęp do danych za pomocą silnika szablonów używanego przez Ciebie frameworka i interfejsów API sieci Web.

Często zadawane pytania

Jakie wsparcie jest dostępne w przypadku testów jednostkowych i integracyjnych?

Obecnie nie ma wbudowanej obsługi testów jednostkowych i integracyjnych. Twórcy powinni pisać i wykonywać te testy lokalnie lub w ramach potoków ciągłej integracji/ciągłego wdrażania.

Czy dostępna jest obsługa integracji Power Fx przy użyciu WebAssembly?

Ten scenariusz nie jest obecnie obsługiwany.

Czy kod źródłowy jest dostępny w Power Pages?

Obecnie twórcy mogą tworzyć witryny internetowe przy użyciu języka TypeScript lub agenta GitHub Copilot. Skompilowane pliki JavaScript i CSS są dostępne i można je edytować w Visual Studio Code. Jednak bezpośrednia i obszerna edycja plików HTML nie jest obecnie obsługiwana.

Czy mogę utworzyć składnik zewnętrznie przy użyciu tej funkcji i przenieść go do witryny Power Pages?

Nie, nie można przenieść zewnętrznego składnika do istniejącej witryny Power Pages przy użyciu tej funkcji.

Czy mogę dodawać gotowe składniki, takie jak listy i formularze?

Dodawanie gotowych składników, takich jak listy i formularze, nie jest obecnie obsługiwane. Można jednak tworzyć niestandardowe formularze i listy przy użyciu platformy React i internetowych interfejsów API.

Czy mogę włączyć witrynę SPA jako aplikację PWA z obszaru roboczego konfigurowania?

No. Witryny SPA nie obsługują ustawienia aplikacji internetowej Progressive Web App (PWA) w sekcji konfigurowania obszaru roboczego. To ograniczenie oznacza, że nie można użyć sekcji Mobile , aby włączyć witrynę jako aplikację PWA. Aby dodać możliwości PWA, takie jak obsługa instalowania aplikacji i strony działające offline, zaimplementuj je w kodzie frameworku. Na przykład dodaj manifest aplikacji internetowej i proces roboczy usługi.

Jak działa kontrola wersji?

Deweloperzy mogą korzystać z integracji Power Platform Git do kontroli źródła. Jednak do repozytorium dodawane są tylko skompilowane pliki internetowe, a nie pełny kod źródłowy.

Czy te strony obsługują SEO?

Ponieważ witryny SPA są zbudowane przy użyciu struktury React i używają renderowania po stronie klienta, wsparcie SEO jest ograniczone.

Jakie wsparcie w zakresie zabezpieczeń i zarządzania oferują witryny SPA Power Pages?

Power Pages wymusza uprawnienia tabel i role zabezpieczeń sieci Web w wywołaniach Web API, zapewniając, że dostęp do danych jest zgodny z rolami użytkowników. Użyj obiektu window["Microsoft"].Dynamic365.Portal.User, aby pobrać podstawowe właściwości użytkownika i dostosować doświadczenia w oparciu o profile użytkowników.

Dodatkowo witryny SPA obsługują:

Konfiguracje witryn publicznych i prywatnych
Ustawienia nadzoru, w tym kontrola nad anonimowym dostępem do danych
Konfiguracja uwierzytelniania i dostawcy

Te funkcje pomagają zapewnić bezpieczną i zgodną integrację składników niestandardowych w Power Pages.

Opinia

Czy ta strona była pomocna?

Last updated on 2026-07-21

Tworzenie i wdrażanie aplikacji jednostronicowej w Power Pages

Wymagania wstępne

Zezwalaj na przekazywanie plików JavaScript

Utwórz i wdróż witrynę SPA

Prześlij stronę SPA

Syntax

Parameters

Example

Definiowanie parametrów przesyłania danych za pomocą powerpages.config.json

Pola konfiguracji

Przykład powerpages.config.json

Pobierz stronę SPA

Syntax

Parameters

Example

Aktywowanie i testowanie lokalizacji

Struktura i konfiguracja projektu

Dzielenie kodu i czyszczenie pakietów

Włączanie dzielenia kodu

Jak element upload-code-site usuwa nieaktualne pakiety

Opcja 1. Bezpośrednie wyświetlanie listy wzorców wieloznacznych

Opcja 2. Generowanie wzorców wieloznacznych za pomocą skryptu po kompilacji

Uwierzytelnianie i autoryzacja

Konfigurowanie dostawców tożsamości

Uzyskiwanie dostępu do kontekstu użytkownika w kodzie

Przykładowy przepływ React

Użyj webowych interfejsów API Power Pages

Skonfiguruj lokalne środowisko deweloperskie, umożliwiając wywołania interfejsu API sieciowego z serwera localhost przy użyciu uwierzytelniania Microsoft Entra ID.

Kroki konfiguracji

Różnice między istniejącymi witrynami Power Pages

Często zadawane pytania

Jakie wsparcie jest dostępne w przypadku testów jednostkowych i integracyjnych?

Czy dostępna jest obsługa integracji Power Fx przy użyciu WebAssembly?

Czy kod źródłowy jest dostępny w Power Pages?

Czy mogę utworzyć składnik zewnętrznie przy użyciu tej funkcji i przenieść go do witryny Power Pages?

Czy mogę dodawać gotowe składniki, takie jak listy i formularze?

Czy mogę włączyć witrynę SPA jako aplikację PWA z obszaru roboczego konfigurowania?

Jak działa kontrola wersji?

Czy te strony obsługują SEO?

Jakie wsparcie w zakresie zabezpieczeń i zarządzania oferują witryny SPA Power Pages?

Informacje pokrewne

Opinia

Dodatkowe zasoby

Definiowanie parametrów przesyłania danych za pomocą `powerpages.config.json`

Przykład `powerpages.config.json`

Jak element `upload-code-site` usuwa nieaktualne pakiety