Създайте и внедрете едностранично приложение в Power Pages

Power Pages поддържа интегриране на едностраничен код за приложения (SPA), създаден с инструменти от следващо поколение AI-подпомогнати инструменти, като GitHub Copilot. Тази възможност позволява на разработчиците да внесат модерни, компонентно-базирани фронтенд преживявания в Power Pages, използвайки естествен език като интерфейс за кодиране.

Чрез насочване, тестване и усъвършенстване на код, генериран от AI, производителите могат да изместят фокуса си от повтарящи се задачи за внедряване към оркестрация на по-високо ниво. Това дава възможност за по-интуитивно, творческо развитие, като същевременно поддържа качество и стандарти от корпоративен клас.

Тази статия ви показва как да:

Създайте и настройте SPA проект за Power Pages, използвайки Power Platform CLI (PAC CLI).
Качвайте и изтегляйте кодови ресурси към и от вашия Power Pages сайт.
Създайте сигурна и поддържана структура на проекта.
Научете ключовите разлики между реализации, базирани на SPA и традиционни Power Pages.

Бележка

SPA сайт е Power Pages сайт, който работи изцяло в браузъра на потребителя (рендериране от страна на клиента). За разлика от традиционните Power Pages сайтове, SPA сайтовете се управляват само чрез изходен код и инструменти за команден интерфейс (CLI).
Power Platform Git интеграция не се поддържа за уебсайтове за Single-Page приложения (SPA) в Power Pages.

Предварителни изисквания

Преди да започнете, уверете се, че имате:

Power Pages среда с администраторски права.
Power Platform CLI (PAC CLI) версия 1.44.x или по-нова инсталирана и удостоверена.
Сайт на Power Pages на версия 9.7.4.x или по-нова.
Позволете качване на JavaScript файлове в Dataverse среди.
Локално Git хранилище с вашия персонализиран фронтенд проект, като React, Angular или Vue.

Позволено качване на JavaScript файлове

По подразбиране някои среди на Dataverse блокират качването на JavaScript () файлове. Ако срещнете грешката "Import failed: Прикаченият файл или не е валиден тип, или е твърде голям. Не може да бъде качен или изтеглен." актуализирайте настройките на околната среда, за да позволите този тип файл.

За да коригирате настройките в Power Platform центъра за администриране за среда, изпълнете следните стъпки:

Влезте в центъра за администриране на Power Platform.
В навигационния екран изберете Управление.
В екрана Управление изберете Среди.
Изберете среда.
В командната лента изберете Настройки.
Разгънете Продукт и след това изберете Поверителност + Защита.
В секцията Блокирани прикачени файлове премахнете от списъка с разширения на файловете.
Изберете Запиши.

Създаване и внедряване на СПА сайт

Power Pages SPA обекти се управляват чрез командите на PAC CLI upload-code-site и download-code-site. След като качите сайт, той се появява в Power Pages в списъка Неактивни сайтове. Активирайте сайта, за да го направите достъпен за потребителите.

Качване на СПА сайт

Използвайте командата pac pages-code-site, за да качите локалния си източник и компилирани ресурси в Power Pages среда.

Синтаксис

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

Параметри

параметър	Псевдоним	Необходимо	Описание
`--rootPath`	`-rp`	Да	Локална папка, в която се съдържат изходните файлове на вашия сайт
`--compiledPath`	`-cp`	No	Път към компилирани активи, като React
`--siteName`	`-sn`	No	Показване на име за вашия Power Pages сайт

Пример

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

Ако нямате съществуващ проект, опитайте примерните реализации на SPA сайтове с помощта на React, Angular и Vue.

Определяне на параметри за качване с

Персонализирайте поведението на командата, като включите файл във вашия сайт. Поставете този конфигурационен файл в главната папка на сайта. Когато използвате качвания на сайтове, базирани на конфигурация, изпълнете командата само с параметъра . Командата автоматично чете други стойности, като например пътя на компилираните активи и показваното име на сайта, от файла. Ако предоставите както аргументи от командния ред, така и конфизионни стойности, аргументите на командния ред имат предимство.

Пример :

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

Изтеглете СПА сайт

Използвайте командата pac pages download-code-site , за да изтеглите кода на съществуващ сайт в локална директория за целите на редактирането или архивирането.

Синтаксис

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

Параметри

параметър	Псевдоним	Необходимо	Описание
`--environment`	`-env`	No	Dataverse среда (GUID или пълен URL адрес). По подразбиране е вашият активен профил за удостоверяване
`--path`	`-p`	Да	Локална директория за изтегляне на кода на сайта
`--webSiteId`	`-id`	Да	Уебсайт запис GUID на сайта Power Pages SPA
`--overwrite`	`-o`	No	Презапишете съществуващите файлове в целевата директория, ако съществуват

Пример

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

Активирайте и тествайте сайта си

Отидете на Power Pages.
Изберете Неактивни сайтове, намерете сайта си и изберете Повторно активиране.
Когато сайтът е активен, отидете на URL адреса на сайта си, за да проверите внедряването.

Съвет

Всяка по-късна команда автоматично актуализира активния сайт.

Структура и конфигурация на проекта

Последователното оформление на проекта помага да се гарантира правилното поведение при качване.

/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

Използвайте незадължителния файл, за да персонализирате начина на работа на командата.

Удостоверяване и упълномощаване

Power Pages SPA сайтове използват същия security модел както традиционните Power Pages обекти.

Конфигуриране на доставчици на самоличност

Отидете на Power Pages.
Намерете сайта си и изберете Редактиране.
ИзберетеДоставчици на самоличност.
Добавете или настройте identity providers, като Microsoft Entra ID.
Всеки нов сайт автоматично има стандартен Microsoft Entra ID доставчик.

Достъп до потребителския контекст в кода

Получете метаданни за удостоверяване на клиента:

URL адрес на органа:

Авторитетът или URL за вход за Microsoft Entra ID е:
```
https://login.windows.net/<tenantId>
```
Намерете Authority URL за други конфигурирани доставчици на идентичност, като отидете на Power Pages><your site>>Security>Identity providers> конфигурационни настройки.

Данни за потребителя:

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

Проба React поток

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

Използвайте уеб API на Power Pages

Разработчиците могат да използват Power Pages уеб API за зареждане на съдържание в потребителския интерфейс или за създаване, обновяване и изтриване на записи. Преди да използвате тези API, уверете се, че необходимите уеб API са активирани и подходящите разрешения за таблици и уеб роли са правилно конфигурирани.


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

Настройте локална разработка, като активирате уеб API извиквания от localhost чрез Microsoft Entra ID автентикация

Разработчиците се нуждаят от по-бързи цикли на итерация, локално отстраняване на грешки и възможности за горещо презареждане, когато създават приложения. SPA поддържа тези работни потоци, като позволява сигурни уеб API извиквания от localhost чрез Microsoft Entra ID (Azure AD) v1 автентикация.

Тази настройка ви позволява:

Стартирайте приложението си локално с пълна поддръжка за удостоверяване.
Използвайте съвременни инструменти за разработка като Vite за горещо презареждане и бърза обратна връзка.
Избягвайте проблеми с CORS при извикване на Power Pages Web API.
Ускорете разработката, без да внедрявате промени в портала.

Тази конфигурация позволява продуктивно изживяване при локална разработка за SPA, което позволява на разработчиците да създават, тестват и итерират бързо с пълен достъп до API и поддръжка за удостоверяване.

Важно

Използвайте само Microsoft Entra v1 крайни точки за удостоверяване.
Удостоверяването на носителя се поддържа само във версии на портала 9.7.6.6 или по-нови.
Приложете тези настройки само в среди за разработка.

Стъпки за конфигуриране

Активиране на SPA удостоверяване
1. В https://portal.azure.com отворете приложението Microsoft Entra, регистрирано за вашия портал.
2. Активирайте удостоверяване на приложение за една страница (SPA ).
3. Добавете като URI за пренасочване, като използвате конфигурацията на платформата за приложения с една страница . Вижте Как да добавите URI за пренасочване във вашето приложение за повече подробности.
  - URI на пренасочване: .

Добавяне на настройки на сайта

Добавете тези настройки на сайта в Power Pages:

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

Използвайте ADAL.js за влизане
- Внедрете влизане от страна на клиента с помощта наADAL.js.
Бележка

MSAL.js не е съвместим, защото Power Pages използва Microsoft Entra v1 крайни точки, докато MSAL използва v2. Форматът на емитента се различава в различните версии.
Добавяне на заглавка за оторизация
- Включете този хедър във всички заявки за уеб API:
```
Authorization: Bearer <id_token>
```
Задайте видимост на сайта на Public
- Тази настройка позволява достъп до сайта за целите на разработването и тестването.

Конфигуриране на прокси сървър за разработка

Ако използвате Vite, добавете това, за да избегнете проблеми с CORS:

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

Разлики от съществуващите сайтове на Power Pages

Следната таблица обобщава ключовите разлики между SPA сайтовете, създадени с тази функция, и традиционните Power Pages сайтове:

Характеристика	Поведение на СПА сайта
Опресняване от страна на сървъра	Винаги връща главната страница на сайта, а рутерът от страна на клиента изобразява подмаршрути.
Конфликти на маршрути	Маршрутите от страна на клиента имат предимство и твърдото опресняване се връща обратно в корена.
Работно пространство на страницата	Работното пространство за страници не се поддържа. Използвайте маршрутизиране на клиенти и страници на клиентски сайтове. За защита на ниво страница проверете присвоените уеб роли с глобалния потребителски обект и условно изобразете потребителския интерфейс.
Работно пространство за стил	Стилизирането с работното пространство за стилове не се поддържа. Използвайте стила на вашата рамка, като CSS например - CSSin-JS или помощни класове.
Локализация	Едноезична поддръжка. Внедрете зареждане на ресурси от страна на клиента.
Течно шаблониране	Шаблоните Liquid code и Liquid не се поддържат. Осъществявайте достъп до данни с помощта на двигателя за шаблони на вашата рамка и уеб API.

ЧЗВ

Каква поддръжка е налична за тестване на модули и интеграции?

В момента няма вградена поддръжка за тестване на модули и интеграции. Създателите трябва да напишат и изпълнят тези тестове локално или в рамките на своите CI/CD тръбопроводи.

Има ли поддръжка за Power Fx интеграция с помощта на WebAssembly?

Тази възможност в момента не се поддържа.

Наличен ли е изходният код в Power Pages?

В момента създателите могат да създават уебсайтове, използвайки TypeScript или GitHub Copilot Agent. Компилираните JavaScript и CSS файлове са достъпни и могат да се редактират във Visual Studio Code. В момента обаче не се поддържа директно и обширно редактиране на HTML файлове.

Мога ли да създам компонент външно, използвайки тази функция, и да го пренеса на Power Pages сайт?

Не, не можете да пренесете външно генериран компонент в съществуващ Power Pages сайт с тази функция.

Мога ли да добавя готови компоненти като списъци и формуляри?

Добавянето на готови компоненти като списъци и формуляри в момента не се поддържа. Можете обаче да създавате персонализирани формуляри и списъци, като използвате рамката React и уеб API.

Как работи контролът на източника?

Разработчиците могат да използват Power Platform интеграция на Git за контрол на източника. Въпреки това, към хранилището се добавят само компилираните уеб файлове, а не пълният изходен код.

Тези сайтове поддържат ли SEO?

Тъй като SPA сайтовете са създадени с рамката React и използват изобразяване от страна на клиента, SEO поддръжката е ограничена.

Каква поддръжка за сигурност и управление на Power Pages предлагат SPA сайтовете?

Power Pages налага разрешения за таблици и уеб роли за сигурност при Web API извиквания, като гарантира, че достъпът до данни е в съответствие с ролите на потребителите. Използвайте обекта, за да извлечете основни потребителски свойства и да персонализирате изживявания въз основа на потребителски личности.

Освен това СПА сайтовете поддържат:

Конфигурации на публичен и частен сайт
Настройки за управление, включително контрол върху анонимния достъп до данни
Конфигурации на доставчика на удостоверяване

Тези функции помагат за осигуряване на сигурна и съвместима интеграция на персонализирани компоненти в Power Pages.

Обратна връзка

Тази страница полезна ли беше?

Last updated on 2026-03-07

Създайте и внедрете едностранично приложение в Power Pages

Предварителни изисквания

Позволено качване на JavaScript файлове

Създаване и внедряване на СПА сайт

Качване на СПА сайт

Синтаксис

Параметри

Пример

Определяне на параметри за качване с

Изтеглете СПА сайт

Синтаксис

Параметри

Пример

Активирайте и тествайте сайта си

Структура и конфигурация на проекта

Удостоверяване и упълномощаване

Конфигуриране на доставчици на самоличност

Достъп до потребителския контекст в кода

Проба React поток

Използвайте уеб API на Power Pages

Настройте локална разработка, като активирате уеб API извиквания от localhost чрез Microsoft Entra ID автентикация

Стъпки за конфигуриране

Разлики от съществуващите сайтове на Power Pages

ЧЗВ

Каква поддръжка е налична за тестване на модули и интеграции?

Има ли поддръжка за Power Fx интеграция с помощта на WebAssembly?

Наличен ли е изходният код в Power Pages?

Мога ли да създам компонент външно, използвайки тази функция, и да го пренеса на Power Pages сайт?

Мога ли да добавя готови компоненти като списъци и формуляри?

Как работи контролът на източника?

Тези сайтове поддържат ли SEO?

Каква поддръжка за сигурност и управление на Power Pages предлагат SPA сайтовете?

Свързана информация

Обратна връзка

Допълнителни ресурси