Opprette og distribuere et enkeltsideprogram i Power Pages

Power Pages støtter integrering av enkeltsideprogram (SPA)-kode opprettet med neste generasjons AI-assisterte verktøy, for eksempel GitHub Copilot. Med denne funksjonen kan utviklere bringe moderne, komponentbaserte frontopplevelser inn i Power Pages ved å bruke naturlig språk som kodegrensesnitt.

Når utviklere veileder, tester og finjusterer kode generert av kunstig intelligens, kan de skifte fokus fra gjentakende implementeringsoppgaver til iverksetting på høyere nivå. De kan dermed konsentrere seg om mer intuitiv, kreativ utvikling og samtidig opprettholde kvalitet og standarder i bedriftsklassen.

Denne artikkelen viser deg hvordan du gjør følgende:

  • Opprett og konfigurer et SPA-prosjekt for Power Pages ved hjelp av Power Platform CLI (PAC CLI).
  • Last opp og last ned koderessurser til og fra Power Pages nettstedet.
  • Sett opp en sikker prosjektstruktur som kan vedlikeholdes.
  • Lær viktige forskjeller mellom SPA-baserte og tradisjonelle Power Pages implementeringer.

Obs!

  • Et SPA-nettsted er et Power Pages nettsted som kjører helt i brukerens nettleser (gjengivelse på klientsiden). I motsetning til tradisjonelle Power Pages nettsteder administreres SPA-områder bare gjennom verktøy for kildekode og kommandolinjegrensesnitt (CLI).
  • Power Platform Git-integrering støttes ikke for Single-Page Application (SPA)-nettsteder i Power Pages.

Forhåndskrav

Før du begynner, må du kontrollere at du har følgende:

  • Et Power Pages miljø med admin-rettigheter.
  • Power Platform CLI (PAC CLI), versjon 1.44.x eller nyere installert og autentisert.
  • Et Power Pages nettsted på versjon 9.7.4.x eller nyere.
  • Tillat JavaScript-filopplastinger i dataverse miljøer.
  • Et lokalt Git-repositorium med det egendefinerte frontprosjektet, for eksempel React, Angular eller Vue.

Tillat JavaScript-filopplastinger

Som standard blokkerer noen dataverse miljøer opplastingen av JavaScript-filer (). Hvis du støter på feilen «Import mislyktes: Vedlegget er enten ikke en gyldig type eller er for stor. Den kan ikke lastes opp eller lastes ned.»Oppdater miljøinnstillingene for å tillate denne filtypen.

Følg disse trinnene for å justere innstillingene i Power Platform-administrasjonssenteret for et miljø:

  1. Logg deg på administrasjonssenteret for Power Platform.
  2. Velg Behandle i navigasjonsruten.
  3. I Administrer-ruten, velg Miljøer.
  4. Velg et miljø.
  5. Velg Innstillinger på kommandolinjen.
  6. Utvid Produkt, og velg deretter Personvern og sikkerhet.
  7. Fjern fra listen over filtyper i inndelingen Blokkerte vedlegg.
  8. Velg Lagre.

Opprett og distribuer et enkeltsideappnettsted

Power Pages SPA-områder administreres ved hjelp av PAC CLI-kommandoene upload-code-site og download-code-site. Når du har lastet opp et nettsted, vises det i Power Pages i listen Inaktive nettsteder. Aktiver nettstedet for å gjøre det tilgjengelig for brukerne.

Last opp et enkeltsideappnettsted

Bruk kommandoen pac pages upload-code-site til å laste opp lokale kilder og kompilerte ressurser til Power Pages miljøet.

Syntaks

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

Parametere

Parameter Alias Kreves Beskrivelse
--rootPath -rp Ja Lokal mappe som inneholder nettstedets kildefiler
--compiledPath -cp Nei Bane til kompilerte ressurser, for eksempel React
--siteName -sn Nei Visningsnavn for Power Pages-området

Eksempel

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

Hvis du ikke har et eksisterende prosjekt, kan du prøve eksempelimplementeringene av SPA-nettsteder ved hjelp av React, Angular og Vue.

Definere opplastingsparametere med

Tilpass funksjonaliteten til kommandoen ved å inkludere filen på nettstedet. Plasser denne konfigurasjonsfilen i rotmappen på nettstedet. Når du bruker konfigurasjonsbaserte nettstedsopplastinger, kjører du kommandoen med bare parameteren . Kommandoen leser andre verdier automatisk, for eksempel banen til kompilerte ressurser og visningsnavnet for nettstedet, fra filen . Hvis du angir både kommandolinjeargumenter og konfigurasjonsverdier, har kommandolinjeargumentene forrang.

Eksempel på :

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

Last ned et enkeltsideappnettsted

Bruk kommandoen pac pages download-code-site til å laste ned koden for et eksisterende nettsted til en lokal katalog, slik at du kan redigere eller sikkerhetskopiere den.

Syntaks

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

Parametere

Parameter Alias Kreves Beskrivelse
--environment -env Nei Dataverse-miljø (GUID eller fullstendig nettadresse). Bruker aktiv autentiseringsprofil som standard
--path -p Ja Lokal katalog til nedlasting av nettstedskoden
--webSiteId -id Ja GUID for nettstedsoppføring på enkeltsideappnettstedet for Power Pages
--overwrite -o Nei Skriv over eksisterende filer i målkatalogen hvis de finnes

Eksempel

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

Aktiver og test nettstedet

  1. Gå til Power Pages.
  2. Velg Inaktive nettsteder, finn nettstedet ditt, og velg Aktiver på nytt.
  3. Når nettstedet er aktivt, går du til nettadressen for nettstedet for å sjekke distribusjonen.

Tips

Når du senere bruker kommandoen , oppdateres det aktive nettstedet automatisk.

Prosjektstruktur og konfigurasjon

Et konsekvent prosjektoppsett bidrar til å sikre riktig opplastingsvirkemåte.

/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

Bruk den valgfrie filen til å tilpasse hvordan kommandoen skal fungere.

Godkjenning og autorisasjon

Power Pages SPA-nettsteder bruker samme sikkerhetsmodell som tradisjonelle Power Pages nettsteder.

Konfigurer identitetsleverandører

  1. Gå til Power Pages.
  2. Finn nettstedet ditt, og velg Rediger.
  3. Velgsikkerhetsidentitetsleverandører.
  4. Legg til eller konfigurer identitetsleverandører, for eksempel Microsoft Entra ID.
  5. Hvert nye område har automatisk en standardleverandør Microsoft Entra ID.

Få tilgang til brukerkontekst i kode

Hent metadata for godkjenning på klienten:

  • Nettadresse til instans:

    Myndigheten eller påloggings-URL-adressen for Microsoft Entra ID er:

    https://login.windows.net/<tenantId>

  • Finn url-adressen Autorisitet for andre konfigurerte identitetsleverandører ved å gå til Power Pages><your site>>Security>Identity providers> configuration settings.

  • Brukerdetaljer:

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

Eksempel på React-flyt

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

Bruke Power Pages web-API-er

Utviklere kan bruke Power Pages web-API-er til å laste inn innhold i brukergrensesnittet eller for å opprette, oppdatere og slette poster. Før du bruker disse API-ene, må du kontrollere at de nødvendige nett-API-ene er aktivert, og at riktige tabelltillatelser og nettroller er riktig konfigurert.


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

Konfigurer lokal utvikling ved å aktivere web-API-kall fra localhost ved hjelp av Microsoft Entra ID-godkjenning

Utviklere trenger raskere gjentakelsessykluser, lokal feilsøking og hurtiginnlastingsfunksjoner når de bygger programmer. SPA støtter disse arbeidsflytene ved å aktivere sikre web-API-kall fra localhost ved hjelp av Microsoft Entra ID (Azure AD) v1-godkjenning.

Med dette oppsettet kan du gjøre følgende:

  • Kjør appen lokalt med full godkjenningsstøtte.
  • Bruk moderne utviklingsverktøy som Vite for hurtiglasting og rask tilbakemelding.
  • Unngå CORS-problemer når du ringer Power Pages web-API-er.
  • Få fart på utviklingen uten å distribuere endringer i portalen.

Denne konfigurasjonen muliggjør en produktiv lokal utviklingsopplevelse for SPA, slik at utviklere kan bygge, teste og iterere raskt med full API-tilgang og godkjenningsstøtte.

Viktig

  • Bruk bare Microsoft Entra v1-endepunkter for godkjenning.
  • Bærergodkjenning støttes bare i portalversjoner 9.7.6.6 eller nyere.
  • Bruk disse innstillingene bare i utviklingsmiljøer.

Konfigurasjonstrinn

  1. Aktiver SPA-godkjenning

    1. Åpne Microsoft Entra-appen som er registrert for portalen, i https://portal.azure.com.
    2. Aktiver godkjenning av enkeltsideprogram (SPA ).
    3. Legg til som en omadresserings-URI ved hjelp av plattformkonfigurasjonen for enkeltsiders programplattform . Se Hvordan du legger til en omadresserings-URI i programmet for mer informasjon.
      • Omadresserings-URI: .

  2. Legg til områdeinnstillinger

    • Legg til disse innstillingene for område i Power Pages:
    Authentication/BearerAuthentication/Enabled = true
Authentication/BearerAuthentication/Protocol = OpenIdConnect
Authentication/BearerAuthentication/Provider = AzureAD

  3. Bruk ADAL.js for pålogging

    • Implementere pålogging på klientsiden ved hjelp av ADAL.js.

    Obs!

    MSAL.js er ikke kompatibel fordi Power Pages bruker Microsoft Entra v1-endepunkter, mens MSAL bruker v2. Utstederformatet er forskjellig mellom versjoner.

  4. Legg til autorisasjonshode

    • Inkluder denne overskriften i alle web-API-forespørsler:
    Authorization: Bearer <id_token>

  5. Angi synlighet for område til Offentlig

    • Denne innstillingen gir tilgang til området for utviklings- og testformål.

  6. Konfigurer utviklingsproxy

    • Hvis du bruker Vite, kan du legge til dette for å unngå PROBLEMER med CORS:
    export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/_api': {
        target: 'https://site-foo.powerappsportals.com',
        changeOrigin: true,
        secure: true
      }
    }
  }
});

Forskjeller fra eksisterende Power Pages områder

Tabellen nedenfor oppsummerer viktige forskjeller mellom SPA-områder som er opprettet med denne funksjonen og tradisjonelle Power Pages nettsteder:

Funksjon Virkemåte for enkeltsideappnettsted
Oppdatering på serversiden Returnerer alltid nettstedets rotside, og ruteren på klientsiden gjengir underruter.
Rutingskonflikter Ruter på klientsiden har forrang, og en hard oppdatering faller tilbake til roten.
Sidearbeidsområde Sidearbeidsområdet støttes ikke. Bruk klientruting og klientnettstedssider. For sikkerhet på sidenivå kontrollerer du tildelte nettroller med det globale brukerobjektet og gjengir brukergrensesnittet betinget.
Stilarbeidsområde Det er ikke støtte for styling med stilarbeidsområdet. Bruk rammeverkets styling, for eksempel CSS, CSS-in-JS eller verktøyklasser.
Lokalisering Støtte for ett språk. Implementer innlasting av ressurser på klientsiden.
Liquid-maler Det er ikke støtte for Liquid-kode og Liquid-maler. Få tilgang til data ved hjelp av rammeverkets malmotor og nett-API-er.

vanlige spørsmål

Hvordan er støtten for enhets- og integrasjonstesting?

For øyeblikket er det ingen innebygd støtte for enhets- og integrasjonstesting. Utviklere må skrive og kjøre disse testene lokalt eller i CI/CD-kanalene.

Finnes det støtte for Power Fx-integrasjon ved hjelp av WebAssembly?

Denne funksjonaliteten støttes for øyeblikket ikke.

Er kildekode tilgjengelig i Power Pages?

For øyeblikket kan beslutningstakere bygge nettsteder ved hjelp av TypeScript eller GitHub Copilot Agent. De kompilerte JavaScript- og CSS-filene er tilgjengelige og kan redigeres i Visual Studio Code. Direkte og omfattende redigering av HTML-filer støttes imidlertid ikke for øyeblikket.

Kan jeg opprette en komponent eksternt ved hjelp av denne funksjonen og hente den til et Power Pages nettsted?

Nei, du kan ikke hente en eksternt generert komponent til et eksisterende Power Pages nettsted ved hjelp av denne funksjonen.

Kan jeg legge til standardkomponenter som lister og skjemaer?

Å legge til standardkomponenter som lister og skjemaer støttes for øyeblikket ikke. Du kan imidlertid bygge egendefinerte skjemaer og lister ved hjelp av React-rammeverket og nett-API-er.

Hvordan fungerer kildekontroll?

Utviklere kan bruke Power Platform Git-integrering til kildekontroll. Imidlertid er det bare de kompilerte nettfilene som legges til i repositoriet, ikke den fullstendige kildekoden.

Støtter disse nettstedene SEO?

Fordi enkeltsideappnettsteder er bygd med React-rammeverket og bruker gjengivelse på klientsiden, er SEO-støtte begrenset.

Hvilken Power Pages støtte for sikkerhet og styring tilbyr SPA-nettsteder?

Power Pages fremtvinger tabelltillatelser og nettroller for sikkerhet på web-API-kall, slik at datatilgangen samsvarer med brukerroller. Bruk objektet til å hente egenskaper for Basic-bruker og skreddersy funksjoner basert på brukeridentiteter.

I tillegg støtter enkeltsideappnettsteder følgende:

  • Konfigurasjoner for offentlige og private nettsteder
  • Styringsinnstillinger, inkludert kontroll over anonym datatilgang
  • Konfigurasjoner for godkjenningsleverandør

Disse funksjonene bidrar til å sikre sikker og kompatibel integrering av egendefinerte komponenter i Power Pages.

  • Last updated on