Vienas lappuses lietojumprogrammas izveide un izvietošana pakalpojumā Power Pages

Power Pages atbalsta vienas lapas lietojumprogrammas (SPA) koda integrēšanu, kas izveidots ar nākamās paaudzes mākslīgā intelekta rīkiem, piemēram, GitHub Copilot. Šī iespēja ļauj izstrādātājiem ieviest modernu, uz komponentiem balstītu priekšgala pieredzi Power Pages, izmantojot dabisko valodu kā kodēšanas interfeisu.

Vadot, testējot un pilnveidojot mākslīgā intelekta ģenerēto kodu, veidotāji var pārorientēties no atkārtotiem ieviešanas uzdevumiem uz augstāka līmeņa orķestri. Šī pieeja nodrošina intuitīvāku, radošāku izstrādi, vienlaikus saglabājot uzņēmuma līmeņa kvalitāti un standartus.

Šajā rakstā ir paskaidrots, kā rīkoties:

Izveidojiet un iestatiet SPA projektu Power Pages, izmantojot Power Platform CLI (PAC CLI).
Augšupielādējiet un lejupielādējiet koda līdzekļus savā Power Pages vietnē un no tās.
Izveidojiet drošu un uzturamu projekta struktūru.
Uzziniet galvenās atšķirības starp SPA un tradicionālajām Power Pages ieviešanām.

Piezīmes

SPA vietne ir Power Pages vietne, kas pilnībā darbojas lietotāja pārlūkprogrammā (klienta puses renderēšana). Atšķirībā no tradicionālajām Power Pages vietnēm, SPA vietnes tiek pārvaldītas tikai ar avota koda un komandrindas interfeisa (CLI) rīkiem.
Power Platform Git integrācija netiek atbalstīta Single-Page lietojumprogrammu (SPA) tīmekļa vietnēs Power Pages.

Priekšnosacījumi

Pirms sākat, pārliecinieties, vai jums ir:

Power Pages vide ar admin permissions.
Power Platform Instalēta un autentificēta CLI (PAC CLI) versija 1.44.x vai jaunāka.
Power Pages vietne versijā 9.7.4.x vai jaunākā versijā.
Atļaut JavaScript failu augšupielādi Dataverse vidēs.
Lokāls Git repozitorijs ar jūsu pielāgoto priekšgala projektu, piemēram, React, Angular vai Vue.

JavaScript failu augšupielādes atļaušana

Pēc noklusējuma dažas Dataverse vides bloķē JavaScript (.js) failu augšupielādi. Ja rodas kļūda "Importēšana neizdevās: pielikums nav derīgs vai ir pārāk liels. To nevar augšupielādēt vai lejupielādēt.", atjauniniet vides iestatījumus, lai atļautu šo faila tipu.

Lai pielāgotu iestatījumus Power Platform administrēšanas centrā videi, rīkojieties šādi:

Pierakstieties Power Platform administrēšanas centrā.
Navigācijas rūtī atlasiet Pārvaldīt.
Rūtī Pārvaldīt atlasiet Vide.
Atlasiet vidi.
Komandjoslā atlasiet Iestatījumi.
Izvērsiet Produkts un pēc tam atlasiet Konfidencialitāte + drošība.
Sadaļā Bloķētie pielikumi noņemiet js no failu paplašinājumu saraksta.
Atlasiet Saglabāt.

SPA vietnes izveide un izvietošana

Power Pages SPA vietas tiek pārvaldītas, izmantojot PAC CLI komandas upload-code-site un download-code-site. Pēc vietnes augšupielādes tā tiek parādīta sarakstā Power Pages sarakstā Neaktīvās vietnes. Aktivizējiet vietni, lai padarītu to pieejamu lietotājiem.

SPA vietnes augšupielāde

Izmantojiet komandu pac pages upload-code-site, lai augšupielādētu lokālo avotu un kompilētos līdzekļus savā Power Pages vidē.

Sintakse

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

Parametri

Parametrs	Aizstājvārds	Obligāts	Apraksts
`--rootPath`	`-rp`	Jā	Lokāla mape, kurā ir vietnes avota faili
`--compiledPath`	`-cp`	Nē.	Ceļš uz kompilētiem līdzekļiem, piemēram, React `build`
`--siteName`	`-sn`	Nē.	Power Pages vietnes parādāmais nosaukums

Piemērs

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

Ja jums nav esoša projekta, izmēģiniet SPA vietņu ieviešanas paraugus, izmantojot React, Angular un Vue.

Augšupielādes parametru definēšana ar `powerpages.config.json`

Pielāgojiet komandas darbību upload-code-site , iekļaujot powerpages.config.json failu vietnes saknes mapē. Ja šis fails ir pieejams, palaidiet upload-code-site tikai ar parametru --rootPath . Komanda nolasa atlikušās vērtības no konfigurācijas faila. Ja norādāt gan komandrindas argumentus, gan konfigurācijas vērtības, komandrindas argumenti ir prioritāri.

Konfigurācijas lauki

Lauks	Tips	Obligāts	Apraksts
`siteName`	virkne	Jā	Power Pages vietnes parādāmais nosaukums.
`compiledPath`	virkne	Jā	Ceļš uz kompilēto izvades direktoriju (piemēram, mapi Vite `dist` vai React `build` ) attiecībā pret `powerpages.config.json`.
`defaultLandingPage`	virkne	Jā	HTML lapa, kas tiek rādīta, atverot vietnes sakni, attiecībā pret `compiledPath` (parasti `index.html`).
`bundleFilePatterns`	virkne[]	Nē.	Aizstājējzīmju modeļu saraksts, kas identificē vietnes `web-files` failus, kurus CLI noņem pirms jaunā būvējuma augšupielādes. Izmantojiet šo lauku, lai iztīrītu novecojušus, satura jauktos komplektus, lai vietnē neuzkrātos vecie līdzekļi. Skatiet Koda sadalīšana un saišu tīrīšana.
`includeSource`	Būla izteiksme	Nē.	Kad `true`, komanda augšupielādē avota kodu papildus kompilētajiem līdzekļiem. Noklusējuma vērtība `false`ir .
`sourceExcludePatterns`	virkne[]	Nē.	Aizstājējzīmju modeļi avota failiem, kas jāizslēdz no augšupielādes. Attiecas tikai tad, ja `includeSource` tas ir `true` (piemēram, lai izlaistu `node_modules` vai lokālās vides failus).

Lai iegūtu visprecīzāko un up-todatuma lauka atsauci, skatiet powerpages.config.json shēmu. Pievienojiet atbilstošo $schema rekvizītu konfigurācijas failam, lai iespējotu validāciju un automātisko pabeigšanu redaktoros, kas atbalsta JSON shēmu.

Paraugs `powerpages.config.json`

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

Lejupielādēt SPA vietni

Izmantojiet komandu pac pages download-code-site , lai lejupielādētu esošas vietnes kodu lokālajā direktorijā rediģēšanas vai dublēšanas nolūkos.

Sintakse

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

Parametri

Parametrs	Aizstājvārds	Obligāts	Apraksts
`--environment`	`-env`	Nē.	Dataverse vidi (GUID vai pilns URL). Aktīvā autentifikācijas profila noklusējuma iestatījumi
`--path`	`-p`	Jā	Vietējais direktorijs, lai lejupielādētu vietnes kodu
`--webSiteId`	`-id`	Jā	Power Pages SPA vietnes tīmekļa vietnes ieraksta GUID
`--overwrite`	`-o`	Nē.	Pārrakstīt mērķa direktorijā esošos failus, ja tādi ir

Piemērs

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

Vietnes aktivizēšana un testēšana

Dodieties uz Power Pages.
Atlasiet Neaktīvās vietnes, atrodiet savu vietni un atlasiet Atkārtoti aktivizēt.
Kad vietne ir aktīva, atveriet vietnes URL, lai pārbaudītu izvietošanu.

Padoms

Jebkura vēlāka upload-code-site komanda automātiski atjaunina aktīvo vietni.

Projekta struktūra un konfigurācija

Konsekvents projekta izkārtojums palīdz nodrošināt pareizu augšupielādes darbību.

/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

Izmantojiet neobligāto powerpages.config.json failu, lai pielāgotu upload-code-site komandas darbību.

Koda sadalīšana un saišu tīrīšana

Pieaugot vienas lapas lietojumprogrammai, viens JavaScript komplekts kļūst liels un lēni ielādējams. Mūsdienu veidošanas rīki atrisina šo problēmu ar koda sadalīšanu. Šis paņēmiens sadala lietotni mazākos gabalos , kurus pārlūkprogramma lejupielādē pēc pieprasījuma (piemēram, tikai tad, kad lietotājs pārvietojas uz noteiktu maršrutu). Katrs gabals tiek emitēts ar satura jaucējkodu faila nosaukumā, piemēram Dashboard-BSbmIXoe.js, , lai pārlūkprogrammas to varētu ilgstoši saglabāt kešatmiņā un atkārtoti lejupielādēt tikai tad, kad mainās tā saturs.

Koda sadalīšana ievieš izvietošanas apsvērumu, kas ir unikāls Power Pages SPA vietnēm: tā kā katrs būvējums rada jaunus jauktos failu nosaukumus, atkārtoti upload-code-site palaišana atstātu vecos jauktos failus vietnē. Daudzu izvietojumu laikā šie bāreņi uzkrājas vietnes .web-files Lauks bundleFilePatternspowerpages.config.json eksistē, lai tos attīrītu.

Iespējot koda sadalīšanu

Koda sadalīšanu veic jūsu priekšgala veidošanas rīks, nevis Power Pages, tāpēc pieeja ir atkarīga no izmantotās struktūras un komplektētāja. Visizplatītākais paņēmiens ir ielādēt lietotnes daļas ar dinamisku importu, kas bieži tiek izmantots maršruta vai skata līmenī, lai katra sadaļa tiktu lejupielādēta tikai tad, kad lietotājs uz to pārvietojas (slinka ielāde).

Komplektētāji, piemēram, Vite, webpack un esbuild, var arī skaidri grupēt moduļus nosauktos gabalos. Lai iegūtu precīzu konfigurāciju, skatiet struktūras un komplektētāja dokumentāciju.

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

Neatkarīgi no tā, kuru pieeju izvēlaties, rezultāts ir vienāds, un tā ir daļa, kas ir svarīga izvietošanai: būvējums izstaro vairākus izvades failus, katrs ar satura jaucējkodu savā nosaukumā. Tā kā šie jaucējkodi mainās ikreiz, kad mainās faila saturs, katrs būvējums rada atšķirīgu failu nosaukumu kopu. Nākamajās sadaļās ir paskaidrots, kā uzturēt Dataverse vidi tīru, mainoties šiem nosaukumiem.

Kā `upload-code-site` attīra novecojušos saišķus

Pirms kompilēto līdzekļu augšupielādes izdzēš visus vietnes upload-code-site failus, web-files kas atbilst aizstājējzīmju modelim , bundleFilePatternsun pēc tam augšupielādē pašreizējo būvējumu. Šī dzēšanas un augšupielādes darbība saglabā izvietoto failu kopu identisku jaunākajai kompilētajai izvadei, nevis slāņo katru būvējumu virs iepriekšējā.

Lai tīrīšana darbotos, aizstājējzīmju modeļiem ir bundleFilePatterns jāatbilst failu nosaukumiem, ko izstaro jūsu būvējums. Ir divi veidi, kā saglabāt to precizitāti atkarībā no tā, kā būvēšanas rīks nosauc failus.

1. iespēja: tieši uzskaitiet aizstājējzīmju modeļus

Daudzi būvēšanas rīki saglabā stabilu nosaukuma prefiksu un maina tikai satura jaucējkodu, piemēram index-[hash].js, . Ja izvades failu nosaukumi atbilst paredzamam modelim, norādiet aizstājējzīmju modeli katram failam .bundleFilePatterns Nav nepieciešami papildu instrumenti:

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

Aizstājējzīmju modelis, piemēram, index-*.js atbilst šim failam katrā būvējumā neatkarīgi no jaucējkoda. Pievienojiet vienu ierakstu katram izvades failam un pievienojiet jaunu modeli, kad būvējums sāk veidot jaunu izvades failu.

2. iespēja: aizstājējzīmju modeļu ģenerēšana, izmantojot pēcbūvēšanas skriptu

Izmantojiet šo pieeju, ja izvades failu nosaukumi neatbilst paredzamam modelim vai ja jūsu programma rada daudz failu, kuru nosaukumi mainās, pievienojot un noņemot maršrutus, kā rezultātā ar roku uzturēts saraksts ir pakļauts kļūdām. Īss skripts, kas tiek izpildīts pēc būvēšanas, skenē kompilēto izvadi un pārraksta bundleFilePatterns ar aizstājējzīmju rakstu katram emitētajam failam. Piemēram, ja būvēšanas rīks nosauc failus kā [name]-[hash].[ext], skripts tiek samazināts Dashboard-BSbmIXoe.js līdz modelim 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)
}

Pievienojiet skriptu savā būvējumā, lai tas vienmēr darbotos pēc komplektētāja:

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

Tagad izvietošana ir divas komandas, un vietne nekad neuzkrāj bāreņu gabalus:

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

Pēc būvēšanas powerpages.config.json atspoguļo precīzus pašreizējos saišķus, piemēram:

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

Autentifikācija un autorizācija

Power Pages SPA vietās tiek izmantots tāds pats drošības modelis kā tradicionālajās Power Pages vietās.

Identitātes nodrošinātāju konfigurēšana

Dodieties uz Power Pages.
Atrodiet savu vietni un atlasiet Rediģēt.
Atlasiet Drošības>identitātes nodrošinātāji.
Pievienojiet vai iestatiet identitātes nodrošinātājus, piemēram, Microsoft Entra ID.
Katrai jaunai vietnei automātiski ir noklusējuma Microsoft Entra ID nodrošinātājs.

Piekļuve lietotāja kontekstam kodā

Iegūt autentifikācijas metadatus klientā:

Iestādes URL:

Microsoft Entra ID autoritāte vai pierakstīšanās URL ir:
```
https://login.windows.net/<tenantId>
```
Atrodiet citu konfigurēto identitātes nodrošinātāju autoritātes URL, dodoties uz Power Pages><your site>>Security>Identity providers> konfigurācijas iestatījumi.

Lietotāja rekvizīti:

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

Reakcijas plūsmas paraugs

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 tīmekļa API izmantošana

Izstrādātāji var izmantot Power Pages Web API, lai ielādētu saturu lietotāja interfeisā vai izveidotu, atjauninātu un dzēstu ierakstus. Pirms šo API izmantošanas pārliecinieties, vai ir iespējoti nepieciešamie Web API un vai ir pareizi konfigurētas atbilstošās tabulas atļaujas un tīmekļa lomas.


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

Iestatiet lokālo izstrādi, iespējojot Web API zvanus no localhost, izmantojot Microsoft Entra ID autentifikāciju

Izstrādātājiem ir nepieciešami ātrāki iterācijas cikli, lokāla atkļūdošana un karstās pārlādēšanas iespējas, veidojot lietojumprogrammas. SPA atbalsta šīs darbplūsmas, iespējojot drošus Web API zvanus no localhost, izmantojot Microsoft Entra ID (Azure AD) v1 autentifikāciju.

Šis iestatījums ļauj:

Palaidiet savu programmu lokāli, izmantojot pilnu autentifikācijas atbalstu.
Izmantojiet mūsdienīgus izstrādes rīkus, piemēram, Vite , karstai atkārtotai ielādei un ātrai atgriezeniskajai saitei.
Izvairieties no CORS problēmām, izsaucot Power Pages tīmekļa API.
Paātriniet izstrādi, neizvietojot izmaiņas portālā.

Šī konfigurācija nodrošina produktīvu SPA lokālās izstrādes pieredzi, lai izstrādātāji varētu ātri veidot, testēt un atkārtot ar pilnu API piekļuvi un autentifikācijas atbalstu.

Svarīgi

Autentifikācijai izmantojiet tikai Microsoft Entra v1 galapunktus.
Uzrādītāja autentifikācija tiek atbalstīta tikai portāla versijās 9.7.6.6 vai jaunākās versijās.
Lietojiet šos iestatījumus tikai izstrādes vidēs.

Konfigurācijas darbības

Iespējot SPA autentifikāciju
1. Portālā Azure atveriet portālā reģistrēto Microsoft Entra programmu.
2. Iespējot vienas lappuses lietojumprogrammas (SPA) autentifikāciju.
3. Pievienojiet localhost kā novirzīšanas URI, izmantojot vienas lappuses lietojumprogrammu platformas konfigurāciju. Papildinformāciju skatiet sadaļā Kā pievienot novirzīšanas URI lietojumprogrammā.
  - Novirzīšanas URI:http://localhost:<port>/ .

Vietnes iestatījumu pievienošana

Pievienojiet tālāk norādītās vietnes iestatījumi Power Pages.

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

ADAL.js izmantošana autentifikācijai
- Klienta puses autentifikācijas ieviešana, izmantojot ADAL.js.
Piezīmes

MSAL.js nav saderīga, jo Power Pages izmanto Microsoft Entra v1 galapunktus, bet MSAL izmanto v2. Emitenta formāts dažādās versijās atšķiras.
Autorizācijas galvenes pievienošana
- Iekļaujiet šo galveni visos Web API pieprasījumos:
```
Authorization: Bearer <id_token>
```
Vietnes redzamības iestatīšana kā publiska
- Šis iestatījums ļauj localhost piekļūt vietnei izstrādes un testēšanas nolūkos.

Izstrādes starpniekservera konfigurēšana

Ja izmantojat Vite, pievienojiet šo kodu, lai vite.config.js izvairītos no CORS problēmām:

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

Atšķirības no esošajām Power Pages vietnēm

Tālāk esošajā tabulā ir apkopotas galvenās atšķirības starp SPA vietnēm, kas izveidotas, izmantojot šo līdzekli, un tradicionālajām Power Pages vietnēm:

Līdzeklis	SPA vietnes uzvedība
Servera puses atsvaidzināšana	Vienmēr atgriež vietnes saknes lapu, un klienta puses maršrutētājs atveido apakšmaršrutus.
Maršrutu konflikti	Klienta puses maršruti ir prioritāri, un cietā atsvaidzināšana atgriežas pie saknes.
Lapas darbvieta	Lapu darbvieta netiek atbalstīta. Izmantojiet klienta maršrutēšanu un klienta vietnes lapas. Lai nodrošinātu lapas līmeņa drošību, pārbaudiet piešķirtās tīmekļa lomas ar globālo lietotāja objektu un nosacīti atveidojiet lietotāja interfeisu.
Stila darbvieta	Stila darbvieta netiek atbalstīta. Izmantojiet savas sistēmas stilu, piemēram, CSS, CSS-in-JSvai lietderības klases.
Lokalizācija	Vienas valodas atbalsts. Ieviesiet klienta puses resursu ielādi.
Šķidruma šablonēšana	Liquid kods un Liquid veidnes netiek atbalstītas. Piekļūstiet datiem, izmantojot struktūras veidņu programmu un tīmekļa API.

bieži uzdotie jautājumi

Kāds atbalsts ir pieejams vienību un integrācijas testēšanai?

Pašlaik nav iebūvēta atbalsta vienību un integrācijas testēšanai. Veidotājiem šie testi jāraksta un jāizpilda lokāli vai savos CI/CD cauruļvados.

Vai ir atbalsts integrācijai, Power Fx izmantojot WebAssembly?

Šī iespēja pašlaik netiek atbalstīta.

Vai avota kods ir pieejams pakalpojumā Power Pages?

Pašlaik veidotāji var veidot vietnes, izmantojot TypeScript vai GitHub Copilot Agent. Kompilētie JavaScript un CSS faili ir pieejami, un tos var rediģēt Visual Studio Code. Tomēr tieša un plaša HTML failu rediģēšana pašlaik netiek atbalstīta.

Vai varu izveidot komponentu ārēji, izmantojot šo līdzekli, un pārnest to uz Power Pages vietni?

Nē, izmantojot šo līdzekli, jūs nevarat pārnest ārēji ģenerētu komponentu uz esošu Power Pages vietni.

Vai var pievienot iebūvētus komponentus, piemēram, sarakstus un veidlapas?

Pašlaik netiek atbalstīta iebūvētu komponentu, piemēram, sarakstu un veidlapu, pievienošana. Tomēr varat izveidot pielāgotas veidlapas un sarakstus, izmantojot React struktūru un Web API.

Vai SPA vietni var iespējot kā PWA darbvietā Iestatīt?

Nē. SPA vietnes neatbalsta progresīvās tīmekļa lietotnes (PWA) iestatījumu darbvietas iestatīšanai. Šis ierobežojums nozīmē, ka nevarat izmantot sadaļu Mobilās , lai iespējotu vietni kā PWA. Lai pievienotu PWA iespējas, piemēram, instalējamas lietotņu iespējas un bezsaistes lapas, ieviesiet tās savā struktūras kodā. Piemēram, pievienojiet tīmekļa lietojumprogrammas manifestu un servisa darbinieku.

Kā darbojas avota kontrole?

Izstrādātāji var izmantot Power Platform Git integrāciju avota kontrolei. Tomēr repozitorijam tiek pievienoti tikai kompilētie tīmekļa faili, nevis pilns avota kods.

Vai šīs vietnes atbalsta SEO?

Tā kā SPA vietnes ir veidotas ar React sistēmu un izmanto klienta puses renderēšanu, SEO atbalsts ir ierobežots.

Kādu Power Pages drošības un pārvaldības atbalstu piedāvā SPA vietnes?

Power Pages ievieš tabulas atļaujas un drošības tīmekļa lomas Web API izsaukumos, nodrošinot, ka piekļuve datiem atbilst lietotāju lomām. Izmantojiet objektu, window["Microsoft"].Dynamic365.Portal.User lai izgūtu lietotāja pamatrekvizītus un pielāgotu pieredzi, pamatojoties uz lietotāju personībām.

Papildus SPA vietnes atbalsta:

Publiskās un privātās vietnes konfigurācijas
Pārvaldības iestatījumi, tostarp kontrole pār anonīmu piekļuvi datiem
Autentifikācijas nodrošinātāja konfigurācijas

Šie līdzekļi palīdz nodrošināt drošu un saderīgu pielāgoto komponentu integrāciju pakalpojumā Power Pages.

Atsauksmes

Vai šī lapa palīdzēja?

Last updated on 2026-07-22

Vienas lappuses lietojumprogrammas izveide un izvietošana pakalpojumā Power Pages

Priekšnosacījumi

JavaScript failu augšupielādes atļaušana

SPA vietnes izveide un izvietošana

SPA vietnes augšupielāde

Sintakse

Parametri

Piemērs

Augšupielādes parametru definēšana ar powerpages.config.json

Konfigurācijas lauki

Paraugs powerpages.config.json

Lejupielādēt SPA vietni

Sintakse

Parametri

Piemērs

Vietnes aktivizēšana un testēšana

Projekta struktūra un konfigurācija

Koda sadalīšana un saišu tīrīšana

Iespējot koda sadalīšanu

Kā upload-code-site attīra novecojušos saišķus

1. iespēja: tieši uzskaitiet aizstājējzīmju modeļus

2. iespēja: aizstājējzīmju modeļu ģenerēšana, izmantojot pēcbūvēšanas skriptu

Autentifikācija un autorizācija

Identitātes nodrošinātāju konfigurēšana

Piekļuve lietotāja kontekstam kodā

Reakcijas plūsmas paraugs

Power Pages tīmekļa API izmantošana

Iestatiet lokālo izstrādi, iespējojot Web API zvanus no localhost, izmantojot Microsoft Entra ID autentifikāciju

Konfigurācijas darbības

Atšķirības no esošajām Power Pages vietnēm

bieži uzdotie jautājumi

Kāds atbalsts ir pieejams vienību un integrācijas testēšanai?

Vai ir atbalsts integrācijai, Power Fx izmantojot WebAssembly?

Vai avota kods ir pieejams pakalpojumā Power Pages?

Vai varu izveidot komponentu ārēji, izmantojot šo līdzekli, un pārnest to uz Power Pages vietni?

Vai var pievienot iebūvētus komponentus, piemēram, sarakstus un veidlapas?

Vai SPA vietni var iespējot kā PWA darbvietā Iestatīt?

Kā darbojas avota kontrole?

Vai šīs vietnes atbalsta SEO?

Kādu Power Pages drošības un pārvaldības atbalstu piedāvā SPA vietnes?

Saistītā informācija

Atsauksmes

Papildu resursi

Augšupielādes parametru definēšana ar `powerpages.config.json`

Paraugs `powerpages.config.json`

Kā `upload-code-site` attīra novecojušos saišķus