Power Pages-те бір беттік қосымшаны жасап, орналастыру

Power Pages бір беттік қосымша (SPA) кодын келесі буын жасанды интеллект көмегімен GitHub Copilot сияқты құралдармен біріктіруді қолдайды. Бұл мүмкіндік әзірлеушілерге Power Pages-ке табиғи тілді кодтау интерфейсі ретінде қолдану арқылы заманауи, компоненттерге негізделген алдыңғы интерфейсті енгізуге мүмкіндік береді.

Жасалушылар AI жасаған кодты бағыттау, сынау және нақтылау арқылы олардың назарын қайталанатын орындау тапсырмаларынан жоғары деңгейлі оркестрлеуге ауыстыра алады. Бұл тәсіл интуитивті, шығармашылық дамуға мүмкіндік береді, сонымен қатар кәсіпорын деңгейіндегі сапа мен стандарттарды сақтайды.

Бұл мақала сізге қалай істеу керектігін көрсетеді:

Power Pages үшін SPA жобасын Power Platform CLI (PAC CLI) арқылы жасап, орнатыңыз.
Power Pages сайтыңызға және одан код ресурстарын жүктеп, жүктеңіз.
Қауіпсіз және қолдау көрсетілетін жоба құрылымын орнатыңыз.
SPA негізіндегі және дәстүрлі Power Pages іске асырулары арасындағы негізгі айырмашылықтарды үйреніңіз.

Ескертпе

SPA сайты — бұл пайдаланушының браузерінде толығымен жұмыс істейтін Power Pages сайты (клиент жағындағы рендеринг). Дәстүрлі Power Pages сайттарынан айырмашылығы, SPA сайттарын тек бастапқы код пен командалық жол интерфейсі (CLI) құралдары арқылы басқарасыз.
Power Platform Git интеграциясы Power Pages Single-Page Application (SPA) сайттарында қолдау таппайды.

Алғышарттар

Бастамас бұрын, сізде бар екеніне көз жеткізіңіз:

әкімшілік құқықтары бар Power Pages орта.
Power Platform CLI (PAC CLI) 1.44.x немесе одан кейінгі нұсқасы орнатылған және түпнұсқалығы расталған.
Power Pages сайты 9.7.4.x немесе одан кейінгі нұсқаларда.
Dataverse орталарында JavaScript файлдарын жүктеуге рұқсат беріңіз.
React, Angular немесе Vue сияқты жеке алдыңғы жобаларыңыз бар жергілікті Git репозиторийі.

JavaScript файлдарын жүктеуге рұқсат беру

Әдепкі бойынша, кейбір Dataverse орталары JavaScript (.js) файлдарын жүктеуді бұғаттайды. Егер "Импорттау сәтсіз аяқталды: Тіркеме жарамсыз түрі немесе тым үлкен" деген қатеге тап болсаңыз. Оны жүктеу немесе жүктеу мүмкін емес.» деп қоршаған орта баптауларын осы файл түріне рұқсат беру үшін жаңартыңыз.

Ортаның Power Platform басқару орталығындағы параметрлерді реттеу үшін мына қадамдарды орындаңыз:

Power Platform басқару орталығынакіріңіз.
Шарлау тақтасында Басқару опциясын таңдаңыз.
ішінде Басқару тақтасында таңдаңыз Қоршаған орталар.
Ортаны таңдаңыз.
Пәрмендер жолағында Параметрлер таңдаңыз.
Өнім тармағын кеңейтіп, Құпиялылық + Қауіпсіздік опциясын таңдаңыз.
Blocked Attachments бөлімінде файл кеңейтімдері тізімінен алып js тастаңыз.
Сақтау опциясын таңдаңыз.

SPA сайтын жасаңыз және орналастырыңыз

Power Pages SPA орындары PAC CLI командалары upload-code-site және download-code-site арқылы басқарылады. Сайтты жүктегеннен кейін, ол Белсенді емес сайттар тізімінде Power Pages түрінде пайда болады. Сайтты пайдаланушыларға қолжетімді ету үшін оны белсендіріңіз.

SPA сайтын жүктеп салыңыз

pac pages upload-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`	Жоқ	React сияқты жинақталған активтерге жол `build`
`--siteName`	`-sn`	Жоқ	Сіздің Power Pages сайтыңыздың көрсету атауы

Мысал

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

Егер сізде бар жоба болмаса, React, Angular және Vue көмегімен SPA сайттарының үлгілерін қолданып көріңіз.

Кері жүктеу параметрлерін анықтау `powerpages.config.json`

Команданың әрекетін upload-code-site сайтыңыздың түбірлік қалтасына файл қосу powerpages.config.json арқылы баптаңыз. Файл бар болғанда, тек параметрмен upload-code-site іске --rootPath қосыңыз. Команда конфигурация файлынан қалған мәндерді оқиды. Егер сіз командалық жол аргументтерін және конфигурация мәндерін берсеңіз, командалық жол аргументтері басымдыққа ие болады.

Конфигурация өрістері

Өріс	Түр	Қажетті	Сипаттама
`siteName`	жол	Иә	Power Pages сайтының көрсететін атауы.
`compiledPath`	жол	Иә	Компиляцияланған шығыс каталогына (мысалы, Vite `dist` немесе React `build` қалтасына) `powerpages.config.json`жол, .
`defaultLandingPage`	жол	Иә	Сайт түбірі ашылғанда көрсетілетін HTML бет (әдетте`compiledPath`) салыстырмалы `index.html` .
`bundleFilePatterns`	Жол[]	Жоқ	Жаңа құрастыруды жүктемес бұрын CLI алып тастайтын сайттағы файлдарды `web-files` анықтайтын wildcard үлгілерінің тізімі. Бұл өрісті ескірген, контентпен хэштелген топтамаларды тазалау үшін қолданыңыз, сонда сайтта ескі активтер жиналмасын. Кодты бөлу және bundle cleanup бөлімдерін қараңыз.
`includeSource`	boolean	Жоқ	Қашан `true`, команда компиляцияланған активтермен бірге бастапқы кодыңызды жүктейді. Әдепкі ретінде `false`.
`sourceExcludePatterns`	Жол[]	Жоқ	Жүктеуден шығару үшін бастапқы файлдарды жою үшін wildcard үлгілері. Тек бар `includeSource` болғанда `true` ғана қолданылады (мысалы, skip `node_modules` немесе local environment файлдары үшін).

Ең дәл және up-to-date өріс сілтемесі үшін схеманы қараңызpowerpages.config.json. JSON Schema-ны қолдайтын редакторларда валидация мен автотолықтыруды қосу үшін конфигурация файлыңызға сәйкестендіру $schema қасиетін қосыңыз.

Үлгі `powerpages.config.json`

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

SPA сайтын жүктеп алыңыз

Өңдеу немесе сақтық көшірме жасау мақсатында бар сайттың кодын жергілікті каталогқа жүктеп алу үшін 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`	Жоқ	Dataverse орта (GUID немесе толық URL). Белсенді аутентификация профилінің әдепкілері
`--path`	`-p`	Иә	Сайт кодын жүктеп алу үшін жергілікті каталог
`--webSiteId`	`-id`	Иә	Power Pages SPA сайтының веб-сайт жазбасы GUID
`--overwrite`	`-o`	Жоқ	Бар болса, мақсатты каталогтағы бар файлдарды қайта жазыңыз

Мысал

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

Сайтыңызды белсендіріңіз және тексеріңіз

Power Pages-ге өтіңіз.
Белсенді емес сайттар таңдаңыз, сайтыңызды табыңыз және Қайта белсендіру опциясын таңдаңыз.
Сайт белсенді болғанда, орналастыруды тексеру үшін сайттың URL мекенжайына өтіңіз.

Кеңес

Кез келген кейінгі upload-code-site пәрмені белсенді сайтты автоматты түрде жаңартады.

Жобаның құрылымы және конфигурациясы

Сәйкес жоба орналасуы дұрыс жүктеп салу әрекетін қамтамасыз етуге көмектеседі.

/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

powerpages.config.json пәрменінің жұмысын реттеу үшін қосымша upload-code-site файлды пайдаланыңыз.

Кодты бөлу және топтаманы тазалау

Бір бетті қосымша өскен сайын, бір JavaScript топтамасы үлкен болып, жүктелуі баяу болады. Қазіргі құрастыру құралдары бұл мәселені кодты бөлу арқылы шешеді. Бұл әдіс қосымшаны кішірек бөліктерге бөледі, оларды браузер сұраныс бойынша жүктейді (мысалы, пайдаланушы белгілі бір бағытқа өткенде ғана). Әрбір фрагмент файл атауында контент хэшімен беріледі, мысалы Dashboard-BSbmIXoe.js, сондықтан браузерлер оны ұзақ уақыт кэштеп, тек мазмұны өзгергенде ғана қайта жүктей алады.

Кодты бөлу Power Pages SPA сайттарына тән тарату мәселесін енгізеді: әр құрастыру жаңа хэштелген файл атауларын шығарғандықтан, қайталанатын upload-code-site орындаулары ескі хэштелген файлдарды сайтта қалдырады. Көптеген орналастырулар барысында бұл жетім бөліктер сайттың web-files. bundleFilePatterns Бұл алаң powerpages.config.json оларды тазалау үшін бар.

Кодты бөлуді қосу

Кодты бөлу Power Pages емес, фронт-енд құрастыру құралы арқылы жүзеге асады, сондықтан бұл әдіс сіз қолданатын фреймворк пен жинақтаушыға байланысты. Ең кең таралған әдіс — қосымшаның кейбір бөліктерін динамикалық импорттаумен жүктеу, көбінесе маршрут немесе көрініс деңгейінде қолданылады, сондықтан әр бөлім тек пайдаланушы оған кіргенде жүктеледі (жалқау жүктеу).

Vite, webpack және esbuild сияқты жинақтаушылар модульдерді арнайы атаулы бөліктерге топтастыра алады. Нақты конфигурация үшін фреймворк пен bundler-дің құжаттамасын қараңыз.

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

Қай тәсілді таңдасаңыз да, нәтиже бірдей, және орналастыру үшін маңыздысы — құрастыру бірнеше шығыс файлдарын шығарады, әрқайсысының атына контент хэші. Файл мазмұны өзгерген сайын хэштер өзгеретіндіктен, әр жинақтау әртүрлі файл атауларын шығарады. Келесі бөлімдерде атаулар өзгерген сайын Dataverse ортаңызды таза ұстаудың жолдары түсіндіріледі.

Ескі байламдарды қалай `upload-code-site` тазартады

Компиляцияланған активтерді жүктемес бұрын, upload-code-site сайттағы web-files wildcard үлгісіндегі bundleFilePatternsбарлық файлдарды өшіріп, ағымдағы құрастыруды жүктеңіз. Бұл өшіріп, содан кейін жүктеу әрекеті орналастырылған файл жиынтығын соңғы компиляцияланған шығысыңызбен бірдей ұстайды, әр құрастыруды алдыңғысының үстіне қабаттамайды.

Тазалау жұмыс істеуі үшін, wildcard үлгілері bundleFilePatterns сіздің билдіңіз шығаратын файл атауларымен сәйкес келуі керек. Оларды дәл ұстаудың екі жолы бар, құрастыру құралдарының файлдарын қалай атауына байланысты.

1-нұсқа: Wildcard үлгілерін тікелей тізімдеу

Көптеген жинау құралдары тұрақты атау префиксін сақтап, тек мазмұн хэшын өзгертеді, мысалы index-[hash].js. Егер сіздің шығару файл атауларыңыз осындай болжамды үлгіге сәйкес келсе, әр файл bundleFilePatternsүшін wildcard үлгісін көрсетіңіз. Қосымша құралдар қажет емес:

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

Wildcard үлгісі index-*.js әрбір құрастыруда, хэшке қарамастан, сол файлға сәйкес келеді. Әр шығару файлына бір жазба қосыңыз, ал құрастыру жаңа файл шығара бастағанда жаңа үлгі қосыңыз.

2-нұсқа: Пост-билд скрипті арқылы wildcard үлгілерін жасау

Бұл тәсілді шығару файл атауларыңыз болжамды үлгіге сай келмеген жағдайда немесе қосымшаңызда маршруттарды қосу мен алып тастау кезінде атаулары өзгеретін көптеген файлдар шығарғанда, бұл қолмен жүргізілген тізімді қателіктерге бейімділік етеді. Құрастырудан кейін жұмыс істейтін қысқа скрипт компиляцияланған шығысты сканерлеп, әр шығарылған файл үшін wildcard үлгісімен қайта жазады bundleFilePatterns . Мысалы, құрастыру құралы файлдарды , [name]-[hash].[ext]деп атағанда, скрипт үлгіге Dashboard-BSbmIXoe.jsдейін қысқартады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)
}

Скриптті жинағыңызға қосыңыз, ол әрдайым пакет жасаушыдан кейін жұмыс істейді:

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

Енді орналастыру екі командадан тұрады, және сайт ешқашан жетім қалған чанктарды жинамайды:

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

Құрастырудан кейін нақты powerpages.config.json ағымдағы топтамаларды көрсетеді, мысалы:

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

Түпнұсқалық растама және авторизация

Power Pages SPA орындары дәстүрлі Power Pages сайттарымен бірдей қауіпсіздік моделі қолданады.

Сәйкестендіру провайдерлерін конфигурациялаңыз

Power Pages-ге өтіңіз.
Сайтыңызды тауып, Өңдеу таңдаңыз.
Қауіпсіздік>сәйкестендіру провайдерлерін таңдаңыз.
identity providers қосу немесе орнату Microsoft Entra ID сияқты.
Әр жаңа сайтта автоматты түрде әдепкі Microsoft Entra ID провайдері болады.

Кодтағы пайдаланушы контекстіне қол жеткізіңіз

Клиентте аутентификация метадеректерін алыңыз:

Өкілеттің URL мекенжайы:

Microsoft Entra ID үшін тіркелген немесе кіру URL-жайы:
```
https://login.windows.net/<tenantId>
```
Басқа бапталған идентификация провайдерлері үшін Authority URL мекенжайын Power Pages><your site>>Security>Identity providers> баптау баптауларына кіріңіз.
Пайдаланушы мәліметтері:
```
window["Microsoft"].Dynamic365.Portal.User
```

Реакция ағынының үлгісі

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 Web API-лерін пайдалану

Әзірлеушілер Power Pages Web 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;
};

Microsoft Entra ID аутентификациясы арқылы localhost-тан Web API шақыруларын қосу арқылы жергілікті әзірлеуді орнатыңыз

Әзірлеушілерге қосымшаларды құру кезінде жылдам итерация циклдары, жергілікті жөндеу және ыстық қайта жүктеу мүмкіндіктері қажет. SPA бұл жұмыс процестерін Microsoft Entra ID (Azure AD) v1 аутентификациясы арқылы localhost-ден қауіпсіз Web API шақыруларын іске қосу арқылы қолдайды.

Бұл орнату мыналарға мүмкіндік береді:

Бағдарламаны толық аутентификация қолдауымен жергілікті түрде іске қосыңыз.
Ыстық қайта жүктеу және жылдам кері байланыс үшін Vite сияқты заманауи әзірлеу құралдарын пайдаланыңыз.
Power Pages Web API-лерін шақырғанда CORS мәселелерінен аулақ болыңыз.
Порталға өзгерістер енгізбей-ақ дамуды жылдамдатыңыз.

Бұл конфигурация SPA үшін жергілікті әзірлеу тәжірибесін тиімді түрде қамтамасыз етеді, сондықтан әзірлеушілер толық API қолжетімділігі мен аутентификация қолдауымен жылдам құрастырып, сынап, итерациялай алады.

Маңызды

Аутентификация үшін тек Microsoft Entra v1 соңғы нүктелерін қолданыңыз.
Аутентификация тек 9.7.6.6 немесе одан кейінгі нұсқаларында ғана қолдау көрсетіледі.
Бұл параметрлерді тек қоршаған ортада қолданыңыз.

Баптау қадамдары

SPA аутентификациясын қосу
1. Azure portal бөлімінде порталыңызға тіркелген Microsoft Entra қосымшасын ашыңыз.
2. Бір беттік қолданбаның (SPA) аутентификациясын қосу.
3. localhost платформасының конфигурациясын пайдаланып, қайта бағыттау URI ретінде қосыңыз. Толығырақ ақпарат алу үшін, өтінішіңізге қалай қайта бағыттау URI қосуға болады деген бөлімге қараңыз.
  - URI-ді қайта бағыттау: http://localhost:<port>/.

Сайт параметрлерін қосу

Мына сайт баптаулары 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>
```
Сайттың көрінуін жалпыға қолжетімді етіп орнату
- Бұл параметр сайтқа әзірлеу және тестілеу мақсаттары үшін кіруге мүмкіндік береді localhost .

Әзірлеу проксиін баптау

Егер Vite қолдансаңыз, CORS мәселелерін болдырмау үшін осы кодты vite.config.js қосыңыз:

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

Қолданыстағы Power Pages сайттарынан айырмашылықтары

Төмендегі кестеде осы функциямен жасалған SPA сайттары мен дәстүрлі Power Pages сайттары арасындағы негізгі айырмашылықтар көрсетілген:

Мүмкіндік	SPA сайтының әрекеті
Сервер жағындағы жаңарту	Әрқашан сайттың түпкі бетін қайтарады, ал клиент жағындағы маршрутизатор қосалқы маршруттарды көрсетеді.
Бағыт қақтығыстары	Клиенттік бағыттар басымдыққа ие болады және қатты жаңарту түбірге қайта оралады.
Беттің жұмыс кеңістігі	беттердің жұмыс кеңістігіне қолдау көрсетілмейді. Клиентті бағыттау және клиент сайтының беттерін пайдаланыңыз. Бет деңгейіндегі қауіпсіздік үшін жаһандық пайдаланушы нысанымен тағайындалған веб-рөлдерді тексеріңіз және UI шартты түрде көрсетіңіз.
Стиль жұмыс кеңістігі	стиль жұмыс кеңістігі мен сәндеуге қолдау көрсетілмейді. Фреймворктың стилін қолданыңыз, мысалы CSS, CSS-in-JSнемесе утилиталық кластар.
Локализация	Бір тілді қолдау. Клиенттік ресурстарды жүктеуді жүзеге асыру.
Сұйық үлгілеу	Сұйық коды және Сұйықтық үлгілеріне қолдау көрсетілмейді. Деректерге фреймворктың шаблон қозғалтқышы мен Web API-лерін пайдаланып қол жеткізіңіз.

жиі қойылатын сұрақтар

Бірлік пен интеграциялық тестілеуге қандай қолдау көрсетіледі?

Қазіргі уақытта бірлік пен интеграциялық тестілеуге арналған кірістірілген қолдау жоқ. Жасаушылар бұл сынақтарды жергілікті түрде немесе CI/CD құбырларының ішінде жазып, орындауы керек.

WebAssembly көмегімен Power Fx интеграцияға қолдау бар ма?

Бұл мүмкіндікке қазір қолдау көрсетілмейді.

Power Pages-те бастапқы код бар ма?

Қазіргі уақытта жасаушылар TypeScript немесе GitHub Copilot Agent арқылы веб-сайттар жасай алады. Компиляцияланған JavaScript және CSS файлдары қолжетімді және Visual Studio Code форматында өңделуге болады. Дегенмен, HTML файлдарын тікелей және ауқымды өңдеуге қазіргі уақытта қолдау көрсетілмейді.

Осы функцияны пайдаланып, компонентті сыртқы түрде жасап, оны Power Pages сайтына апаруға бола ма?

Жоқ, бұл функцияны пайдаланып сыртқы генерацияланған компонентті бар Power Pages сайтына алып келу мүмкін емес.

Тізімдер мен пішіндер сияқты қордан тыс құрамдастарды қоса аламын ба?

Тізімдер мен пішіндер сияқты дайын құрамдастарды қосуға қазіргі уақытта қолдау көрсетілмейді. Алайда, React фреймворк пен Web API-лерін пайдаланып арнайы формалар мен тізімдер жасауға болады.

SPA сайтын PWA ретінде Set Workspace-тен қосуға бола ма?

Жоқ. SPA сайттары орнатылған жұмыс кеңістігінде прогрессивті веб-қосымша (PWA) баптауын қолдамайды. Бұл шектеу Mobile бөлімін сайтты PWA ретінде қосу үшін пайдалануға мүмкіндік бермейді. PWA мүмкіндіктерін қосу үшін, мысалы, орнатылатын қосымша тәжірибелері мен офлайн беттер, оларды фреймворк кодыңызға енгізіңіз. Мысалы, веб-қосымша манифестін және қызмет қызметкерін қосыңыз.

Дереккөзді басқару қалай жұмыс істейді?

Әзірлеушілер бастапқы басқару үшін Power Platform Git интеграциясын пайдалана алады. Дегенмен, репозиторийге толық бастапқы код емес, тек құрастырылған веб-файлдар қосылады.

Бұл сайттар SEO-ді қолдай ма?

SPA сайттары React құрылымымен құрастырылғандықтан және клиенттік көрсетуді пайдаланатындықтан, SEO қолдауы шектеулі.

SPA сайттары қандай Power Pages қауіпсіздік және басқару қолдауын ұсынады?

Power Pages веб-API шақыруларында кесте рұқсаттары мен қауіпсіздік веб-рөлдерін қадағалайды, деректерге қол жеткізу пайдаланушы рөлдеріне сәйкес келуін қамтамасыз етеді. Негізгі пайдаланушы сипаттарын шығарып алу және пайдаланушы тұлғаларына негізделген тәжірибелерді бейімдеу үшін window["Microsoft"].Dynamic365.Portal.User нысанын пайдаланыңыз.

Сонымен қатар, SPA сайттары мыналарды қолдайды:

Жалпы және жеке сайт конфигурациялары
Басқару параметрлері, соның ішінде анонимді деректерге кіруді бақылау
Аутентификация провайдерінің конфигурациялары

Бұл мүмкіндіктер Power Pages ішіндегі арнайы компоненттердің қауіпсіз және сәйкес интеграциясын қамтамасыз етеді.

Microsoft Power Platform CLI
Оқулық: Microsoft Power Platform CLI-ді Power Pages
Visual Studio Code кеңейтімін пайдалану

Кері байланыс

Бет пайдалы болды ма?

Last updated on 2026-07-21

Power Pages-те бір беттік қосымшаны жасап, орналастыру

Алғышарттар

JavaScript файлдарын жүктеуге рұқсат беру

SPA сайтын жасаңыз және орналастырыңыз

SPA сайтын жүктеп салыңыз

Синтаксис

Параметрлер

Мысал

Кері жүктеу параметрлерін анықтау powerpages.config.json

Конфигурация өрістері

Үлгі powerpages.config.json

SPA сайтын жүктеп алыңыз

Синтаксис

Параметрлер

Мысал

Сайтыңызды белсендіріңіз және тексеріңіз

Жобаның құрылымы және конфигурациясы

Кодты бөлу және топтаманы тазалау

Кодты бөлуді қосу

Ескі байламдарды қалай upload-code-site тазартады

1-нұсқа: Wildcard үлгілерін тікелей тізімдеу

2-нұсқа: Пост-билд скрипті арқылы wildcard үлгілерін жасау

Түпнұсқалық растама және авторизация

Сәйкестендіру провайдерлерін конфигурациялаңыз

Кодтағы пайдаланушы контекстіне қол жеткізіңіз

Реакция ағынының үлгісі

Power Pages Web API-лерін пайдалану

Microsoft Entra ID аутентификациясы арқылы localhost-тан Web API шақыруларын қосу арқылы жергілікті әзірлеуді орнатыңыз

Баптау қадамдары

Қолданыстағы Power Pages сайттарынан айырмашылықтары

жиі қойылатын сұрақтар

Бірлік пен интеграциялық тестілеуге қандай қолдау көрсетіледі?

WebAssembly көмегімен Power Fx интеграцияға қолдау бар ма?

Power Pages-те бастапқы код бар ма?

Осы функцияны пайдаланып, компонентті сыртқы түрде жасап, оны Power Pages сайтына апаруға бола ма?

Тізімдер мен пішіндер сияқты қордан тыс құрамдастарды қоса аламын ба?

SPA сайтын PWA ретінде Set Workspace-тен қосуға бола ма?

Дереккөзді басқару қалай жұмыс істейді?

Бұл сайттар SEO-ді қолдай ма?

SPA сайттары қандай Power Pages қауіпсіздік және басқару қолдауын ұсынады?

Қатысты ақпарат

Кері байланыс

Қосымша ресурстар

Кері жүктеу параметрлерін анықтау `powerpages.config.json`

Үлгі `powerpages.config.json`

Ескі байламдарды қалай `upload-code-site` тазартады