Vieno puslapio programos kūrimas ir diegimas "Power Pages"

Power Pages palaiko vieno puslapio programos (SPA) kodo integravimą, sukurtą naudojant naujos kartos dirbtinio intelekto įrankius, pvz., GitHub Copilot. Ši galimybė leidžia kūrėjams į "Power Pages" perkelti modernias, komponentais pagrįstas išorines funkcijas, naudojant natūralią kalbą kaip kodavimo sąsają.

Vadovaudami, testuodami ir tobulindami dirbtinio intelekto sukurtą kodą, kūrėjai gali perkelti dėmesį nuo pasikartojančių diegimo užduočių prie aukštesnio lygio orkestravimo. Šis metodas suteikia galimybę intuityviau ir kūrybingesniu kūrybiškesniu tobulinimu išlaikant įmonės lygio kokybę ir standartus.

Šiame straipsnyje paaiškinama, kaip:

Sukurkite ir nustatykite SPA projektą Power Pages naudodami Power Platform CLI (PAC CLI).
Nusiųskite ir atsisiųskite kodo išteklius į "Power Pages" svetainę ir iš jos.
Sukurkite saugią ir prižiūrimą projekto struktūrą.
Sužinokite pagrindinius skirtumus tarp SPA pagrįstų ir tradicinių "Power Pages" diegimų.

Pastaba.

SPA svetainė yra "Power Pages" svetainė, kuri veikia tik vartotojo naršyklėje (kliento pusės atvaizdavimas). Skirtingai nuo tradicinių "Power Pages" svetainių, SPA svetaines galite valdyti tik naudodami šaltinio kodo ir komandų eilutės sąsajos (CLI) įrankius.
Power Platform Git integravimas nepalaikomas Single-Page programų (SPA) svetainėse Power Pages.

Būtinosios sąlygos

Prieš pradėdami įsitikinkite, kad turite:

Power Pages aplinka su admin teisėmis.
Power Platform CLI (PAC CLI) 1.44.x arba naujesnė versija įdiegta ir autentifikuota.
"Power Pages" svetainė, kurioje yra 9.7.4.x arba naujesnė versija.
Leisti "JavaScript" failų nusiuntimą "Dataverse" aplinkose.
Vietinė "Git" saugykla su pasirinktiniu išoriniu projektu, pvz., "React", "Angular" arba "Vue".

Leisti įkelti "JavaScript" failus

Pagal numatytuosius nustatymus kai kurios "Dataverse" aplinkos blokuoja "JavaScript" (.js) failų nusiuntimą. Jei susiduriate su klaida "Importuoti nepavyko: priedas yra neleistino tipo arba per didelis. Jo negalima nusiųsti ar atsisiųsti.", atnaujinkite aplinkos parametrus, kad leistumėte šį failo tipą.

Norėdami koreguoti aplinkos nustatymus **administravimo centre**, atlikite šiuos veiksmus: Power Platform

Prisijunkite prie „Power Platform“ administravimo centro.
Naršymo srityje pasirinkite Valdyti.
Srityje Tvarkyti pasirinkite Aplinkos.
Pasirinkite aplinką.
Komandų juostoje pasirinkite Parametrai.
Išskleiskite Produktas ir pasirinkite Privatumas + saugumas.
Skiltyje Užblokuoti priedai pašalinkite js iš failų plėtinių sąrašo.
Pasirinkite Įrašyti.

SPA svetainės kūrimas ir diegimas

Power Pages SPA aikštelės valdomos naudojant PAC CLI komandas upload-code-site ir download-code-site. Nusiuntus svetainę, ji rodoma Power Pages sąraše Neaktyvios svetainės. Suaktyvinkite svetainę, kad ji būtų prieinama vartotojams.

Įkelti SPA svetainę

Naudokite komandą pac pages upload-code-site, kad įkeltumėte vietinį šaltinį ir sukompiliuotus išteklius į Power Pages aplinką.

Sintaksė

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

Parametrai

Parametras	Pseudonimas	Būtina	Aprašą
`--rootPath`	`-rp`	Taip	Vietinis aplankas, kuriame yra jūsų svetainės šaltinio failai
`--compiledPath`	`-cp`	Ne	Kelias į sukompiliuotą turtą, pvz., "React" `build`
`--siteName`	`-sn`	Ne	Rodomas "Power Pages" svetainės pavadinimas

Pavyzdys

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

Jei neturite esamo projekto, išbandykite SPA svetainių diegimo pavyzdžius naudodami "React", "Angular" ir "Vue".

Įkėlimo parametrų apibrėžimas naudojant `powerpages.config.json`

Tinkinkite komandos veikimą upload-code-site įtraukdami powerpages.config.json failą į savo svetainės šakninį aplanką. Kai šis failas yra, paleiskite upload-code-site tik su parametru --rootPath . Komanda nuskaito likusias reikšmes iš konfigūracijos failo. Jei pateikiate ir komandų eilutės argumentus, ir konfigūracijos reikšmes, komandų eilutės argumentai turi pirmenybę.

Konfigūracijos laukai

Laukas	Tipas	Būtina	Aprašą
`siteName`	eilutė	Taip	Rodomas "Power Pages" svetainės pavadinimas.
`compiledPath`	eilutė	Taip	Kelias į sukompiliuotą išvesties katalogą (pvz., Vite `dist` arba React `build` aplanką), palyginti su `powerpages.config.json`.
`defaultLandingPage`	eilutė	Taip	HTML puslapis, pateiktas atidarius svetainės šaknį, palyginti su `compiledPath` (paprastai `index.html`).
`bundleFilePatterns`	eilutė[]	Ne	Pakaitos simbolių šablonų `web-files` , identifikuojančių svetainės failus, kuriuos CLI pašalina prieš įkeliant naują versiją, sąrašas. Naudokite šį lauką, jei norite išvalyti pasenusius, turinio maišos paketus, kad svetainėje nesikauptų seni ištekliai. Žr. Kodo padalijimas ir paketų valymas.
`includeSource`	bulio logika	Ne	Kai `true`, komanda įkelia jūsų šaltinio kodą kartu su sukompiliuotais ištekliais. Numatytoji reikšmė yra `false`.
`sourceExcludePatterns`	eilutė[]	Ne	Pakaitos simbolių šablonai šaltinio failams, kuriuos negalima nusiųsti. Taikoma tik tada, kai `includeSource` yra `true` (pvz., praleisti `node_modules` arba vietinės aplinkos failus).

Tiksliausią ir up-todatos lauko nuorodą rasite schemojepowerpages.config.json. Įtraukite atitinkančią $schema ypatybę į konfigūracijos failą, kad įgalintumėte tikrinimą ir automatinį užbaigimą redaktoriuose, palaikančiuose JSON schemą.

Pavyzdys `powerpages.config.json`

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

Atsisiųskite SPA svetainę

Naudokite komandą pac pages download-code-site , kad atsisiųstumėte esamos svetainės kodą į vietinį katalogą redagavimo ar atsarginės kopijos kūrimo tikslais.

Sintaksė

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

Parametrai

Parametras	Pseudonimas	Būtina	Aprašą
`--environment`	`-env`	Ne	Dataverse (GUID arba visas URL). Numatytasis aktyvus autentifikavimo profilis
`--path`	`-p`	Taip	Vietinis katalogas svetainės kodui atsisiųsti
`--webSiteId`	`-id`	Taip	"Power Pages" SPA svetainės svetainės įrašo GUID
`--overwrite`	`-o`	Ne	Perrašyti esamus failus paskirties kataloge, jei jie yra

Pavyzdys

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

Svetainės aktyvinimas ir testavimas

Eikite į Power Pages.
Pasirinkite Neaktyvios svetainės, raskite svetainę ir pasirinkite Suaktyvinti iš naujo.
Kai svetainė aktyvi, eikite į svetainės URL, kad patikrintumėte diegimą.

Arbatpinigiai

Bet kuri vėlesnė upload-code-site komanda automatiškai atnaujina aktyvią svetainę.

Projekto struktūra ir konfigūracija

Nuoseklus projekto išdėstymas padeda užtikrinti teisingą įkėlimo veikimą.

/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

Naudokite pasirenkamą powerpages.config.json failą, kad tinkintumėte, kaip veikia komanda. upload-code-site

Kodo padalijimas ir paketų valymas

Augant vieno puslapio programai, vienas "JavaScript" paketas tampa didelis ir lėtai įkeliamas. Modernūs komponavimo versijos įrankiai išsprendžia šią kodo skaidymo problemą. Šis metodas suskaido programą mažesniais kiekiais , kuriuos naršyklė atsisiunčia pagal poreikį (pvz., tik tada, kai vartotojas pereina į konkretų maršrutą). Kiekviena dalis išleidžiama su turinio maiša failo pavadinime, pvz. Dashboard-BSbmIXoe.js, , todėl naršyklės gali ją ilgą laiką saugoti talpykloje ir iš naujo atsisiųsti tik pasikeitus turiniui.

Kodo padalijimas įveda diegimo aspektą, būdingą tik Power Pages SPA svetainėms: kadangi kiekviena versija sukuria naujus maišos failų pavadinimus, pakartotiniai upload-code-site paleidimai paliktų senus maišos failus svetainėje. Per daugelį dislokacijų šie našlaičiai kaupiasi svetainės web-files. Laukas bundleFilePatterns egzistuoja, powerpages.config.json kad juos išvalytų.

Įgalinti kodo padalijimą

Kodo padalijimą tvarko jūsų išorinis kūrimo įrankis, o ne "Power Pages", todėl metodas priklauso nuo naudojamos sistemos ir paketo. Dažniausias būdas yra įkelti programos dalis su dinaminiu importu, dažnai taikomu maršruto arba peržiūros lygiu, kad kiekviena sekcija būtų atsisiunčiama tik tada, kai vartotojas ją pereina (tingus įkėlimas).

Tokie paketai kaip "Vite", "webpack" ir "esbuild" taip pat gali aiškiai sugrupuoti modulius į įvardytas dalis. Tikslią konfigūraciją rasite sistemos ir paketo dokumentacijoje.

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

Kad ir kokį metodą pasirinktumėte, rezultatas yra tas pats, ir tai yra diegimo dalis: kūrimas išleidžia kelis išvesties failus, kurių kiekvieno pavadinime yra turinio maiša. Kadangi šios maišos keičiasi, kai keičiasi failo turinys, kiekviena komponavimo versija sukuria skirtingą failų pavadinimų rinkinį. Kituose skyriuose paaiškinama, kaip išlaikyti "Dataverse" aplinką švarią, kai keičiasi šie pavadinimai.

Kaip `upload-code-site` išvalo pasenusius ryšulius

Prieš įkeldamas sukompiliuotus išteklius, panaikina visus svetainės upload-code-site failus, web-files atitinkančius pakaitos simbolių šabloną bundleFilePatterns, tada įkelia dabartinę komponavimo versiją. Dėl šio ištrynimo ir įkėlimo veikimo įdiegtas failų rinkinys išlieka identiškas naujausiai sukompiliuotai išvestiai, o ne sluoksniuojamas kiekvienas komponavimas ant ankstesnės.

Kad valymas veiktų, pakaitos bundleFilePatterns simbolių šablonai turi atitikti jūsų komponavimo sistemos skleidžiamus failų pavadinimus. Yra du būdai, kaip juos išlaikyti tikslius, priklausomai nuo to, kaip kūrimo įrankis pavadina failus.

1 parinktis: tiesiogiai išvardinkite pakaitos simbolių šablonus

Daugelis kūrimo įrankių išlaiko stabilų pavadinimo priešdėlį ir keičia tik turinio maišą, pvz. index-[hash].js, . Kai išvesties failų pavadinimai atitinka nuspėjamą modelį, nurodykite kiekvieno iš jų pakaitos simbolių šabloną .bundleFilePatterns Nereikia jokių papildomų įrankių:

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

Pakaitos simbolių šablonas, pvz., index-*.js atitinka tą failą kiekvienoje komponavimo versijoje, nepriklausomai nuo maišos. Pridėkite vieną įrašą vienam išvesties failui ir pridėkite naują šabloną, kai jūsų kūrimas pradeda kurti naują išvesties failą.

2 parinktis: generuokite pakaitos simbolių modelius naudodami scenarijų po kūrimo

Naudokite šį metodą, kai išvesties failų pavadinimai neatitinka nuspėjamo modelio arba kai programa sukuria daug failų, kurių pavadinimai keičiasi įtraukiant ir šalinant maršrutus, todėl rankiniu būdu tvarkomas sąrašas gali būti klaidingas. Trumpas scenarijus, kuris paleidžiamas po komponavimo, nuskaito sukompiliuotą išvestį ir perrašo bundleFilePatterns su kiekvieno išleisto failo pakaitos šablonu. Pavyzdžiui, kai kūrimo įrankis pavadina failus kaip [name]-[hash].[ext], scenarijus sumažinamas Dashboard-BSbmIXoe.js iki šablono 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)
}

Įveskite scenarijų į savo versiją, kad jis visada veiktų paskui paketą:

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

Dabar diegimas yra dvi komandos, o svetainė niekada nekaupia našlaičių gabalų:

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

Po pastatymo powerpages.config.json atspindi tikslius srovės paketus, pavyzdžiui:

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

Autentifikavimas ir autorizavimas

Power Pages SPA vietose naudojamas tas pats saugumo modelis kaip ir tradicinėse Power Pages vietose.

Tapatybės teikėjų konfigūravimas

Eikite į Power Pages.
Raskite svetainę ir pasirinkite Redaguoti.
Pasirinkite Saugos>tapatybės teikėjai.
Įtraukite arba nustatykite tapatybės teikėjus, pvz., Microsoft Entra ID.
Kiekviena nauja svetainė automatiškai turi numatytąjį Microsoft Entra ID teikėją.

Prieiga prie vartotojo konteksto kode

Gaukite autentifikavimo metaduomenis kliente:

Institucijos URL:

"Microsoft Entra ID" autoritetas arba prisijungimo URL yra:
```
https://login.windows.net/<tenantId>
```
Raskite kitų sukonfigūruotų tapatybės teikėjų Authority URL eidami į Power Pages><your site>>Security>Identity providers> konfigūracijos parametrai.

Vartotojo duomenys:

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

Mėginio reagavimo srautas

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" žiniatinklio API naudojimas

Kūrėjai gali naudoti Power Pages žiniatinklio API norėdami įkelti turinį į vartotojo sąsają arba kurti, atnaujinti ir naikinti įrašus. Prieš naudodami šias API įsitikinkite, kad įgalintos reikiamos žiniatinklio API ir tinkamai sukonfigūruotos atitinkamos lentelės teisės ir žiniatinklio vaidmenys.


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

Vietinio kūrimo nustatymas įgalinant žiniatinklio API iškvietimus iš localhost naudojant Microsoft Entra ID autentifikavimą

Kūrėjams reikia greitesnių iteracijos ciklų, vietinio derinimo ir karšto perkrovimo galimybių kuriant programas. SPA palaiko šias darbo eigas, įgalindama saugius žiniatinklio API iškvietimus iš localhost naudojant Microsoft Entra ID (Azure AD) v1 autentifikavimą.

Ši sąranka leidžia:

Paleiskite programą vietoje su visišku autentifikavimo palaikymu.
Naudokite šiuolaikinius kūrimo įrankius, pvz., "Vite", kad galėtumėte įkelti karštą ir greitą grįžtamąjį ryšį.
Venkite CORS problemų skambindami "Power Pages" žiniatinklio API.
Paspartinkite kūrimą nediegdami portalo pakeitimų.

Ši konfigūracija leidžia produktyviai kurti SPA vietinę kūrimo patirtį, todėl kūrėjai gali greitai kurti, išbandyti ir kartoti naudodami visišką API prieigą ir autentifikavimo palaikymą.

Svarbu

Autentifikavimui naudokite tik Microsoft Entra v1 galinius punktus.
Nešėjo autentifikavimas palaikomas tik portalo 9.7.6.6 arba naujesnėse versijose.
Taikykite šiuos parametrus tik kūrimo aplinkoje.

Konfigūravimo veiksmai

Įgalinti SPA autentifikavimą
1. Portale Azure atidarykite portale užregistruotą Microsoft Entra programą.
2. Įgalinti vieno puslapio programos (SPA) autentifikavimą.
3. Įtraukite localhost kaip peradresavimo URI naudodami vieno puslapio programos platformos konfigūraciją. Daugiau informacijos rasite Kaip įtraukti peradresavimo URI į programą.
  - Peradresavimo URI:http://localhost:<port>/ .

Svetainės parametrų įtraukimas

Į Power Pages įtraukite šiuos svetainės nustatymus:

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

Naudokite ADAL.js autentifikavimui
- Įdiekite kliento autentifikavimą naudodami ADAL.js.
Pastaba.

MSAL.js nesuderinamas, nes Power Pages naudoja Microsoft Entra v1 galinius punktus, o MSAL naudoja v2. Emitento formatas įvairiose versijose skiriasi.
Pridėti autorizacijos antraštę
- Įtraukite šią antraštę į visas žiniatinklio API užklausas:
```
Authorization: Bearer <id_token>
```
Nustatyti svetainės matomumą kaip viešą
- Šis nustatymas leidžia localhost pasiekti svetainę kūrimo ir testavimo tikslais.

Konfigūruoti kūrimo tarpinį serverį

Jei naudojate "Vite", pridėkite šį kodą, kad vite.config.js išvengtumėte CORS problemų:

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

Skirtumai nuo esamų "Power Pages" svetainių

Šioje lentelėje apibendrinami pagrindiniai SPA svetainių, sukurtų naudojant šią funkciją, ir tradicinių "Power Pages" svetainių skirtumai:

Funkcija	SPA svetainės elgsena
Atnaujinimas serveryje	Visada pateikia svetainės šakninį puslapį, o kliento maršrutizatorius generuoja antrinius maršrutus.
Maršruto konfliktai	Pirmenybė teikiama kliento maršrutams, o kietas atnaujinimas grįžta prie šaknų.
Puslapio darbo sritis	Puslapių darbo sritis nepalaikoma. Naudokite kliento maršruto parinkimą ir kliento svetainės puslapius. Norėdami užtikrinti puslapio lygio saugą, patikrinkite priskirtus žiniatinklio vaidmenis su visuotiniu vartotojo objektu ir sąlygiškai atvaizduokite vartotojo sąsają.
Stiliaus darbo sritis	Stiliaus kūrimas naudojant stiliaus darbo sritį nepalaikomas. Naudokite savo sistemos stilių, pvz., CSS, CSS-in-JSarba naudingumo klases.
Lokalizacijos	Palaikymas viena kalba. Įdiekite kliento išteklių įkėlimą.
Skystas šablonas	"Liquid" kodas ir "Liquid" šablonai nepalaikomi. Pasiekite duomenis naudodami sistemos šablonų modulį ir žiniatinklio API.

DUK

Kokia pagalba teikiama vienetų ir integracijos testavimui?

Šiuo metu nėra integruoto vienetų ir integracijos testavimo palaikymo. Kūrėjai turėtų rašyti ir vykdyti šiuos testus vietoje arba savo CI/CD vamzdynuose.

Ar palaikoma Power Fx integracija naudojant "WebAssembly"?

Ši galimybė šiuo metu nepalaikoma.

Ar šaltinio kodas pasiekiamas "Power Pages"?

Šiuo metu kūrėjai gali kurti svetaines naudodami "TypeScript" arba "GitHub Copilot Agent". Sukompiliuoti JavaScript ir CSS failai yra pasiekiami ir gali būti redaguojami naudojant Visual Studio Code. Tačiau tiesioginis ir platus HTML failų redagavimas šiuo metu nepalaikomas.

Ar galiu sukurti komponentą išorėje naudodamas šią funkciją ir perkelti jį į "Power Pages" svetainę?

Ne, naudodami šią funkciją negalite perkelti išoriškai sugeneruoto komponento į esamą "Power Pages" svetainę.

Ar galiu įtraukti paruoštų naudoti komponentų, pvz., sąrašų ir formų?

Šiuo metu nepalaikomas paruoštų naudoti komponentų, pvz., sąrašų ir formų, įtraukimas. Tačiau galite kurti pasirinktines formas ir sąrašus naudodami "React" sistemą ir žiniatinklio API.

Ar galiu įgalinti SPA svetainę kaip PWA iš darbo srities Nustatymas?

Ne. SPA svetainės nepalaiko progresyvių žiniatinklio programų (PWA) parametrų darbo srityje. Šis apribojimas reiškia, kad negalite naudoti sekcijos Mobilusis , kad įgalintumėte svetainę kaip PWA. Norėdami įtraukti PWA galimybes, pvz., diegiamas programėlių funkcijas ir autonominius puslapius, įdiekite jas sistemos kode. Pvz., įtraukite žiniatinklio taikomosios programos deklaraciją ir tarnybos darbuotoją.

Kaip veikia šaltinio kontrolė?

Kūrėjai gali naudoti Power Platform "Git" integraciją šaltinio valdymui. Tačiau į saugyklą įtraukiami tik sukompiliuoti žiniatinklio failai, o ne visas šaltinio kodas.

Ar šios svetainės palaiko SEO?

Kadangi SPA svetainės kuriamos naudojant "React" sistemą ir naudoja kliento pusės atvaizdavimą, SEO palaikymas yra ribotas.

Kokį "Power Pages" saugos ir valdymo palaikymą siūlo SPA svetainės?

"Power Pages" įgalina lentelės teises ir saugos žiniatinklio vaidmenis žiniatinklio API iškvietimuose, užtikrindama, kad prieiga prie duomenų atitiktų vartotojų vaidmenis. Naudokite objektą, window["„Microsoft“"].Dynamic365.Portal.User kad gautumėte pagrindines vartotojo ypatybes ir pritaikytumėte funkcijas pagal vartotojų asmenybes.

Be to, SPA svetainės palaiko:

Viešųjų ir privačių svetainių konfigūracijos
Valdymo parametrai, įskaitant anoniminės prieigos prie duomenų valdymą
Autentifikavimo teikėjo konfigūracijos

Šios funkcijos padeda užtikrinti saugų ir suderinamą pasirinktinių komponentų integravimą į "Power Pages".

Atsiliepimai

Ar šis puslapis buvo naudingas?

Last updated on 2026-07-21

Vieno puslapio programos kūrimas ir diegimas "Power Pages"

Būtinosios sąlygos

Leisti įkelti "JavaScript" failus

SPA svetainės kūrimas ir diegimas

Įkelti SPA svetainę

Sintaksė

Parametrai

Pavyzdys

Įkėlimo parametrų apibrėžimas naudojant powerpages.config.json

Konfigūracijos laukai

Pavyzdys powerpages.config.json

Atsisiųskite SPA svetainę

Sintaksė

Parametrai

Pavyzdys

Svetainės aktyvinimas ir testavimas

Projekto struktūra ir konfigūracija

Kodo padalijimas ir paketų valymas

Įgalinti kodo padalijimą

Kaip upload-code-site išvalo pasenusius ryšulius

1 parinktis: tiesiogiai išvardinkite pakaitos simbolių šablonus

2 parinktis: generuokite pakaitos simbolių modelius naudodami scenarijų po kūrimo

Autentifikavimas ir autorizavimas

Tapatybės teikėjų konfigūravimas

Prieiga prie vartotojo konteksto kode

Mėginio reagavimo srautas

"Power Pages" žiniatinklio API naudojimas

Vietinio kūrimo nustatymas įgalinant žiniatinklio API iškvietimus iš localhost naudojant Microsoft Entra ID autentifikavimą

Konfigūravimo veiksmai

Skirtumai nuo esamų "Power Pages" svetainių

DUK

Kokia pagalba teikiama vienetų ir integracijos testavimui?

Ar palaikoma Power Fx integracija naudojant "WebAssembly"?

Ar šaltinio kodas pasiekiamas "Power Pages"?

Ar galiu sukurti komponentą išorėje naudodamas šią funkciją ir perkelti jį į "Power Pages" svetainę?

Ar galiu įtraukti paruoštų naudoti komponentų, pvz., sąrašų ir formų?

Ar galiu įgalinti SPA svetainę kaip PWA iš darbo srities Nustatymas?

Kaip veikia šaltinio kontrolė?

Ar šios svetainės palaiko SEO?

Kokį "Power Pages" saugos ir valdymo palaikymą siūlo SPA svetainės?

Susijusi informacija

Atsiliepimai

Papildomi ištekliai

Įkėlimo parametrų apibrėžimas naudojant `powerpages.config.json`

Pavyzdys `powerpages.config.json`

Kaip `upload-code-site` išvalo pasenusius ryšulius