Δημιουργία και ανάπτυξη εφαρμογής μίας σελίδας στο Power Pages

Power Pages υποστηρίζει την ενσωμάτωση κώδικα εφαρμογών μίας σελίδας (SPA) που έχει δημιουργηθεί με εργαλεία επόμενης γενιάς με υποβοήθηση τεχνητής νοημοσύνης, όπως GitHub Copilot. Αυτή η δυνατότητα επιτρέπει στους προγραμματιστές να μεταφέρουν σύγχρονες εμπειρίες προσκηνίου βάσει στοιχείων σε Power Pages χρησιμοποιώντας φυσική γλώσσα ως περιβάλλον εργασίας κωδικοποίησης.

Καθοδηγώντας, δοκιμάζοντας και βελτιώνοντας τον κώδικα που δημιουργείται από AI, οι δημιουργοί μπορούν να μετατοπίσουν την εστίασή τους από επαναλαμβανόμενες εργασίες υλοποίησης σε ενορχήστρωση υψηλότερου επιπέδου. Αυτή η προσέγγιση ενισχύει την πιο διαισθητική, δημιουργική ανάπτυξη, διατηρώντας παράλληλα ποιότητα και πρότυπα εταιρικού επιπέδου.

Αυτό το άρθρο σας δείχνει πώς να:

Δημιουργήστε και ρυθμίστε ένα έργο SPA για Power Pages χρησιμοποιώντας το Power Platform CLI (PAC CLI).
Μεταφορτώστε και κατεβάστε στοιχεία κώδικα από και προς την τοποθεσία Power Pages σας.
Δημιουργήστε μια ασφαλή και συντηρήσιμη δομή έργου.
Μάθετε τις βασικές διαφορές μεταξύ των υλοποιήσεων που βασίζονται σε SPA και των παραδοσιακών Power Pages υλοποιήσεων.

Note

Μια τοποθεσία SPA είναι μια Power Pages τοποθεσία που εκτελείται εξ ολοκλήρου στο πρόγραμμα περιήγησης του χρήστη (απόδοση από την πλευρά του προγράμματος-πελάτη). Σε αντίθεση με παραδοσιακές τοποθεσίες Power Pages, διαχειρίζεστε τοποθεσίες SPA μόνο μέσω εργαλείων πηγαίου κώδικα και διασύνδεσης γραμμής εντολών (CLI).
Η ενοποίηση Power Platform Git δεν υποστηρίζεται για ιστοσελίδες εφαρμογών μιας σελίδας (SPA) στις Power Pages.

Prerequisites

Προτού ξεκινήσετε, βεβαιωθείτε ότι έχετε:

Ένα περιβάλλον 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 (.js). Εάν αντιμετωπίσετε το σφάλμα "Η εισαγωγή απέτυχε: Το συνημμένο δεν είναι έγκυρος τύπος ή είναι πολύ μεγάλο. Δεν είναι δυνατή η αποστολή ή λήψη του.". Ενημερώστε τις ρυθμίσεις του περιβάλλοντός σας για να επιτρέψετε αυτόν τον τύπο αρχείου.

Για να προσαρμόσετε τις ρυθμίσεις στο κέντρο διαχείρισης Power Platform για ένα περιβάλλον, ακολουθήστε τα εξής βήματα:

Συνδεθείτε στο κέντρο διαχείρισης του Power Platform.
Στο παράθυρο περιήγησης, κάντε κλικ στην επιλογή Διαχείριση.
Στο τμήμα παραθύρου Διαχείριση, επιλέξτε Περιβάλλοντα.
Επιλογή ενός περιβάλλοντος.
Στη γραμμή εντολών, επιλέξτε Ρυθμίσεις.
Αναπτύξτε το Προϊόν, κι, έπειτα, επιλέξτε Ιδιωτικό απόρρητο + Ασφάλεια.
Στην ενότητα Αποκλεισμένα συνημμένα , καταργήστε 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"

Εάν δεν έχετε ένα υπάρχον έργο, δοκιμάστε τα δείγματα υλοποιήσεων τοποθεσιών SPA χρησιμοποιώντας React, Angular και Vue.

Ορισμός παραμέτρων αποστολής με `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`	string[]	Αρ.	Μια λίστα προτύπων μπαλαντέρ που προσδιορίζουν αρχεία στο `web-files` του ιστότοπου, τα οποία αφαιρεί το CLI πριν από τη μεταφόρτωση της νέας έκδοσης. Χρησιμοποιήστε αυτό το πεδίο για να εκκαθαρίσετε μπαγιάτικες δέσμες περιεχομένου, ώστε να μην συσσωρεύονται παλαιοί πόροι στην τοποθεσία. Ανατρέξτε στο θέμα Διαίρεση κώδικα και εκκαθάριση πακέτων.
`includeSource`	δυαδική τιμή	Αρ.	Όταν `true`, η εντολή ανεβάζει τον πηγαίο κώδικά σας μαζί με τα μεταγλωττισμένα στοιχεία. Η προεπιλογή είναι `false`.
`sourceExcludePatterns`	string[]	Αρ.	Μοτίβα μπαλαντέρ για αρχεία πηγής που εξαιρούνται από τη μεταφόρτωση. Ισχύει μόνο όταν `includeSource` το είναι `true` (για παράδειγμα, για παράλειψη `node_modules` ή τοπικό περιβάλλον αρχείων).

Για την πιο ακριβή και ενημερωμένη αναφορά πεδίων, ανατρέξτε στο powerpages.config.json σχήμα. Προσθέστε την αντίστοιχη $schema ιδιότητα στο αρχείο ρύθμισης παραμέτρων για να ενεργοποιήσετε την επικύρωση και την αυτόματη καταχώρηση σε προγράμματα επεξεργασίας που υποστηρίζουν σχήμα JSON.

Δείγμα `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`	Ναι	GUID καρτέλας τοποθεσίας Web της τοποθεσίας SPA του Power Pages
`--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, ώστε τα προγράμματα περιήγησης να μπορούν να το αποθηκεύσουν στο cache για μεγάλες περιόδους και να το κάνουν εκ νέου λήψη μόνο όταν αλλάζουν τα περιεχόμενά του.

Η διαίρεση κώδικα παρουσιάζει ένα ζήτημα ανάπτυξης μοναδικό για τις τοποθεσίες POWER PAGES SPA: επειδή κάθε δόμηση παράγει νέα ονόματα αρχείων κατακερματισμού, οι επαναλαμβανόμενες εκτελέσεις upload-code-site θα αφήσουν πίσω τα παλιά αρχεία κατακερματισμού στην τοποθεσία. Κατά τη διάρκεια πολλών αναπτύξεων, αυτά τα ορφανά κομμάτια συσσωρεύονται στο web-files του ιστότοπου. Το πεδίο bundleFilePatterns στο powerpages.config.json χρησιμεύει για να τα καθαρίσετε.

Ενεργοποίηση διαίρεσης κώδικα

Ο χειρισμός της διαίρεσης κώδικα γίνεται από το εργαλείο δόμησης προσκηνίου και όχι μέσω Power Pages, επομένως, η προσέγγιση εξαρτάται από το πλαίσιο και το εργαλείο δέσμης που χρησιμοποιείτε. Η πιο συνηθισμένη τεχνική είναι να φορτώνετε τμήματα της εφαρμογής με δυναμικές εισαγωγές, οι οποίες συχνά εφαρμόζονται στο επίπεδο διαδρομής ή προβολής, έτσι ώστε κάθε ενότητα να κάνει λήψη μόνο όταν ένας χρήστης μεταβαίνει σε αυτήν (αργή φόρτωση).

Οι πακέτες όπως το Vite, το webpack και το esbuild μπορούν επίσης να ομαδοποιούν λειτουργικές μονάδες σε επώνυμα τμήματα ρητά. Για την ακριβή ρύθμιση παραμέτρων, ανατρέξτε στην τεκμηρίωση για το πλαίσιο και τη λειτουργία δέσμης.

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 του ιστότοπου που αντιστοιχεί σε ένα μοτίβο υποκατάστασης στο bundleFilePatterns και, στη συνέχεια, μεταφορτώνει την τρέχουσα έκδοση build. Αυτή η συμπεριφορά διαγραφής και στη συνέχεια αποστολής διατηρεί το αναπτυγμένο σύνολο αρχείων πανομοιότυπο με την πιο πρόσφατη μεταγλωττισμένη έξοδο, αντί να προστίθεται κάθε build πάνω στο προηγούμενο.

Για να λειτουργήσει η εκκαθάριση, τα μοτίβα μπαλαντέρ στο bundleFilePatterns πρέπει να συμφωνούν με τα ονόματα των αρχείων που εκπέμπετε στη δόμηση. Υπάρχουν δύο τρόποι για να τις διατηρήσετε ακριβείς, ανάλογα με τον τρόπο με τον οποίο μπορείτε να δημιουργήσετε αρχεία ονομάτων εργαλείων.

Επιλογή 1: Παραθέστε απευθείας τα μοτίβα χαρακτήρων μπαλαντέρ

Πολλά εργαλεία δημιουργίας διατηρούν ένα σταθερό πρόθεμα ονόματος και αλλάζουν μόνο τον κατακερματισμό περιεχομένου, όπως index-[hash].js. Όταν τα ονόματα των αρχείων εξόδου ακολουθούν ένα προβλέψιμο μοτίβο όπως αυτό, αναφέρετε ένα μοτίβο χαρακτήρα μπαλαντέρ για καθένα στο bundleFilePatterns. Δεν απαιτούνται επιπλέον εργαλεία:

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

Ένα μοτίβο μπαλαντέρ, όπως το index-*.js αντιστοιχίζει αυτό το αρχείο σε κάθε δόμηση, ανεξάρτητα από την τιμή κατακερματισμού. Προσθέστε μία καταχώρηση ανά αρχείο εξόδου και προσθέστε ένα νέο μοτίβο κάθε φορά που η δόμηση ξεκινά να παράγει ένα νέο αρχείο εξόδου.

Επιλογή 2: Δημιουργία μοτίβων 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)
}

Συνδέστε το σενάριο στη δόμηση σας, ώστε να εκτελείται πάντα μετά το bundler:

{
  "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 χρησιμοποιούν το ίδιο μοντέλο security με τις παραδοσιακές τοποθεσίες Power Pages.

Ρύθμιση παραμέτρων υπηρεσίας παροχής ταυτότητας

Μεταβείτε στο Power Pages.
Βρείτε την τοποθεσία σας και επιλέξτε Επεξεργασία.
ΕπιλέξτεΥπηρεσίες παροχής ταυτότητας>.
Προσθέστε ή ρυθμίστε τις υπηρεσίες παροχής υπηρεσιών identity, όπως Microsoft Entra ID.
Κάθε νέα τοποθεσία έχει αυτόματα μια προεπιλεγμένη υπηρεσία παροχής Microsoft Entra ID.

Αποκτήστε πρόσβαση σε περιβάλλον χρήστη στον κώδικα

Λήψη μετα-δεδομένων ελέγχου ταυτότητας στον υπολογιστή-πελάτη:

Διεύθυνση URL αρχής:

Η αρχή ή η διεύθυνση URL εισόδου για Microsoft Entra ID είναι:
```
https://login.windows.net/<tenantId>
```
Βρείτε τη διεύθυνση URL Authority για άλλες διαμορφωμένες υπηρεσίες παροχής ταυτότητας, μεταβαίνοντάς στην Power Pages><your site>>Ασφάλεια> Υπηρεσίες παροχήςIdentity> ρυθμίσεις παραμέτρων.

Λεπτομέρειες χρήστη:

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

Χρήση Power Pages API Web

Οι προγραμματιστές μπορούν να χρησιμοποιήσουν Power Pages API Web για να φορτώσουν περιεχόμενο στο περιβάλλον εργασίας χρήστη ή για να δημιουργήσουν, να ενημερώσουν και να διαγράψουν εγγραφές. Προτού χρησιμοποιήσετε αυτά τα API, βεβαιωθείτε ότι τα απαιτούμενα API Web είναι ενεργοποιημένα και ότι τα κατάλληλα δικαιώματα πίνακα και ρόλοι Web έχουν ρυθμιστεί σωστά.


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

Ρύθμιση τοπικής ανάπτυξης ενεργοποιώντας κλήσεις Web API από το localhost με χρήση ελέγχου ταυτότητας με αναγνωριστικό Microsoft Entra

Οι προγραμματιστές χρειάζονται ταχύτερους κύκλους επανάληψης, τοπικό εντοπισμό σφαλμάτων και δυνατότητες θερμής επαναφόρτωσης κατά τη δημιουργία εφαρμογών. Η SPA υποστηρίζει αυτές τις ροές εργασιών ενεργοποιώντας ασφαλείς κλήσεις Web API από localhost με χρήση ελέγχου ταυτότητας Microsoft Entra ID (Azure AD) v1.

Αυτή η ρύθμιση σάς επιτρέπει να κάνετε τα εξής:

Εκτελέστε την εφαρμογή σας τοπικά με πλήρη υποστήριξη ελέγχου ταυτότητας.
Χρησιμοποιήστε εργαλεία σύγχρονης ανάπτυξης όπως το Vite για άμεση επαναφόρτωση και γρήγορη υποβολή σχολίων.
Αποφύγετε προβλήματα CORS κατά την κλήση API Web του Power Pages.
Επιταχύνετε την ανάπτυξη χωρίς την ανάπτυξη αλλαγών στην πύλη.

Αυτή η ρύθμιση επιτρέπει μια παραγωγική εμπειρία τοπικής ανάπτυξης για τη 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.
Note

MSAL.js δεν είναι συμβατή καθώς το Power Pages χρησιμοποιεί τελικά σημεία Microsoft Entra v1, ενώ το MSAL χρησιμοποιεί v2. Η μορφή του εκδότη διαφέρει μεταξύ των εκδόσεων.
Προσθήκη κεφαλίδας εξουσιοδότησης
- Συμπεριλάβετε αυτήν την κεφαλίδα σε όλες τις αιτήσεις API Web:
```
Authorization: Bearer <id_token>
```
Ορισμός ορατότητας τοποθεσίας σε δημόσια
- Αυτή η ρύθμιση επιτρέπει localhost την πρόσβαση στην τοποθεσία για σκοπούς ανάπτυξης και δοκιμών.
Ρύθμιση παραμέτρων διακομιστή μεσολάβησης ανάπτυξης
- Εάν χρησιμοποιείτε Vite, προσθέστε αυτόν τον κώδικα για να vite.config.js αποφύγετε προβλήματα CORS:
```
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/_api': {
        target: 'https://site-foo.powerappsportals.com',
        changeOrigin: true,
        secure: true
      }
    }
  }
});
```

Διαφορές από υπάρχουσες τοποθεσίες Power Pages

Ο παρακάτω πίνακας συνοψίζει τις βασικές διαφορές μεταξύ των τοποθεσιών SPA που δημιουργήθηκαν με αυτήν τη δυνατότητα και των παραδοσιακών τοποθεσιών Power Pages:

Χαρακτηριστικό	Συμπεριφορά τοποθεσίας SPA
Ανανέωση από την πλευρά του διακομιστή	Επιστρέφει πάντα τη ριζική σελίδα της τοποθεσίας και ο δρομολογητής από την πλευρά του προγράμματος-πελάτη αποδίδει δευτερεύουσες δρομολογήσεις.
Διενέξεις διαδρομών	Οι διαδρομές από την πλευρά του προγράμματος-πελάτη έχουν προτεραιότητα και μια οριστική ανανέωση επιστρέφει στη ρίζα.
Χώρος εργασίας σελίδων	Ο χώρος εργασίας σελίδων δεν υποστηρίζεται. Χρήση δρομολόγησης προγράμματος-πελάτη και σελίδων τοποθεσίας προγράμματος-πελάτη. Για ασφάλεια σε επίπεδο σελίδας, ελέγξτε τους εκχωρημένους ρόλους web με το καθολικό αντικείμενο χρήστη και αποδώστε υπό όρους το περιβάλλον εργασίας χρήστη.
Χώρος εργασίας στυλ	Το στυλ με τον χώρο εργασίας στυλ δεν υποστηρίζεται. Χρησιμοποιήστε το στυλ του πλαισίου σας, όπως CSS, CSS-in-JSή βοηθητικές κλάσεις.
Εντοπισμός	Υποστήριξη μίας γλώσσας. Εφαρμόστε φόρτωση πόρων από την πλευρά του προγράμματος-πελάτη.
Πρότυπα Liquid	Ο κώδικας Liquid και τα πρότυπα Liquid δεν υποστηρίζονται. Αποκτήστε πρόσβαση σε δεδομένα χρησιμοποιώντας τη μηχανή προτύπου του πλαισίου σας και τα API Web.

Συνήθεις ερωτήσεις

Ποια υποστήριξη είναι διαθέσιμη για δοκιμές μονάδας και ενσωμάτωσης;

Προς το παρόν, δεν υπάρχει ενσωματωμένη υποστήριξη για δοκιμές μονάδας και ενσωμάτωσης. Οι προγραμματιστές θα πρέπει να γράψουν και να εκτελέσουν αυτές τις δοκιμές τοπικά ή εντός των διοχετεύσεων CI / CD τους.

Υπάρχει υποστήριξη για ενσωμάτωση του Power Fx χρησιμοποιώντας το WebAssembly;

Αυτή η δυνατότητα δεν υποστηρίζεται αυτή τη στιγμή.

Είναι διαθέσιμος πηγαίος κώδικας σε Power Pages;

Προς το παρόν, οι δημιουργοί μπορούν να δημιουργήσουν τοποθεσίες Web χρησιμοποιώντας TypeScript ή GitHub Copilot Agent. Τα μεταγλωττισμένο αρχεία JavaScript και CSS είναι προσβάσιμα και μπορείτε να τα επεξεργαστείτε σε Visual Studio Code. Ωστόσο, η άμεση και εκτεταμένη επεξεργασία αρχείων HTML δεν υποστηρίζεται προς το παρόν.

Μπορώ να δημιουργήσω ένα στοιχείο εξωτερικά χρησιμοποιώντας αυτήν τη δυνατότητα και να το μεταφέρω σε μια τοποθεσία Power Pages;

Όχι, δεν μπορείτε να μεταφέρετε ένα στοιχείο που δημιουργήθηκε εξωτερικά σε μια υπάρχουσα τοποθεσία Power Pages χρησιμοποιώντας αυτήν τη δυνατότητα.

Μπορώ να προσθέσω έτοιμα στοιχεία, όπως λίστες και φόρμες;

Η προσθήκη έτοιμων στοιχείων, όπως λιστών και φορμών, δεν υποστηρίζεται προς το παρόν. Ωστόσο, μπορείτε να δημιουργήσετε προσαρμοσμένες φόρμες και λίστες χρησιμοποιώντας το πλαίσιο React και τα API Web.

Μπορώ να ενεργοποιήσω έναν ιστότοπο SPA ως PWA από τον χώρο εργασίας "Ρύθμιση";

Αρ. Οι τοποθεσίες SPA δεν υποστηρίζουν τη ρύθμιση προοδευτικής εφαρμογής Web (PWA) στη ρύθμιση χώρου εργασίας. Αυτός ο περιορισμός σημαίνει ότι δεν μπορείτε να χρησιμοποιήσετε την ενότητα Για κινητές συσκευές για να ενεργοποιήσετε μια τοποθεσία ως PWA. Για να προσθέσετε δυνατότητες PWA, όπως εμπειρίες εφαρμογών με δυνατότητα εγκατάστασης και σελίδες χωρίς σύνδεση, εφαρμόστε τις στον κώδικα-πλαίσιο. Για παράδειγμα, προσθέστε μια διακήρυξη εφαρμογής Web και έναν εργαζόμενο υπηρεσίας.

Πώς λειτουργεί ο έλεγχος στοιχείου ελέγχου πηγαίου κώδικα;

Οι προγραμματιστές μπορούν να χρησιμοποιήσουν την ενσωμάτωση Power Platform Git για στοιχείο ελέγχου πηγαίου κώδικα. Ωστόσο, μόνο τα μεταγλωττισμένα αρχεία web προστίθενται στο αποθετήριο, όχι ο πλήρης πηγαίος κώδικας.

Αυτές οι τοποθεσίες υποστηρίζουν SEO;

Επειδή οι τοποθεσίες SPA είναι χτισμένες με το πλαίσιο React και χρησιμοποιούν απόδοση από την πλευρά του πελάτη, η υποστήριξη SEO είναι περιορισμένη.

Τι προσφέρουν οι Power Pages υποστήριξη ασφάλειας και διακυβέρνησης στους χώρους της SPA;

Power Pages επιβάλλει δικαιώματα πίνακα και ρόλους web ασφαλείας σε κλήσεις Web API, εξασφαλίζοντας ότι η πρόσβαση στα δεδομένα συμφωνεί με τους ρόλους χρήστη. Χρησιμοποιήστε το window["Microsoft"].Dynamic365.Portal.User αντικείμενο για να ανακτήσετε βασικές ιδιότητες χρήστη και να προσαρμόσετε εμπειρίες με βάση τα προφίλ χρήστη.

Επιπλέον, οι τοποθεσίες SPA υποστηρίζουν:

Ρυθμίσεις παραμέτρων δημόσιων και ιδιωτικών ιστοσελίδων
Ρυθμίσεις διακυβέρνησης, συμπεριλαμβανομένου του ελέγχου της πρόσβασης σε ανώνυμα δεδομένα
Έλεγχος ταυτότητας και ρύθμιση παραμέτρων παρόχου

Αυτές οι δυνατότητες εξασφαλίζουν ασφαλή και συμβατή ενοποίηση των προσαρμοσμένων στοιχείων εντός Power Pages.

Σχόλια

Ήταν χρήσιμη αυτή η σελίδα;

Last updated on 2026-07-21

Δημιουργία και ανάπτυξη εφαρμογής μίας σελίδας στο Power Pages

Prerequisites

Να επιτρέπονται οι αποστολές αρχείων JavaScript

Δημιουργία και ανάπτυξη τοποθεσίας SPA

Αποστολή τοποθεσίας SPA

Σύνταξη

Παράμετροι

Παράδειγμα

Ορισμός παραμέτρων αποστολής με powerpages.config.json

Πεδία ρύθμισης παραμέτρων

Δείγμα powerpages.config.json

Λήψη τοποθεσίας SPA

Σύνταξη

Παράμετροι

Παράδειγμα

Ενεργοποιήστε και δοκιμάστε την τοποθεσία σας

Δομή και διαμόρφωση του έργου

Διαίρεση κώδικα και εκκαθάριση πακέτων

Ενεργοποίηση διαίρεσης κώδικα

Πώς upload-code-site καθαρίζει τα παρωχημένα πακέτα

Επιλογή 1: Παραθέστε απευθείας τα μοτίβα χαρακτήρων μπαλαντέρ

Επιλογή 2: Δημιουργία μοτίβων wildcard με ένα σενάριο μετά τη δόμηση

Έλεγχος ταυτότητας και εξουσιοδότηση

Ρύθμιση παραμέτρων υπηρεσίας παροχής ταυτότητας

Αποκτήστε πρόσβαση σε περιβάλλον χρήστη στον κώδικα

Δείγμα ροής React

Χρήση Power Pages API Web

Ρύθμιση τοπικής ανάπτυξης ενεργοποιώντας κλήσεις Web API από το localhost με χρήση ελέγχου ταυτότητας με αναγνωριστικό Microsoft Entra

Βήματα ρύθμισης παραμέτρων

Διαφορές από υπάρχουσες τοποθεσίες Power Pages

Συνήθεις ερωτήσεις

Ποια υποστήριξη είναι διαθέσιμη για δοκιμές μονάδας και ενσωμάτωσης;

Υπάρχει υποστήριξη για ενσωμάτωση του Power Fx χρησιμοποιώντας το WebAssembly;

Είναι διαθέσιμος πηγαίος κώδικας σε Power Pages;

Μπορώ να δημιουργήσω ένα στοιχείο εξωτερικά χρησιμοποιώντας αυτήν τη δυνατότητα και να το μεταφέρω σε μια τοποθεσία Power Pages;

Μπορώ να προσθέσω έτοιμα στοιχεία, όπως λίστες και φόρμες;

Μπορώ να ενεργοποιήσω έναν ιστότοπο SPA ως PWA από τον χώρο εργασίας "Ρύθμιση";

Πώς λειτουργεί ο έλεγχος στοιχείου ελέγχου πηγαίου κώδικα;

Αυτές οι τοποθεσίες υποστηρίζουν SEO;

Τι προσφέρουν οι Power Pages υποστήριξη ασφάλειας και διακυβέρνησης στους χώρους της SPA;

Σχετικές πληροφορίες

Σχόλια

Πρόσθετοι πόροι

Ορισμός παραμέτρων αποστολής με `powerpages.config.json`

Δείγμα `powerpages.config.json`

Πώς `upload-code-site` καθαρίζει τα παρωχημένα πακέτα