Sortu eta zabaldu orrialde bakarreko aplikazio bat Power Pages-en

Power Pages orrialde bakarreko aplikazioen (SPA) kodea integratzea onartzen du, hurrengo belaunaldiko AIk lagundutako tresnekin sortua, hala nola GitHub Copilot. Gaitasun honek garatzaileei aukera ematen die osagaietan oinarritutako front-end esperientzia modernoak Power Pages-era ekartzeko, lengoaia naturala kodetze-interfaze gisa erabiliz.

IA bidez sortutako kodea gidatuz, probatuz eta finduz, egileek inplementazio-zeregin errepikakorretatik goi-mailako orkestraziora alda dezakete arreta. Honek garapen intuitibo eta sortzaileagoa ahalbidetzen du, enpresa mailako kalitatea eta estandarrak mantenduz.

Artikulu honek honako hau erakusten dizu:

Sortu eta konfiguratu SPA proiektu bat Power Pages Power Platform CLI (PAC CLI) erabiliz.
Kargatu eta deskargatu kode-aktiboak zure Power Pages gunera.
Proiektu-egitura seguru eta mantentzeko moduko bat ezarri.
Ezagutu SPAn oinarritutako eta Power Pages inplementazio tradizionalen arteko desberdintasun nagusiak.

Oharra

SPA gune bat Power Pages gune bat da, erabiltzailearen arakatzailean exekutatzen dena (bezeroaren aldeko errendatzea). Power Pages tradizionalen aldean, SPA guneak iturburu kode eta komando-lerroko interfaze (CLI) tresnen bidez bakarrik kudeatzen dituzu.
Power Platform Git integrazioa ez da onartzen Single-Page Application (SPA) webguneetarako Power Pages.

Aurrebaldintzak

Hasi aurretik, ziurtatu hau duzula:

Power Pages ingurune admin pribilegioekin.
Power Platform CLI (PAC CLI) 1.44.x bertsioa edo berriagoa instalatuta eta autentifikatuta.
Power Pages webgunea, 9.7.4.x bertsioan edo berriagoan.
Baimendu JavaScript fitxategiak Dataverse inguruneetan igotzea.
Git biltegi lokal bat zure front-end proiektu pertsonalizatuarekin, hala nola React, Angular edo Vue.

Baimendu JavaScript fitxategiak igotzea

Lehenespenez, Dataverse ingurune batzuek JavaScript (.js) fitxategiak igotzea blokeatzen dute. "Huts egin du inportazioan" errorea aurkitzen baduzu: eranskina ez da baliozko mota edo handiegia da. Ezin da kargatu edo deskargatu.", eguneratu ingurunearen ezarpenak fitxategi mota hau baimentzeko.

Ingurune baten administrazio-zentroko ezarpenak doitzeko, jarraitu urrats hauek: Power Platform

Hasi saioa hurrengoan Power Platform administrazio-zentroa.
Nabigazio panelean, hautatu Kudeatu.
*Kudeatu* panelean, hautatu *Inguruneak*.
Hautatu ingurunea.
Komando-barran, hautatu Ezarpenak.
Zabaldu Produktua, eta ondoren hautatu Pribatutasuna + Segurtasuna.
Blokeatutako eranskinak atalean, kendu js fitxategi-luzapenen zerrendatik.
Hautatu Gorde.

SPA gune bat sortu eta zabaldu

Power Pages SPA guneak PAC CLI komandoak upload-code-site eta download-code-site komandoak erabiliz kudeatzen dira. Gune bat igo ondoren, Power PagesGune inaktiboak zerrendan agertzen da. Aktibatu gunea erabiltzaileentzat eskuragarri egon dadin.

SPA gune bat igo

Erabili pac pages upload-code-site komandoa zure iturburu lokala eta konpilatutako aktiboak zure Power Pages ingurunera igotzeko.

Sintaxia

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

Parametroak

Parametroa	Aliasa	Beharrezkoa	Deskribapenak
`--rootPath`	`-rp`	Bai	Zure gunearen iturburu fitxategiak dituen tokiko karpeta
`--compiledPath`	`-cp`	Ez	Konpilatutako aktiboetarako bidea, React bezala `build`
`--siteName`	`-sn`	Ez	Power Pages gunearen bistaratze-izena

Adibidea

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

Lehendik dagoen proiekturik ez baduzu, saiatu SPA guneen inplementazioen adibideak React, Angular eta Vue erabiliz.

Igotzeko parametroak honekin definitzea `powerpages.config.json`

Pertsonalizatu komandoaren upload-code-site portaera fitxategi powerpages.config.json bat sartuz zure gunearen erro karpetan. Fitxategi hau dagoenean, parametroarekin bakarrik upload-code-site exekutatu--rootPath. Komandoak konfigurazio fitxategiko balio gainerakoak irakurtzen ditu. Komando-lerroko argumentuak eta konfigurazio balioak ematen badituzu, komando-lerroko argumentuek lehentasuna dute.

Konfigurazio eremuak

Eremua	Mota	Beharrezkoa	Deskribapenak
`siteName`	kate	Bai	Power Pages webgunearen bistaratze izena.
`compiledPath`	kate	Bai	Konpilatutako irteerako direktoriora bidea (adibidez, Vite `dist` edo React `build` karpeta), `powerpages.config.json`.
`defaultLandingPage`	kate	Bai	HTML orria webgunearen erroa irekitzean zerbitzatzen da, `compiledPath` (normalean `index.html`).
`bundleFilePatterns`	katea[]	Ez	CLIak eraikuntza berria igo aurretik kentzen `web-files` dituen wildcard patroien zerrenda bat. Erabili eremu hau zaharkitutako edukiz hashatutako paketeak garbitzeko, baliabide zaharrak gunean pilatu ez daitezen. Ikusi Kodearen zatiketa eta pakete garbiketa.
`includeSource`	boolearra	Ez	Orduan `true`, komandoak zure iturburu kodea eta konpilatutako aktiboak igotzen ditu. Lehenetsita.`false`
`sourceExcludePatterns`	katea[]	Ez	Iturburu fitxategiak igotzetik kanpo uzteko wildcard patroiak. Bakarrik aplikatzen da dagoenean `includeSourcetrue` (adibidez, ingurune fitxategiak saltatzeko `node_modules` edo tokiko inguruneko fitxategiak).

Eremu erreferentzia zehatzena eta up-todata gehien nahi izanez gero, ikusi eskema.powerpages.config.json Bat $schema datorren propietatea gehitu zure konfigurazio fitxategian, JSON Schema onartzen duten editoreetan baliozkotzea eta autoosatzea ahalbidetzeko.

Adibidea `powerpages.config.json`

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

Deskargatu SPA gune bat

Erabili pac pages download-code-site komandoa dagoeneko existitzen den gune baten kodea tokiko direktorio batera deskargatzeko, editatzeko edo babeskopia egiteko.

Sintaxia

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

Parametroak

Parametroa	Aliasa	Beharrezkoa	Deskribapenak
`--environment`	`-env`	Ez	Dataverse ingurunea (GUID edo URL osoa). Zure autentifikazio-profil aktiboa lehenetsita
`--path`	`-p`	Bai	Tokiko direktorioa gunearen kodea deskargatzeko
`--webSiteId`	`-id`	Bai	Power Pages SPA gunearen webgunearen erregistroaren GUID
`--overwrite`	`-o`	Ez	Gainidatzi helburuko direktorioan dauden fitxategiak, baldin badaude

Adibidea

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

Aktibatu eta probatu zure gunea

Joan Power Pages.
Hautatu Gune inaktiboak, bilatu zure gunea eta hautatu Berriro aktibatu.
Gunea aktibo dagoenean, joan zure gunearen URLra hedapena egiaztatzeko.

Argibidea

Geroagoko edozein upload-code-site komandok automatikoki eguneratzen du gune aktiboa.

Proiektuaren egitura eta konfigurazioa

Proiektuaren diseinu koherente batek kargatzeko portaera zuzena bermatzen laguntzen du.

/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

Erabili aukerako powerpages.config.json fitxategia upload-code-site komandoaren funtzionamendua pertsonalizatzeko.

Kodearen zatitzea eta pakete garbiketa

Orri bakarreko aplikazio bat hazten den heinean, JavaScript pakete bakar bat handia eta kargatzeko motela bihurtzen da. Eraikuntza tresna modernoek arazo hau kode zatiketarekin konpontzen dute. Teknika honek aplikazioa zatitan zatitzen du, nabigatzaileak nahi duenean deskargatzen dituenak (adibidez, erabiltzaileak bide zehatz batera nabigatzen duenean bakarrik). Zati bakoitza fitxategi izenean eduki-hash batekin igortzen da, adibidez Dashboard-BSbmIXoe.js, beraz, nabigatzaileek denbora luzez cacheatu dezakete eta berriro deskargatu edukia aldatzen denean bakarrik.

Kodearen zatitzeak SPA guneetan Power Pages ezarpen kontu berezi bat sartzen du: eraikuntza bakoitzak hashatutako fitxategi izen berriak sortzen dituenez, upload-code-site exekuzio errepikatuek hashatutako fitxategi zaharrak gunean utziko lituzkete. Deploy askotan, zatirik gabeko zati hauek gunearen web-files. Eremua bundleFilePatternspowerpages.config.json garbitzeko.

Kodearen zatitzea gaitu

Kodearen zatitzea zure front-end eraikuntza tresnak kudeatzen du, ez Power Pages-ek, beraz, hurbilketa erabiltzen duzun framework eta bundler-aren araberakoa da. Teknika ohikoena aplikazioaren zati batzuk inportazio dinamikoekin kargatzea da, askotan ibilbide edo ikuspegi mailan aplikatuta, atal bakoitza erabiltzaileak bertara nabigatzen duenean bakarrik deskargatzen da (karga lazgarria).

Vite, webpack eta esbuild bezalako bundler-ek ere moduluak izendatutako zatietan talde ditzakete modu zehatzean. Konfigurazio zehatza nahi baduzu, begiratu zure framework eta bundler-aren dokumentazioa.

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

Aukeratu edozein modutan, emaitza berdina da, eta inplementaziorako garrantzitsua da: eraikuntzak irteera fitxategi anitz igortzen ditu, bakoitzak bere izenean eduki-hash batekin. Hash horiek fitxategi baten edukia aldatzen den bakoitzean aldatzen direnez, eraikuntza bakoitzak fitxategi izen desberdin bat sortzen du. Hurrengo atalek azaltzen dute nola mantendu zure Dataverse inguruneak garbi izen horiek aldatzen direnean.

Nola `upload-code-site` garbitzen dituen zaharkitutako paketeak

Zure konpilatutako aktiboak igo aurretik, upload-code-site ezabatu web-files webgunean wildcard patroi bundleFilePatternsbatekin bat datozen fitxategi guztiak, eta gero egungo eraikuntza igotzen du. Ezabatu eta igo jokabide honek fitxategi multzoa zure azken konpilatutako irteerarekin berdina mantentzen du, eraikuntza bakoitza aurrekoaren gainean geruzatu beharrean.

Garbiketa funtzionatzeko, wildcard patroiek bundleFilePatterns zure eraikuntzak sortzen dituen fitxategi izenekin bat etorri behar dute. Bi modu daude zehatzak mantentzeko, zure eraikuntza tresnak fitxategiak nola izendatzen dituen arabera.

1. Aukera: Zuzenean zerrendatu wildcard patroiak

Eraikuntza-tresna askok izen egonkorraren aurrizkia mantentzen dute eta edukien hash-a bakarrik aldatzen dute, adibidez index-[hash].js. Zure irteerako fitxategi izenak eredu aurreikusgarri bat jarraitzen dutenean, zerrendatu wildcard patroia bakoitzean bundleFilePatterns. Ez da tresna gehigarririk behar:

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

Wildcard patroi bat, adibidez index-*.js , fitxategi horrekin bat dator eraikuntza bakoitzean, hash-a edozein dela ere. Sarrera bat gehitu irteera fitxategi bakoitzeko, eta gehitu eredu berri bat zure eraikuntzak irteera fitxategi berria sortzen hasten denean.

2. Aukera: Post-build script batekin wildcard patroiak sortu

Erabili hurbilketa hau zure irteerako fitxategi izenak ez badira eredu aurreikusgarri bat jarraitzen, edo zure aplikazioak izenak aldatzen diren fitxategi asko sortzen dituenean ibilbideak gehitu eta kentzen dituzunean, eta horrek eskuz mantentzen duen zerrenda akatsak sortzen ditu. Eraikuntza amaitu ondoren exekutatzen den script labur batek konpilatutako irteera eskaneatzen du eta igortzen den fitxategi bakoitzerako wildcard patroia erabiliz berridazten bundleFilePatterns du. Adibidez, eraikuntza tresna batek fitxategiak izendatzen dituenean [name]-[hash].[ext], script-a patroia Dashboard-BSbmIXoe.jsbihurtzen Dashboard-*.js da.

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

Script-a zure build-era konektatu, beti bundler-aren ondoren exekutatu dadin:

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

Orain, inplementazioa bi komando da, eta guneak ez du inoiz zatirik alargunak pilatzen:

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

Eraikuntzaren ondoren, powerpages.config.json korronte pakete zehatzak islatzen ditu, adibidez:

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

Autentifikazioa eta baimena

Power Pages SPA guneek segurtasun eredua< / c0> Power Pages gune tradizionalak erabiltzen dituzte.

Konfiguratu identitate-hornitzaileak

Joan Power Pages.
Bilatu zure gunea eta hautatu Editatu.
Hautatu Segurtasun>identitate-hornitzaileak.
Gehitu edo konfiguratu identitate hornitzaileak, adibidez, Microsoft Entra ID.
Gune berri bakoitzak automatikoki Microsoft Entra ID hornitzaile lehenetsia du.

Erabiltzailearen testuingurua kodean atzitu

Lortu bezeroaren autentifikazio-metadatuak:

Agintaritzaren URLa:

Microsoft Entra ID-ren baimena edo saioa hasteko URLa hau da:
```
https://login.windows.net/<tenantId>
```
Bilatu Authority URL konfiguratutako beste identitate hornitzaile batzuen Power Pages><your site>>Security>Identity providers> konfigurazio-ezarpenak.

Erabiltzailearen xehetasunak:

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

Laginaren erreakzio-fluxua

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

Erabili Power Pages Web APIak

Garatzaileek Power Pages Web APIak erabil ditzakete edukia interfazean kargatzeko edo erregistroak sortu, eguneratu eta ezabatzeko. API hauek erabili aurretik, ziurtatu beharrezko Web APIak gaituta daudela eta taula baimen egokiak eta web rola behar bezala konfiguratuta daudela.


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

Konfiguratu garapen lokala ostalari lokaletik Web API deiak gaituz Microsoft Entra ID autentifikazioa erabiliz

Garatzaileek iterazio ziklo azkarragoak, arazketa lokala eta beroa birkargatzeko gaitasunak behar dituzte aplikazioak eraikitzerakoan. SPAk lan-fluxu horiek onartzen ditu localhost Web API dei seguruak ahalbidetuz Microsoft Entra ID (Azure AD) v1 autentifikazioa erabiliz.

Konfigurazio honek aukera ematen dizu:

Exekutatu zure aplikazioa lokalki autentifikazio-euskarri osoarekin.
Erabili Vite bezalako garapen tresna modernoak beroa birkargatzeko eta feedback azkarra lortzeko.
Saihestu CORS arazoak Power Pages Web APIak deitzerakoan.
Garapena bizkortu atarian aldaketak egin gabe.

Konfigurazio honek SPA-rako garapen tokiko esperientzia produktiboa ahalbidetzen du, garatzaileek azkar eraiki, probatu eta iteratu ahal izateko API sarbide eta autentifikazio osoarekin.

Garrantzitsua

Erabili Microsoft Entra v1 amaierako puntuak soilik autentifikatzeko.
Eramailearen autentifikazioa 9.7.6.6 edo berriagoko bertsioetan soilik onartzen da.
Aplikatu ezarpen hauek garapen-inguruneetan soilik.

Konfigurazio-urratsak

Gaitu SPA autentifikazioa
1. Azure atarian, ireki zure atarian erregistratutako Microsoft Entra aplikazioa.
2. Gaitu orrialde bakarreko aplikazioen (SPA) autentifikazioa.
3. Gehitu localhost URI birbideratze gisa Single-page aplikazio plataforma konfigurazioa erabiliz. Informazio gehiago nahi izanez gero, ikusi Nola gehitu URI birbideratze bat zure aplikazioan.
  - Birbideratze URIa: http://localhost:<port>/.

Gehitu gunearen ezarpenak

Gehitu gunearen ezarpenak hauek Power Pages:

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

Erabili ADAL.js autentifikaziorako
- Bezeroaren aldeko autentifikazioa ezarri ADAL.js.
Oharra

MSAL.js ez da bateragarria Power Pages Microsoft Entra v1 amaierako puntuak erabiltzen dituelako, MSALek v2 erabiltzen duen bitartean. Jaulkitzailearen formatua desberdina da bertsioen artean.
Gehitu baimenaren goiburua
- Sartu goiburu hau Web APIaren eskaera guztietan:
```
Authorization: Bearer <id_token>
```
Ezarri gunearen ikusgaitasuna Publiko gisa
- Ezarpen honek gunera sartzea ahalbidetzen du localhost garapen eta proba helburuetarako.

Konfiguratu garapen-proxy-a

Vite erabiltzen baduzu, gehitu kode vite.config.js hau CORS arazoak saihesteko:

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

Lehendik dauden Power Pages guneekiko desberdintasunak

Ondorengo taulan ezaugarri honekin sortutako SPA guneen eta Power Pages gune tradizionalen arteko desberdintasun nagusiak laburbiltzen dira:

Eginbidea	SPA gunearen portaera
Zerbitzariaren aldeko freskapena	Betiko itzultzen du gunearen erro orria, eta bezeroaren aldeko routerrak azpibideak renderizatzen ditu.
Ibilbide-gatazkak	Bezero aldeko ibilbideek lehentasuna dute, eta freskatze gogor batek errora itzultzen du.
Orriaren lan-eremua	Orrialdeen lan-eremua ez da onartzen. ... Erabili bezeroen bideratzea eta bezeroen guneko orriak. Orrialde-mailako segurtasunerako, egiaztatu esleitutako web rolak erabiltzaile-objektu globalarekin, eta errendatu UI baldintzapean.
Estilo-lan-eremua	Ez da onartzen estilo-lan-eremua erabiliz estiloak ezartzea. ... Erabili zure markoaren estiloa, hala nola CSS, CSS-in-JSedo utilitate klaseak.
Kokalekua	Hizkuntza bakarreko laguntza. Bezeroaren aldeko baliabideen kargatzea ezartzea.
Txantiloi likidoak	Liquid code eta Liquid txantiloiak ez dira onartzen. Sartu datuak zure framework-aren txantiloi motorra eta Web APIak erabiliz.

FAQ

Zer laguntza dago unitate eta integrazio probak egiteko eskuragarri?

Gaur egun, ez dago unitate eta integrazio probak egiteko euskarririk. Egileek proba hauek lokalean edo beren CI/CD bideen barruan idatzi eta exekutatu beharko lituzkete.

Ba al dago WebAssembly erabiliz integraziorako laguntzarik? Power Fx

Gaitasun hau ez da onartzen une honetan.

Iturburu-kodea erabilgarri al Power Pages-en?

Gaur egun, sortzaileek webguneak eraiki ditzakete TypeScript edo GitHub Copilot Agent erabiliz. Konpilatutako JavaScript eta CSS fitxategiak eskuragarri daude eta Visual Studio Code-n edita daitezke. Hala ere, HTML fitxategien edizio zuzena eta zabala ez da onartzen une honetan.

Kanpotik osagai bat sortu dezaket funtzio hau erabiliz eta Power Pages webgune batera eraman?

Ez, ezin duzu kanpotik sortutako osagairik Power Pages webgune batera eraman funtzio hau erabiliz.

Gehitu al ditzaket prest dauden osagaiak, hala nola zerrendak eta formularioak?

Oraingoz ez da onartzen zerrendak eta formularioak bezalako osagai prest daudenak gehitzea. Hala ere, formulario eta zerrenda pertsonalizatuak eraiki ditzakezu React esparrua eta Web APIak erabiliz.

SPA gune bat PWA gisa gaitu dezaket Ezarri Lan-espaziotik?

Ez. SPA guneek ez dute web aplikazio progresiboaren (PWA) ezarpena onartzen ezarpen lan-eremu konfiguratuan. Muga honek esan nahi du ezin duzula mugikorreko atala erabili gune bat PWA gisa gaitzeko. PWA gaitasunak gehitzeko, hala nola instalagarriak diren aplikazio esperientziak eta lineaz kanpoko orriak, inplementatu zure framework kodean. Adibidez, gehitu web aplikazioaren manifestua eta zerbitzu-langilea.

Nola funtzionatzen du iturri-kontrolak?

Garatzaileek Git integrazioa erabil dezakete iturburu-kontrolerako. Power Platform Hala ere, konpilatutako web fitxategiak bakarrik gehitzen dira biltegira, ez iturburu-kode osoa.

Gune hauek SEO onartzen al dute?

SPA guneak React framework-arekin eraikitzen direnez eta bezeroaren aldeko errendatzea erabiltzen dutenez, SEO laguntza mugatua da.

Zer Power Pages segurtasun eta gobernantza laguntza eskaintzen dute SPA guneek?

Power Pages-ek taulako baimenak eta segurtasun web rolak ezartzen ditu Web API deietan, datuen sarbidea erabiltzaileen rolekin bat datorrela ziurtatuz. Erabili window["Microsoft"].Dynamic365.Portal.User objektua oinarrizko erabiltzaile-propietateak berreskuratzeko eta erabiltzaile-pertsonen arabera esperientziak pertsonalizatzeko.

Gainera, SPA guneek honako hauek onartzen dituzte:

Gune publiko eta pribatuen konfigurazioak
Gobernantza ezarpenak, datu anonimoetarako sarbidearen gaineko kontrola barne
Autentifikazio hornitzailearen konfigurazioak

Ezaugarri hauek osagai pertsonalizatuen integrazio segurua eta egokia bermatzen laguntzen dute Power Pages-en.

Microsoft Power Platform CLI
Tutorial: Erabili Microsoft Power Platform CLI Power Pages
Erabili Visual Studio Code luzapena

Oharrak

Lagungarria al da orri hau?

Last updated on 2026-07-21

Sortu eta zabaldu orrialde bakarreko aplikazio bat Power Pages-en

Aurrebaldintzak

Baimendu JavaScript fitxategiak igotzea

SPA gune bat sortu eta zabaldu

SPA gune bat igo

Sintaxia

Parametroak

Adibidea

Igotzeko parametroak honekin definitzea powerpages.config.json

Konfigurazio eremuak

Adibidea powerpages.config.json

Deskargatu SPA gune bat

Sintaxia

Parametroak

Adibidea

Aktibatu eta probatu zure gunea

Proiektuaren egitura eta konfigurazioa

Kodearen zatitzea eta pakete garbiketa

Kodearen zatitzea gaitu

Nola upload-code-site garbitzen dituen zaharkitutako paketeak

1. Aukera: Zuzenean zerrendatu wildcard patroiak

2. Aukera: Post-build script batekin wildcard patroiak sortu

Autentifikazioa eta baimena

Konfiguratu identitate-hornitzaileak

Erabiltzailearen testuingurua kodean atzitu

Laginaren erreakzio-fluxua

Erabili Power Pages Web APIak

Konfiguratu garapen lokala ostalari lokaletik Web API deiak gaituz Microsoft Entra ID autentifikazioa erabiliz

Konfigurazio-urratsak

Lehendik dauden Power Pages guneekiko desberdintasunak

FAQ

Zer laguntza dago unitate eta integrazio probak egiteko eskuragarri?

Ba al dago WebAssembly erabiliz integraziorako laguntzarik? Power Fx

Iturburu-kodea erabilgarri al Power Pages-en?

Kanpotik osagai bat sortu dezaket funtzio hau erabiliz eta Power Pages webgune batera eraman?

Gehitu al ditzaket prest dauden osagaiak, hala nola zerrendak eta formularioak?

SPA gune bat PWA gisa gaitu dezaket Ezarri Lan-espaziotik?

Nola funtzionatzen du iturri-kontrolak?

Gune hauek SEO onartzen al dute?

Zer Power Pages segurtasun eta gobernantza laguntza eskaintzen dute SPA guneek?

Erlazionatutako informazioa

Oharrak

Baliabide gehigarriak

Igotzeko parametroak honekin definitzea `powerpages.config.json`

Adibidea `powerpages.config.json`

Nola `upload-code-site` garbitzen dituen zaharkitutako paketeak