Yksisivuisen sovelluksen luominen ja käyttöönotto Power Pages

Power Pages tukee yhden sivun sovelluskoodin (SPA) integrointia, joka on luotu seuraavan sukupolven tekoälyavusteisilla työkaluilla, kuten GitHub Copilot. Tämän ominaisuuden avulla kehittäjät voivat tuoda modernit, komponenttipohjaiset edustakokemukset Power Pages käyttämällä luonnollista kieltä koodausliittymänä.

Ohjaamalla, testaamalla ja tarkentamalla tekoälyn luomaa koodia tekijät voivat siirtää painopisteensä toistuvista toteutustehtävistä korkeamman tason orkestrointiin. Tämä mahdollistaa intuitiivisemman ja luovemman kehityksen säilyttäen samalla yritystason laadun ja standardit.

Tässä artikkelissa opit:

Luo ja määritä SPA-projekti Power Pages varten käyttämällä Power Platform CLI (PAC CLI).
Koodiresurssien lataaminen Power Pages sivustoon ja sieltä pois.
Määritä turvallinen ja ylläpidettävä projektirakenne.
Opi spa-pohjaisten ja perinteisten Power Pages toteutuksen tärkeimmät erot.

Muistiinpano

SPA-sivusto on Power Pages sivusto, joka toimii täysin käyttäjän selaimessa (asiakaspuolen hahmontaminen). Perinteisistä Power Pages sivustoista poiketen SPA-sivustoja hallitaan vain lähdekoodin ja komentorivikäyttöliittymän (CLI) työkalujen avulla.
Power Platform Git -integrointia ei tueta Power Pages Single-Page Application (SPA) -sivustoissa.

Edellytykset

Ennen kuin aloitat, varmista, että sinulla on seuraavat:

Power Pages-ympäristö, jossa hallintaoikeudet.
Asennettu ja todennettu Power Platform CLI:n (PAC CLI) -versio 1.44.x tai sitä uudempi.
Power Pages sivuston versiossa 9.7.4.x tai uudemmassa.
Salli JavaScript-tiedostojen lataaminen Dataverse-ympäristöihin.
Paikallinen Git-säilö, jossa on mukautettu edustaprojekti, kuten React, Angular tai Vue.

Salli JavaScript-tiedoston lataaminen

Oletusarvoisesti jotkin Dataverse-ympäristöt estävät JavaScript () -tiedostojen lataamisen. Jos kohtaat virheen "Tuonti epäonnistui: liite ei ole kelvollinen tyyppi tai se on liian suuri. Sitä ei voi ladata palvelimeen tai ladata." Päivitä ympäristösi asetukset sallimaan tämä tiedostotyyppi.

Voit muuttaa ympäristön asetuksia Power Platform -hallintakeskuksessa seuraavasti:

Kirjaudu Power Platform -hallintakeskukseen.
Valitse siirtymisruudussa Hallitse.
Valitse Hallitse-ruudussa Ympäristöt.
Valitse ympäristö.
Valitse komentopalkissa Asetukset.
Laajenna Tuote ja valitse sitten Yksityisyys + Suojaus.
Poista osiossa tiedostotunnisteiden luettelosta.
Valitse Tallenna.

SPA-sivuston luominen ja käyttöönotto

Power Pages SPA-sivustoja hallitaan käyttämällä PAC CLI -komentoja upload-code-site ja download-code-site. Kun olet ladannut sivuston, se näkyy Power PagesInactive sites -luettelossa. Aktivoi sivusto, jotta se on käyttäjien käytettävissä.

SPA-sivuston lataaminen

Lataa paikallinen lähde ja käännetyt resurssit Power Pages ympäristöösi pac-sivujen upload-code-site komennolla.

Syntaksi

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

Parametrit

Parametri	Alias	Pakolliset	Kuvaus
`--rootPath`	`-rp`	Kyllä	Paikallinen kansio, joka sisältää sivustosi lähdetiedostot
`--compiledPath`	`-cp`	Ei	Polku koottuihin resursseihin, kuten React
`--siteName`	`-sn`	Ei	Power Pages-sivuston näyttönimi

Esimerkki

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

Jos sinulla ei ole aiemmin luotua projektia, kokeile SPA-sivustojen mallitoteutuksia käyttämällä Reactiä, Angularia ja Vueta.

Latausparametrien määrittäminen avulla

Mukauta komennon toimintatapaa sisällyttämällä -tiedosto sivustoosi. Sijoita tämä määritystiedosto sivuston pääkansioon. Kun käytät määritysperusteisia sivustolatauksia, suorita -komento ainoastaan parametrilla . Komento lukee -tiedostosta automaattisesti muut arvot, kuten kootun resurssipolun ja sivuston näyttönimen. Jos annat sekä komentoriviargumentteja että määritysarvoja, komentoriviargumentit ovat ensisijaisia.

Näyte :

{
  "siteName": "Contoso Bank",
  "defaultLandingPage": "index.html",
  "compiledPath": "C:\\PowerPages\\your-project\\dist"
}

SPA-sivuston lataaminen

Lataa olemassa olevan sivuston koodi paikalliseen hakemistoon mukautusta tai varmuuskopiointia varten käyttämällä komentoa pac pages download-code-site.

Syntaksi

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

Parametrit

Parametri	Alias	Pakolliset	Kuvaus
`--environment`	`-env`	Ei	Dataverse-ympäristö (GUID tai täysi URL-osoite). Oletusarvona on aktiivinen todennusprofiilisi
`--path`	`-p`	Kyllä	Paikallinen hakemisto sivustokoodin lataamista varten
`--webSiteId`	`-id`	Kyllä	Power Pagesin SPA-sivuston sivustotietueen GUID
`--overwrite`	`-o`	Ei	Korvaa kohdehakemistossa olevat tiedostot, jos ne ovat olemassa

Esimerkki

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

Sivuston käyttöönotto ja testaaminen

Siirry kohtaan Power Pages.
Valitse Passiiviset sivustot, etsi sivustosi ja valitse Ota takaisin käyttöön.
Kun sivusto on aktiivinen, tarkista käyttöönotto siirtymällä sivustosi URL-osoitteeseen.

Tippi

Kaikki myöhemmät -komennot päivittävät käytössä olevan sivun automaattisesti.

Projektin rakenne ja määritys

Johdonmukainen projektin asettelu auttaa varmistamaan oikean lataustoiminnan.

/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

Valinnaisen -tiedoston avulla voit mukauttaa komennon toimintatapaa.

Todentaminen ja hyväksyminen

Power Pages SPA -sivustot käyttävät samaa security-mallia kuin perinteiset Power Pages sivustot.

Tunnistetietopalvelujen määrittäminen

Siirry kohtaan Power Pages.
Etsi sivustosi ja valitse Muokkaa.
ValitseSuojauksen tunnistetietopalvelut.
Lisää tai määritä identity providers, kuten Microsoft Entra ID.
Jokaisella uudella sivustolla on automaattisesti oletuspalvelun Microsoft Entra ID.

Käyttäjäkontekstin käyttö koodissa

Hanki todennuksen metatiedot asiakasohjelmasta:

Valtuuksien URL-osoite:

Microsoft Entra ID myöntäjän tai kirjautumisen URL-osoite on seuraava:
```
https://login.windows.net/<tenantId>
```
Etsi muiden määritettyjen tunnistetietojentarjoajien Authority URL valitsemalla Power Pages<4 />SecurityIdentity providers -määritysasetukset.

Käyttäjän tiedot:

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

React-esimerkkityönkulku

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 WWW-ohjelmointirajapintojen käyttäminen

Kehittäjät voivat hyödyntää Power Pages www-ohjelmointirajapintoja ladatakseen sisältöä käyttöliittymään tai luodakseen, päivittääkseen ja poistaakseen tietueita. Varmista ennen näiden ohjelmointirajapintojen käyttöä, että tarvittavat verkko-ohjelmointirajapinnat on otettu käyttöön ja että asianmukaiset taulukon käyttöoikeudet ja verkkoroolit on määritetty oikein.


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

Määritä paikallinen kehitys ottamalla käyttöön web-ohjelmointirajapinnan kutsut localhostista Microsoft Entra ID todentamisen avulla

Kehittäjät tarvitsevat nopeampia iterointijaksoja, paikallista virheenkorjausta ja kuuman uudelleenlatauksen ominaisuuksia sovelluksia luotaessa. SPA tukee näitä työnkulkuja ottamalla käyttöön suojattuja WWW-ohjelmointirajapinnan kutsuja localhost:sta Microsoft Entra ID (Azure AD) v1 -todennuksella.

Tämän määrityksen avulla voit:

Suorita sovelluksesi paikallisesti täyden todennustuen avulla.
Käytä nykyaikaisia kehitystyökaluja, kuten Vite , kuumaan uudelleenlataamiseen ja nopeaan palautteeseen.
Vältä CORS-ongelmia, kun kutsut Power Pages web-ohjelmointirajapintoja.
Nopeuta kehitystä ilman muutosten käyttöönottoa portaalissa.

Tämä määritys tarjoaa SPA:lle tuottavan paikallisen kehityskokemuksen, jonka avulla kehittäjät voivat luoda, testata ja iteroida nopeasti täyden ohjelmointirajapinnan käytön ja todentamisen tuen avulla.

Tärkeä

Käytä todentamiseen vain Microsoft Entra v1 -päätepisteitä.
Haltijatodentamista tuetaan vain portaalin versioissa 9.7.6.6 tai uudemmissa versioissa.
Käytä näitä asetuksia vain kehitysympäristöissä.

Määrityksen vaiheet

SPA-todennuksen käyttöönotto
1. Avaa https://portal.azure.com portaaliin rekisteröity Microsoft Entra sovellus.
2. Ota käyttöön yhden sivun sovelluksen (SPA) todennus.
3. Lisää uudelleenohjauksen URI-osoite käyttämällä yksisivuisen sovellusympäristön määritystä. Viittaa artikkeliin "Uudelleenohjaus-URI:n lisääminen sovellukseesi" yksityiskohtia varten.
  - Uudelleenohjauksen URI: .

Sivuston asetusten lisääminen

Lisää nämä site-asetukset Power Pages:

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

ADAL.js käyttäminen kirjautumiseen
- Ota käyttöön asiakaspuolen kirjautumiset ADAL.jsavulla.
Muistiinpano

MSAL.js ei ole yhteensopiva, koska Power Pages käyttää Microsoft Entra v1 -päätepisteitä, kun taas MSAL käyttää v2:ta. Myöntäjän muoto vaihtelee versioiden välillä.
Valtuutusotsikon lisääminen
- Sisällytä tämä otsikko kaikkiin WWW-ohjelmointirajapintapyyntöihin:
```
Authorization: Bearer <id_token>
```
Määritä sivuston näkyvyyden arvoksi Julkinen
- Tämän asetuksen avulla voit käyttää sivustoa kehitys- ja testaustarkoituksiin.

Kehitysvälityspalvelimen määrittäminen

Jos käytät Viteä, lisää tämä, jotta vältetään CORS:n ongelmat:

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

Erot olemassa olevista Power Pages sivustoista

Seuraavassa taulukossa on yhteenveto tärkeimmistä eroista tällä ominaisuudella luotujen SPA-sivustojen ja perinteisten Power Pages sivustojen välillä:

Ominaisuus	SPA-sivuston toiminta
Palvelinpuolen päivitys	Palauttaa aina sivuston pääsivun, ja asiakaspuolen reititin hahmontaa alireititykset.
Reittiristiriidat	Asiakaspuolen reitit ovat etusijalla, ja kova päivitys palaa juureen.
Sivut-työtila	Sivut-työtilaa ei tueta. Asiakasreitityksen ja asiakassivuston sivujen käyttäminen. Jos haluat sivutason suojauksen, tarkista määritetyt verkkoroolit yleisen käyttäjäobjektin avulla ja hahmonna käyttöliittymä ehdollisesti.
Tyyli-työtila	Tyylityötilan käyttöä muotoilemiseen ei tueta. Käytä kehyksen, kuten CSS, CSS-in-JS, muotoilua tai apuohjelmaluokkia.
Lokalisointi	Yksikielinen tuki. Ota käyttöön asiakaspuolen resurssien lataus.
Liquid-sivupohjien käyttö	Liquid-koodia ja Liquid-malleja ei tueta. Käytä tietoja käyttämällä kehyksesi mallimoduulia ja verkko-ohjelmointirajapintoja.

usein kysytyt kysymykset

Mitä tukea yksikkö- ja integraatiotestaukseen on saatavilla?

Tällä hetkellä yksikkö- ja integrointitestaukselle ei ole sisäänrakennettua tukea. Tekijöiden olisi kirjoitettava ja suoritettava nämä testit paikallisesti tai CI/CD-putkissaan.

Tuetaanko Power Fx -integrointia WebAssemblyn avulla?

Tätä ominaisuutta ei tueta tällä hetkellä.

Onko lähdekoodi käytettävissä Power Pages?

Tällä hetkellä tekijät voivat luoda verkkosivustoja TypeScriptin tai GitHub Copilot Agentin avulla. Käännetyt JavaScript- ja CSS-tiedostot ovat helppokäyttöisiä, ja niitä voidaan muokata Visual Studio Code. HTML-tiedostojen suoraa ja laajamittaista muokkausta ei kuitenkaan tällä hetkellä tueta.

Voinko luoda komponentin ulkoisesti tämän ominaisuuden avulla ja tuoda sen Power Pages sivustoon?

Ei, et voi tuoda ulkoisesti luotua osaa olemassa olevaan Power Pages-sivustoon tällä ominaisuudella.

Voinko lisätä valmiita osia, kuten luetteloita ja lomakkeita?

Käyttövalmiiden komponenttien, kuten luetteloiden ja lomakkeiden, lisäämistä ei tällä hetkellä tueta. Voit kuitenkin luoda mukautettuja lomakkeita ja luetteloita React-kehyksen ja verkko-ohjelmointirajapintojen avulla.

Miten lähdekoodin hallinta toimii?

Kehittäjät voivat käyttää Power Platformin Git-integraatiota versionhallintaan. Kuitenkin vain käännetyt verkkotiedostot lisätään arkistoon, ei koko lähdekoodia.

Tukevatko nämä sivustot hakukoneoptimointia?

Koska SPA-sivustot on rakennettu React-kehyksellä ja käyttävät asiakaspuolen renderöintiä, SEO-tuki on rajallinen.

Mitä Power Pages suojaus- ja hallintotuen SPA-sivustot tarjoavat?

Power Pages valvoo taulukon käyttöoikeuksia ja käyttöoikeusverkkorooleja WWW-ohjelmointirajapintakutsuissa ja varmistaa, että tietojen käyttö vastaa käyttäjärooleja. Objektin avulla voit noutaa käyttäjän perusominaisuuksia ja räätälöidä kokemuksia käyttäjäpersoonien perusteella.

Lisäksi SPA-sivustot tukevat:

Julkisen ja yksityisen sivuston määritykset
Hallintoasetukset, mukaan lukien anonyymin tietojen käytön hallinta
Todennuspalvelujen määritykset

Näiden ominaisuuksien avulla voit varmistaa mukautettujen osien suojatun ja yhteensopivan integroinnin Power Pages.

Microsoft Power Platform CLI
Tutorial: Microsoft Power Platform CLI:n käyttö Power Pages
Käytä Visual Studio Code -laajennusta

Palaute

Onko tästä sivusta apua?

Last updated on 2026-03-07

Jaa

Yksisivuisen sovelluksen luominen ja käyttöönotto Power Pages

Edellytykset

Salli JavaScript-tiedoston lataaminen

SPA-sivuston luominen ja käyttöönotto

SPA-sivuston lataaminen

Syntaksi

Parametrit

Esimerkki

Latausparametrien määrittäminen avulla

SPA-sivuston lataaminen

Syntaksi

Parametrit

Esimerkki

Sivuston käyttöönotto ja testaaminen

Projektin rakenne ja määritys

Todentaminen ja hyväksyminen

Tunnistetietopalvelujen määrittäminen

Käyttäjäkontekstin käyttö koodissa

React-esimerkkityönkulku

Power Pages WWW-ohjelmointirajapintojen käyttäminen

Määritä paikallinen kehitys ottamalla käyttöön web-ohjelmointirajapinnan kutsut localhostista Microsoft Entra ID todentamisen avulla

Määrityksen vaiheet

Erot olemassa olevista Power Pages sivustoista

usein kysytyt kysymykset

Mitä tukea yksikkö- ja integraatiotestaukseen on saatavilla?

Tuetaanko Power Fx -integrointia WebAssemblyn avulla?

Onko lähdekoodi käytettävissä Power Pages?

Voinko luoda komponentin ulkoisesti tämän ominaisuuden avulla ja tuoda sen Power Pages sivustoon?

Voinko lisätä valmiita osia, kuten luetteloita ja lomakkeita?

Miten lähdekoodin hallinta toimii?

Tukevatko nämä sivustot hakukoneoptimointia?

Mitä Power Pages suojaus- ja hallintotuen SPA-sivustot tarjoavat?

Liittyvät tiedot

Palaute

Lisäresursseja